Performance issues in iPhone game using HTML and JS, with appMobi

Question

I'm making my first game with appMobi after creating some games for Android using Java. I basically intend to create a endless runner arcade game, 2d, top view.

I'm using appMobi with plain JS and CSS3 (without any other library such as Impact).

I started by doing some tests with canvas and created a very simple demo where you control a ball (basically a circle rendered using canvas) with the accelerometer and need to collect other balls. I've tested it with my Galaxy S2, and an iPhone 4 and it looked like the iPhone ran it much better, so I started writing a simple engine to use dom elements instead. I basically created an object that connects to a tag, and holds a position vector, also added a draw function that basically does the following: this.element.style.left=x+'px' (and the same for top and y).

On my main loop i've called the draw function on the objects and updated their location according to my game logic, and re-called the mainLoop using this window.requestAnimationFrame wrapper:

window.requestAnimFrame = (function(){
       return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

Then I moved on to creating a camera object to control screen positioning and made it successfully scroll the background using css background-position property. I've tested it with my new Galaxy s3 and with a s2 with some graphics on (2 200x200 pngs, and a background) and everything ran smooth at ~60 fps. I was very pleased with the results and really got excited to test on an iPhone 4 iOS 4.x , but to my disappointment it ran at 2-3 FPS ! 30 times slower than my android. I started making a lot of changes (currently I'm using a viewport of 720x1280) so I've tried using 320*480, using canvas instead, removing scrolling background, resizing images, but to no avail, while the android performed well on all variations.

Best I got was 5 FPS. I got another iPhone to test, an iPhone 4S with iOS5 and got very very unstable FPS. ranged from 3 - 50 but was unplayable - no chances anyone would play it, and I've not even started to pack it with content.

I really want to take advantage of cross-platforming and it would be a shame for me to give up on the Apple market, so any tips or advise will be warmly received!

Thanks, Gabriel

Answer 1

This is the answer I got on appMobi's forums, if anyone has this issue:

Use Direct Canvas

JS/CSS3 will perform horrible on every device, no matter what. The stock browser in iOS (Safari) has NitroJS enabled, but not in the UIWebView...but if you have the time, read up and you'll see that you can't write a JS game without tapping into hardware acceleration like Direct Canvas.