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

// scale && translate Standard operations
context.save()
context.scale(1.0/camera.scale, 1.0/camera.scale);
context.translate(-r.x, -r.y);
//clipping rect for tiles We want to make visible only those tiles which are on screen
var minI = r.x >> TILE_SIZE_BITS, maxI = (r.x+r.w) >> TILE_SIZE_BITS;
var minJ = r.y >> TILE_SIZE_BITS, maxJ = (r.y+r.h) >> TILE_SIZE_BITS;
minI = Math.max(minI, 0); maxI = Math.min(maxI, map.cols-1);
minJ = Math.max(minJ, 0); maxJ = Math.min(maxJ, map.rows-1);
//for each visible tile
for (var j=minJ; j<=maxJ; j++)
for (var i=minI; i<=maxI; i++) {
//draw surface, if tile has sprite
var tile = map.getSurface(i, j)
var autotile = tile.auto(map, i, j)
tile.render(this, autotile, i*TILE_SIZE, j*TILE_SIZE)
tile = map.getObject(i, j)
autotile = tile.auto(map, i, j)
tile.render(this, autotile, i*TILE_SIZE, j*TILE_SIZE)
}
context.restore();
}
}
Tile.prototype.render = function(renderer, autotile, x, y) {
var sprite = this.sprite
if (!sprite) return
renderer.context.drawImage(sprite.source, sprite.x, sprite.y, TILE_SIZE, TILE_SIZE, x, y,
TILE_SIZE, TILE_SIZE);
}
Tile.prototype.auto = function(map, i, j) {
}
Figure 22-5 shows how it will look if you create all the described objects and connect a camera to the canvas.