HTML and CSS Reference
In-Depth Information
dy = ((mask&63)>>2)*T2;
context.drawImage(sprite.source, dx+sprite.x, dy+sprite.y, T2, T2, x+T2, y+T2, T2, T2);
} else context.drawImage(sprite.source, sprite.x, sprite.y, TILE_SIZE, TILE_SIZE, x, y,
The configuration here is easy. Add a new tileset, separating surface spritesheets by empty lines because they are
twice as wide as single tiles. You don't want smooth transitions between the bridge and the abyss (it looks awful),
so let's mark them by the noSurface flag, as shown in Listing 6-6.
Listing 6-6. Smooth Transitions
var SurfaceConfig = {
init: function(game) {
var tiles = game.tiles, sprites = game.sprites
tiles.apply(["grass", "sand", "dirt", "abyss"], {autoSurface: true});
tiles.apply(["bridge_v", "bridge_h"], { noSurface: true});
sprites.addSpriteSheet("img/surfaces.png", [
["grass", "", "abyss", "", "sand", "", "dirt"]
} }
Now add files to index.html , and note the difference, as seen in Figure 6-12 .
Figure 6-12. Perfection!
You can further enhance this tiny autotile engine to serve your design purposes as follows:
Add irregular tiles and supplementary patterns.
Create tile transitions that can be fully automated if there's no need for pixel-perfect
art on each tile.
So take this approach and try some tiling! You'll be revisiting the techniques learned in this chapter in Chapter 22.
Search WWH ::

Custom Search