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

I am making my first game with appMobi after creating some Android games using Java. I basically intend to create an endless arcade game, 2d, top view.

I am using appMobi with regular JS and CSS3 (without any other library like Impact).

I started with a few canvas tests and created a very simple demo where you control a ball (basically a circle made using canvas) with an accelerometer and you need to collect other balls. I tested it with Galaxy S2 and iPhone 4, and it seems that the iPhone works much better, so I started writing a simple engine to use dom elements. I basically created an object that connects to the tag and holds the position vector, it also adds a drawing function, which basically does the following: this.element.style.left = x + 'px' (and the same for top and y).

In my main loop, I called the draw function on objects and updated their location according to my game logic and re-called 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);
              };
    })();

background-position css. Galaxy s3 s2 (2 200x200 pngs, ), ~ 60 . iPhone 4 iOS 4.x, , , 2-3 FPS! 30 . ( viewport of 720x1280), 320 * 480, , , , , .

5 FPS. iPhone , iPhone 4S iOS5 FPS. 3 50, - , - , .

-, Apple, !

,

+5
2

, appMobi, - :

JS/CSS3 , . iOS (Safari) NitroJS, UIWebView... , , , JS- , .

+1

All Articles