1

I'm creating a game for the iPad using Phonegap, which means I'm using JavaScript/ CSS/ HTML for iPad's Safari. Basically, I'm moving around lots of img elements (sometimes changing their src) on 1024x768 resolution, just local files without any net connection. On the desktop Safari things work smoothly, but on the iPad, my setInterval feels delayed and flickering. Do you have any speed optimization tips for me that I could try? Thanks!

PS: I'm aware that switching to the iOS's native Objective-C would likely be much, much faster, but I'd really love to try it with standard JS/HTML/CSS.

Philipp Lenssen
  • 8,818
  • 13
  • 56
  • 77
  • 1
    Have you tried, instead of changing "src" references, to combine the images (where possible) into a single big image and then use CSS to position the image in the viewport? – Pointy Jul 09 '10 at 14:06
  • Yeah, CSS Sprites are almost always preferable for HTML games in general. Don't about about the iPad though. – bobince Jul 09 '10 at 14:30
  • I dont thing they can be an issue since they are **local files**. – gblazex Jul 09 '10 at 14:39
  • Well @galambalazs I'd try it anyway, because it could be that the layout engine has an easier time repositioning an image file it's already decompressed versus opening and decompressing an entirely different image. – Pointy Jul 09 '10 at 14:47
  • The reason I don't think this is the case is because the OP said: *" I'm **moving** around **lots of img** elements (**sometimes** changing their src)"*. So the change is probably not the issue here. I'd rather say that setInterval can't handle the number of actions. See my answer. – gblazex Jul 09 '10 at 14:54

2 Answers2

5

You've run into one of the most common browser scripting issue with animated webpages.

The reason why your application slows down is because the browser is a single-threaded environment. As soon as you forget that you'll get into trouble.

setInterval makes you believe that your actions will happen in parallel like in a multi-threaded environment. But what really happens is that setInterval pushes the action to the UI stack to be handled at a later time. But if too many things are getting in to this stack at one time some actions will lag. The setInterval will keep pushing new actions, but the old ones will be still there, and the whole rendering becomes a sluggish mess.

As to when it happens, it depends on the hardware/software capabilities. iPad has much lower horse power than a desktop PC, that is pretty obvious.

Things you can do in order to avoid lag.

  1. Trade smoothness for speed: raise your delay between intervals, so as to avoid cumulative actions in the UI stack.

  2. setTimeout: this alternative is very similar to setInterval, except that it doesn't ensures a given interval between repetition, rather focuses on how long the browser should wait until repeating the action. So in order to make it more like setInterval you may need to keep track of the elapsed time between actions and calculate the measure of the change that has to be taken care of.

  3. Group animations: you can have one interval for some related animations (you manage a mini-queue for them) and so you decrease the actual setInterval calls, and gain more power over controlling race conditions.

Also make sure to read this piece of article:

Making an iPad HTML5 App & making it really fast (Thomas Fuchs the creator of script.aculo.us)

gblazex
  • 49,155
  • 12
  • 98
  • 91
  • Thanks a lot! One question: You mention group animations, so I figured it might be worth noting that I'm currently only using a single setInterval (calling the main handler function, which in return handles behavior, positioning, drawing of the sprites etc.). FWIW I've also tried with setTimeout though this didn't seem to gain a speed advance. – Philipp Lenssen Jul 11 '10 at 08:06
  • try something like this: http://jsbin.com/ubaja/11/edit (maybe with setTimeout, but as I said that needs a little more time to get it work) – gblazex Jul 11 '10 at 09:00
1

Use CSS3 animations that use GPU acceleration... This will have a huge effect on any animations.

ad rees
  • 1,522
  • 2
  • 11
  • 16