in search of Space Monsters

exploring arcade game design with HTML5 and JavaScript

iOS5 and mobile game performance with HTML5

Posted on | October 13, 2011 | 4 Comments

When I first started creating these HTML5 arcade games I confess I had nothing to test them on. So I created my games and just tested them in a desktop web browser. Normally Chrome.
It soon became apparent that the best way to reach out to people and monetise my work was to adapt the games to run within a mobile browser.

I soon became bored of pestering friends to test my games so I scraped together some cash and bought an HTC Desire HD. A wonderful smartphone in every respect but perhaps not the best handset to choose for testing.
You see the handset is so capable it can run CANVAS based games at lightning speed. I was really no better off than when I was using the desktop.

My wife has an iPod Touch first generation. I tested my games with this for a while and assumed that the games would work first time on all iOS devices.
How wrong could I be ?

iPhone 4 is a dog. I soon realised that the CANVAS performance on iPhone 4 was considerably less than desirable. There are probably several reasons for this and generally they’re not without their fair share of conspiracy theories.
Apple throttling JavaScript performance on iPhone 4 deliberately to encourage more business through their App Store ?
Surely not.

Whether it was true or not I was left with a huge hole in my portfolio. I had these cool looking games that really only worked on anything that wasn’t an iPhone 4. Trouble is of course that iPhone 4 is one of the most popular handsets in the world. My market was a fraction of the size it could be.

To make things worse I’m really not a hacker. I guess I hold this daft old fashioned view that I shouldn’t have to hack. I’d rather the vendors sort their devices out than me hack around trying to scrape some FPS together. I’m really just terrible at that kind of thing.

So yesterday we saw iOS5 arrive. Plenty of hype about a number of cool features but not much of a fanfayre for the performance of JavaScript in the browser. A few rumours surfaced that the performance was up to 3 or 4x the performance of the current hardware but I really needed to see it for myself.

To my amazement the performance exceeded my expectations. My “slower” games; Dragons and Danger Ranger are whizzing along. All games now perform beautifully in the mobile Safari browser.
iOS5 changes everything.

I decided to put together some tests to compare raw CANVAS performance against old school DIVs and IMGs.

If you have a mobile phone point it to the two following links.
Take a look at the FPS count in the top corner. If you like comment your findings below. I’d be interested to see your thoughts and experiences.

CANVAS based animation: http://gamedev.spacemonsters.co.uk/v2canvas/
DIV based animation: http://gamedev.spacemonsters.co.uk/v2div/

 

Comments

4 Responses to “iOS5 and mobile game performance with HTML5”

  1. Mic
    October 14th, 2011 @ 1:39 am

    Very interesting.

    iPhone 4/iOS5.0
    Canvas: 20-30 fps smooth gameplay
    DIV: 20-150 fps eratic gameplay (can’t play it)

  2. Mark
    October 14th, 2011 @ 9:59 am

    That is interesting. I really have to get an iPhone4 to test with.
    On my HTC it is really quite smooth in both scenarios.
    But 20-30 fps is a great leap for iPhone.
    Thanks for testing for me. Very much appreciated.

  3. Robert Schultz
    October 14th, 2011 @ 12:15 pm

    On my 3GS I get:
    Canvas: 30 to 50 FPS (Smooth game play, erratic FPS counter)
    DIV: 26 to 32 FPS (Smooth game play, but feels much slower)

    The BEST way to get fast game play on iOS is to use CSS3 transforms as they are hardware accelerated. I’m not sure if CSS3 animations are or not…

  4. Nicola Hibbert
    October 17th, 2011 @ 3:28 pm

    I think the problem with Canvas on iPhone4 was to do with how scaling for a retina display was implemented. Jonas Wagner came up with a nice little hack http://29a.ch/2011/5/27/fast-html5-canvas-on-iphone-mobile-safari-performance to improve performance, but it seems like it’s fixed in iOS5? (I haven’t gotten around to upgrading yet, must check!).

Leave a Reply





  • Categories

  • Recent Posts

  • Recent Comments