The idea of looking at HTML programming came from watching my little 3-year-old playing on the iPad and wanting to make something he could play with and learn from. Although the target platform is iPad (and maybe iPhone) I’d prefer to iterate on PC which means I need a common technology to reuse between the two. As we all know, native iOS development requires a Mac, iPhone developer program membership and the time to learn and use Xcode – I know I haven’t really got the money for the first two and the patience for the third. If I was responsible for planning the iOS Safari roadmap, I’d have told everyone to implement WebGL for me so that I can stick with the 3D I know, but since they’re not mine to command, I’m going to have to go for a 2D solution.
The first step was to create the HTML to encapsulate the canvas. Looking at the specification for canvas, you need to specify a pixel size for the canvas but with an onload script, you can update the size to what you want. My main aim is to develop something that maximizes the available space on the screen I’m working with, either on the PC or the iPad, so a fixed size isn’t a great place to start and I spent a lot of time looking for a solution (the one I found is in the resources list below).
Here’s the first working attempt, with the main features I wanted to demonstrate:
- Supports resize and orientation changing on PC and iOS (please run it on your iPad/Phone and rotate!).
- Provides a 1:1 area for the application.
Long term plans
Looking forward to future areas for research, there’s several things I want to look at:
- Make some reusable modules, containing common code and reusable toys for future development.
- Performance. I did read an article about poor performance with canvas on iPad, due to the number of pixels to fill but I can’t find the link any more. I can find a lot of pages discussing performance problems Safari versus everything else and timing graphs. First thing to do: write something to check frame rate.
- Touch input. This is something to try and get working early since it makes a really good interface for experimentation. It’s going to be a pain that iteration will need to be on an iOS target for me, but the improved iteration time with Dropbox should help. And on a related note, I want to look at joystick input too.
- Audio. This is a whole area of HTML5 and possible compatibility problems that I need to research to add depth to the applications I want to write.
- CSS (Cascading Style Sheets). Most of the style related stuff that is required for the full screen behaviour is currently implemented in script so I’m not sure if I need CSS.
- Creating a HTML5 application that you can download to your iPhone. Hopefully that will also allow me to use the full screen, rather than bordered within a browser.
- https://developer.mozilla.org/en/Canvas_tutorial – Getting started with a framework you cut-and-paste and can start playing with right away
- http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games.html – It took an age to find out how to do something that maximized use of the screen on within Firefox or Safari on the iPad. Even when I got FF working, an orientation change with the iPad still resulted in corrupt sizing. That link also goes further into subdividing the screen which will be useful in future.
- http://www.devlounge.net/code/10-awesome-html5-canvas-examples – Inspiration!