Creating a 2-D Platformer - HTML5 Mobile Game Development - page 348

speedX: 0.50, y:-225, z:0 }));
var tiles = stage.insert(new Q.TileLayer({ sheet: 'block',
x: -100, y: -100,
tileW: 32,
tileH: 32,
blockTileW: 10,
blockTileH: 10,
dataAsset: 'level.json',
z:1 }));
stage.add('viewport');
stage.centerOn(0,0);
Q.input.bind('right',function() {
stage.viewport.centerOn(stage.viewport.centerX + 64,
stage.viewport.centerY)
});
Q.input.bind('left',function() {
stage.viewport.centerOn(stage.viewport.centerX - 64,
stage.viewport.centerY)
});
}, { sort: true }));
Q.load(['background-wall.png','sprites.png',
'sprites.json','level.json'],function() {
Q.stageScene("level");
});
});
This code should look similar to the code from Chapter 15, but with some additional animations and loaded
assets. You need to grab the assets from the chapter code for the example to work, making sure to put the image
files in the images/ directory and the .json files in the data/ directory.
In this code, the stage binds the left and right actions to allow you to move the viewport around, so you
should scroll the background around on your desktop browser with the arrow keys or with the keypad on a mo-
bile device.
Optimizing the Drawing
With small tiles and large levels, the number of tiles that need to be drawn for each frame would quickly bog
down performance. One quick optimization would be to draw only the tiles that are actually on the screen, but
even then the 150 32 × 32 tiles that would be needed to fill up an iPhone's 480 × 320 screen is still too many to
draw for each frame. A better solution is to prerender blocks of tiles (the tiles aren't changing each frame after
all) and then draw a smaller number of blocks at the correct position.
To add this code into the TileLayer class, replace the draw method in that class with the code from List-
ing 18-4 .
Listing 18-4: Tile prerendering