It’s…alive!
The first question we need to answer when exploring HTML5 development on a mobile device is whether the hardware is going to be powerful enough to create the experience we want our users to have in an interpreted language like JavaScript. Towards that end, the first test app I built was a very simple JS application that did the least I felt I could get away with:
1) Created a 2d Canvas the size of the screen resolution of a bookmarked webapp on the iPhone (320×460) and grabbed the context
2) Started a heartbeat timer that would optimally go off every 10 ms with setInterval()
3) Every time the heartbeat fired, change a random RGB value one point either up or down (also randomly)
4) Repaint the screen with the new value to show animation working and display the number of times the heartbeat fired in the past second (Frames Per Second)
In other words, I wanted to measure the FPS I could crank out of the iPhone without doing anything else. If the FPS was in the 10-20 range, the type of animations I’d be able to support in a game would be much more limited than if the FPS was in the 40-60 range. Here’s what I got on my iPhone 3GS:
83 frames per second. Which is about 5FPS slower than my Chrome desktop can put out. And conventional wisdom for PC game development is that anything beyond 60FPS hits the diminishing returns curve pretty hard.
Of course, this is with ABSOLUTELY NOTHING else the app has to handle, so it’s not time to pop any champagne corks yet. But a critical first hurdle has been passed. Hooray!
Oh, fun aside: I brought out my ancient first gen iPhone to test the app out just to see what would happen. It rendered the text inverted and upside down with horrible flicker effects. So no 1st gen iPhones need apply for HTML5 webapps, sad to say.