Autotiles - HTML5 Game Development Insights - page 85

Every solid can have two sprites to describe it: with wall and without wall. The magic number will be 0 or 1,
depending on if there is a solid at the bottom (see Listing 6-2).
Listing 6-2. Solids and Sprites
var SolidTile = extendTile(Tile, {
type:3, layer: 1,
auto: function(map, i, j) {
return map.getObject(i, j+1).type == 3
},
render: function(renderer, hasBottom, x, y) {
var sprite = hasBottom?this.sprite2:this.sprite;
var context = renderer.context;
if (sprite)
context.drawImage(sprite.source, sprite.x, sprite.y, TILE_SIZE, TILE_SIZE,
x, y, TILE_SIZE, TILE_SIZE);
},
bind: function(sprites) {
this.sprite = sprites.get(this.name);
this.sprite2 = sprites.get(this.name+"-plain") || this.sprite;
}
})
The height of each solid object will be the same, so there will be no shadows between them. You should draw a
thin 1-px shadow around every solid, except in places that separate two solids. Put the light source at the left-bottom
corner, and an extra shadow will appear at the right of each solid. If there is no solid below, the shadow won't be a
rectangle.
For each cell that has an object tile, you have to calculate mask of its neighbors. The i -th bit will be ON if the
neighboring cell at the i -th direction contains a solid tile. Since objects can store something else in a magic number,
let's use its last 8 bits (from 24 to 31) to store it (see Listing 6-3).
Listing 6-3. Calculating the mask of the neighbors for each cell with an object tile
var dx = [1, 1, 0, -1, -1, -1, 0, 1], dy = [0, 1, 1, 1, 0, -1, -1, -1];
function getTileShadow(map, i, j) {
var shadow = 0
for (var bit=0;bit<8;bit++)
if (map.getObject(i + dx[bit], j+dy[bit]).type == 3) shadow |= (1<<bit)
return shadow<<24
}
function drawTileShadow(renderer, mask, x1, y1) {
var shadow = (mask >> 24)&0xff;
if (shadow == 0) return;
var context = renderer.context;
context.strokeStyle = "rgba(0,0,0,0.4)"
context.beginPath();
var x2 = x1 + TILE_SIZE, y2 = y1 + TILE_SIZE
if ((shadow&1)!=0) {
context.moveTo(x2-0.5, y1); context.lineTo(x2-0.5, y2);
}