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

text.y = y;
text.textAlign = align;
this.addChild(text);
return text; // text content needs to be changed later.
}
7. We can then use the helper methods we just defined to set up the heads-up display.
This includes several indicators for the game parameters, such as the coins and
diamonds collected:
UILayer.prototype.setupHUD = function() {
this.placeBitmap('images/candies.png', 28, 16);
this.placeBitmap('images/diamonds.png', 154, 14);
this.placeBitmap('images/populations.png', 810, 14);
this.coinsIndicator = this.placeText('12345', 12, 123,
34, 'right');
this.diamondsIndicator = this.placeText('0', 12, 250,
34, 'right');
this.powerSupplyIndicator = this.placeText('100', 16,
905, 32, 'center');
this.populationIndicator = this.placeText('100', 16,
845, 32, 'center');
};
8. That's all for the layers. Next, we move to the main game logic. Append the
following code to the end of the game.js ile. It iniializes the canvas stage,
adds the layers, and sets up the game icks:
// The Game Logic
;(function(game, cjs){
game.start = function() {
game.stage = new cjs.Stage(game.canvas);
game.backgroundLayer = new game.BGLayer();
game.cityLayer = new game.CityLayer();
game.uiLayer = new game.UILayer();
// in correct order: from background to foreground
game.stage.addChild(game.backgroundLayer);
game.stage.addChild(game.cityLayer);
game.stage.addChild(game.uiLayer);
cjs.Ticker.setFPS(40);
cjs.Ticker.addEventListener('tick', game.stage);