HTML and CSS Reference
In-Depth Information
blockY < this.p.cols) {
this.p.tiles[y][x] = tile;
if(this.blocks[blockY]) {
this.blocks[blockY][blockX] = null;
}
}
},
draw: function(ctx) {
var p = this.p,
tiles = p.tiles,
sheet = this.sheet();
for(var y=0;y < p.rows;y++) {
if(tiles[y]) {
for(var x =0;x < p.cols;x++) {
if(tiles[y][x]) {
sheet.draw(ctx,
x*p.tileW + p.x,
y*p.tileH + p.y,
tiles[y][x]);
}
}
}
}
}
});
};
The
TileLayer
sprite doesn't do much yet. The
init
method sets up a couple of properties as usual and
calls the
load
method if a
dataAsset
is passed in. It also sets up some properties that will be used in the
next section.
The
setTile
method will be used to modify the tile at a certain location on the map after the fact. It has
code that will clear out prerendered blocks; this code will make sense after the next section adds in prerender-
ing.
To limit the number of tiles that the game has to draw each frame, the
TileLayer
is optimized to prerender
blocks of tiles to off-screen Canvas elements. The additional initialization code at the top of the
init
method
sets that up for the code you add later in this chapter in the section “Optimizing the Drawing,” precalculating
the size (in pixels) of each block.
The
load
method just loads in an array of arrays that defines the frame of the spritesheet for the tiles at each
position and calculates the size of the
TileLayer
from that.
Finally, the
draw
method overloads the default
Sprite draw
method and loops over each row of tiles and
draws those tiles that have a nonzero value at that position.
