Creating a Two-Dimensional Map Editor - HTML5 Game Development Insights - page 355

Figure 22-4. Tileset version 2; unexpected changes
You need a separate object to describe the concrete game configuration—the lists of sprites and tiles and the
correspondence between them. Depending on the game, each tile can be rendered in a unique way and can have a
unique behavior. Moreover, one game can have a number of configurations, basic and modified. Each configuration
has init and afterInit methods. Each modification will add some new way of rendering; in a real game, it can add a
new behavior, too. This approach is especially useful for modifying the game, and the game's fans will appreciate it.
Figure 22-3 displays an 8 × 3 tileset. Grass , gravel , sand, and dirt appear beneath all other tiles on the canvas.
Let's assign them the SurfaceTile type. Brick , wall , bush , block, and metal are solids. They will have shadows. There
are versions of brick, bush, and wall that appear without the bottom wall; you will use it when there is a solid tile
underneath them. Abyss is transparent and doesn't have a sprite. Deep_default and deep_bridge are versions of abyss
that appear only if there is something on top of that tile. All other tiles have the type ObjectTile , and to make less code
in configuration, they can be described as “all sprites that were not used.” By default, the map will be filled with grass.
In a basic configuration, however, none of this matters. You have two types: ObjectTile and SurfaceTile .
You are creating five surface tiles, and each sprite that is not used will create an ObjectTile in the addUseless
method (see the section “Binding Sprites to Tiles”). The abyss tile will have a unique way of rendering in one of the
modifications, so you create it only if it was not created in the init method of other configurations.
ObjectTile and SurfaceTile are still almost empty, but functionality is added to them later in rendering and in
other steps:
var BasicConfig = {
init: function(game) {
var tiles = game.tiles, sprites = game.sprites
tiles.defaultObject = tiles.add(new ObjectTile("nothing"));
tiles.addMany(SurfaceTile, ["grass", "gravel", "sand", "dirt"]);
tiles.defaultSurface = tiles.get("grass")
sprites.addSpriteSheet("img/tiles.png", [
["grass", "gravel", "sand", "dirt", "hole1", "hole2",
"hole3", "hole4" ],
["deep_default", "deep_bridge", "forcefield", "bridge_h", "bridge_v", "chest",
"lumber", "cactus"],
["brick-plain", "brick", "wall-plain", "wall", "bush-plain","bush",
"block", "metal" ]
]);
sprites.addSpriteSheet("img/horses.png", [ ["horse1", "horse2", "horse3"] ])
},