Baking doesn't make your game run faster, it just makes the source code harder to read.
Well that's not entirely true, Google's
Closure Compiler has some optimizations that make the script
a little faster. But I would be surprised if the performance increase would even be measurable in a typical game.
I have no idea why the game runs slow for you; It runs with constant 60fps in Chrome on Firefox4 for me. This
may be a problem with your graphics driver, as some older drivers/graphics cards are blacklisted and don't use hardware acceleration in the browser.
Here's the thing: whether you run your game with 640x960 and a scaling of 1, or 80x120 and a scaling of 8 - the speed on the iPhone4 will be about the same, because both are rendered by Impact with 640x960 in the end. This is done, because scaling a canvas after every frame (via CSS) is extremely slow. This also means that a 'viewport scale' of the page that is not 1 is really slow. So make sure, as the article suggests, to add the following to your html page:
<meta name="viewport" content="width=device-width;
initial-scale=1; maximum-scale=1; user-scalable=0;"/>
Now, because of the iPhone's 'devicePixelRatio' of 2, a "pixel" on an HTML page essentially corresponds to 2 pixels (well, 2x2) on the screen you have to ensure that a game that you set to run in 640x960 will be rendered in a manner where one virtual HTML pixel corresponds to one pixel on the screen. You also have to force the #canvas element to be 'scaled down' to these virtual pixels:
#canvas {
width: 320px;
height: 480px;
...
}
(I'm sorry, this is pretty hard to explain, but I think the article I mentioned before does a decent job at it :))
One more thing: every call to draw an image takes some time - especially on mobile devices. Therefore you typically want to reduce the number of draw calls as much as possible. Because background maps are made up of hundreds of tiles, drawing them can be quite slow,
if you draw them tile by tile. However, Impact has a mode for
pre-rendered backgrounds that will speed up things immensely on mobile devices. With pre-rendered backgrounds, the tilesize of your background maps doesn't matter much anymore.
Again, there's some more detail about all this in the
Impact on mobile platforms article.
I modified your version of the game a bit; I hope you don't mind - it now runs with 60fps on my iPhone3GS (may be a bit slower on the iPhone4 - see the article for the reason :)): Try this:
http://impactjs.com/files/temp/breaker/
Note that the size of the game screen is still a bit too large to show up nicely in the iPhone's browser. The screen height of the iPhone minus the browser's navigation bar on the bottom and the status bar on the top is 420px (or 840 'real' pixels on the iPhone4), not 480px.
Things I changed in your code:
The CSS definition of the #canvas element and the viewport meta-tag in the .html file.
The call to ig.main() - This will render the game in 320x480 on the iPhone3 and 640x960 on the iPhone4:
ig.main('#canvas', MinimalBreaker, 60, 160, 240, 2 * ig.ua.pixelRatio);
And I also added this method to your game class, to enable the pre-rendered background mode on all background layers:
loadLevel: function(data) {
this.parent(data);
for( var i = 0; i < this.backgroundMaps.length; i++ ) {
this.backgroundMaps[i].preRender = true;
}
},
I hope that clarifies a few things.
