Autotiles - HTML5 Game Development Insights - page 92

Figure 6-10. Surface production in four steps
Obviously, you shouldn't repeat this procedure each time using a 3×4 tiles set, because you can do it on a 2×3 tiles
set from the beginning. Also, don't forget that in the 2×3 variant, the bottom 2×2 square is constructed from sprites
shifted by 16 pixels in each direction.
If an object tile is allowed to create a smooth edge ( noSurface is equal to false), and a surface tile has a special
spritesheet for it ( autoSurface is equal to true), then the magic number will describe which 16 × 16 parts of the
spritesheet you have to render in each of the quarters of tile on the canvas. Since there are 4 * 6 = 24 possible indices,
you store each of them in 6 bits (see Figure 6-11 ). First, you need 24 bits of the magic number (see Listing 6-5).
Figure 6-11. Indices for quarter of tile
Listing 6-5. Determining the 24 bits of the magic number
var test = [0, 0, 0, 0, 0, 0, 0, 0, 0];
Tile.prototype.noSurface = false
SurfaceTile.prototype.autoSurface = false
SolidTile.prototype.noSurface = true
SurfaceTile.prototype.auto = function(map, i, j) {
//AUTOTILE #1
if (!this.autoSurface || map.getObject(i, j).noSurface) return 0;
var noEdges = true;