Targeting App Stores - HTML5 Mobile Game Development - page 481

Getting a Game Ready to Load into CocoonJS
Despite Ludei's claim, depending on how your HTML5 game is written, you may need to make some modi-
fications for the game to load in CocoonJS. The primary consideration is how you put a Canvas onto the page.
CocoonJS parses your index.html file, but only to load the JavaScript files mentioned therein. This means
that you need to make sure you generate your <canvas> element via JavaScript and not via a <canvas> tag
in your HTML.
The CocoonJS <canvas> tag also supports a special option you can apply to make the <canvas> element
scale up to fill the size of the screen while still maintaining its aspect ratio.
To modify the Alien Invasion game from Chapter 3, “Finishing Up and Going Mobile,” to work with Co-
coonJS, modify the Game.initialize method in engine.js to read as shown in Listing 27-3 .
Listing 27-3: A modified Game.initialize method
// Game Initialization
this.initialize = function(canvasElementId,sprite_data,callback) {
this.canvas= document.createElement("canvas");
// CocoonJS extension
this.canvas.style.cssText="idtkscale:ScaleAspectFit;";
this.canvas.width = 320;
this.canvas.height = 480;
document.body.appendChild(this.canvas);
this.playerOffset = 10;
this.canvasMultiplier= 1;
this.mobile = true;
this.width = this.canvas.width;
this.height= this.canvas.height;
this.loop();
if(this.mobile) {
this.setBoard(4,new TouchControls());
}
SpriteSheet.load(sprite_data,callback);
};
The method ignores the passed-in canvasElementId and just creates a new Canvas element that it calls
appendChild on to make visible.
It also sets the special idtkscale property to ScaleAspectFit to make sure the Canvas element scales
up as wanted.
Next, the mobile setup method is removed and just replaced with a this.mobile = true statement
because the Canvas element doesn't need to get resized anymore. Other than that Alien Invasion is ready to be
wrapped inside of CocoonJS.
The other thing you want to check is to make sure you use requestAnimationFrame to handle the
animation, specifically the webkitRequestAnimationFrame vendor-prefixed version because that's the
one supported by CocoonJS.