HTML and CSS Reference
In-Depth Information
The next function loads sprite file names and a corresponding two-dimensional array of names; to skip a row, use
“”
.
This function is used later, in the default configuration (see the section “Basic Tileset Configuration”). You arrange
all the tile images into a number of files. Each file contains a grid with 32 × 32 cells that hold a number of images. For
each file with images, you will call that function. The function
OnComplete
will be called after all images are loaded:
addSpriteSheet: function(filename, names) {
var self = this;
var img = new Image();
img.onload = function() {
self.loaded++;
if (self.loaded == self.total && self.onComplete) //Are all images loaded?
self.onComplete();
}
this.total++;
img.src = filename;
// Parsing 2-dimension array of names and generating sprites objects
for (var i=0; i<names.length; i++)
for (var j=0;j<names[i].length;j++) {
var name = names[i][j];
if (name != "") {
this.add(new Sprite(name, img, j*TILE_SIZE, i*TILE_SIZE));
}
}
}
}
Basic Tileset Configuration
Why bother to creating tiles and sprites separately? Most tile editors use integers to enumerate the tiles and store a
maplike array of integers. In real life, however, sad things happen. One moment your artist friend makes you a pretty
tileset (see Figure
22-3
), and the next, she completely reorders the tiles while adding new ones (see Figure
22-4
). This
is why you must create a configuration that allows for easy migration. Also, people who make modifications to your
game will be grateful if you implement it in this manner.
Figure 22-3.
Pretty tileset
