Building an Isometric City Game - HTML5 Game Development - page 160

// Tile View
;(function(game, cjs){
function Tile(imagePath) {
imagePath = imagePath || 'images/tile.png';
cjs.Bitmap.call(this, imagePath);
this.regX = 0;
this.regY = 21;
}
Tile.prototype = Object.create(cjs.Bitmap.prototype);
Tile.width = 86;
Tile.height = 43;
game.Tile = Tile;
}).call(this, game, createjs);
2. In the previous task, we coded the bare city layer without adding any object.
Now, we work on the CityLayer object. Add the following code to the
CityLayer constructor funcion:
function CityLayer() {
Layer.call(this);
// city background.
var bg = new cjs.Bitmap('images/city-bg.png');
bg.regX = 370; // adjust to fit the 9x9 tiles.
bg.regY = 30;
this.addChild(bg);
this.cols = this.rows = 9; // 9x9 map.
// tiles container to contains all Tile instance.
this.tiles = new cjs.Container();
this.addChild(this.tiles);
// 2D array that holds the ref. of building sprites
this.viewMap = game.helper.create2DArray
(this.rows, this.cols);
// center align the city layer to the stage.
this.x = game.setting.gameWidth /2 -
game.Tile.width / 2;
this.y = game.setting.gameHeight /2 -
(this.rows-1) * game.Tile.height / 2;
this.redraw(); // create the visual of the city
}