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

8. We make use of the data from the preceding step and create a buton.
A buton contains the EaselJS buton and a disabled image. We also register
a clickable buton:
// set up 1 building button based on the index and data
function setupBuildingButton(i) {
var b = buildings[i];
var button = _this['build'+b.name] =
game.helper.createButton('images/build-'
+ b.image + '-sprite.png', 286, 396);
button.x = b.x;
button.y = 16;
_this.buildingPanel.addChild(button);
button.on('click', function(){
game.buildingTypeToBePlaced = b.name;
_this.readyToPlaceBuilding();
});
// disabled image
var buttonDisabled = _this
['build' + b.name + 'Disabled'] = new cjs.Bitmap
('images/build-' + b.image + '-disabled.png');
buttonDisabled.x = button.x;
buttonDisabled.y = button.y;
buttonDisabled.visible = false;
_this.buildingPanel.addChild(buttonDisabled);
}
// loop the 3 buttons
for (var i=0; i<3; i++) {
setupBuildingButton(i);
}
9. Ater this, we add the two cancel butons and the buton that shows the
building panel:
//Cancel Button while choosing place to build
var cancelBuildBtn = this.cancelBuildBtn =
game.helper.createButton
('images/cancel-sprite.png', 128, 62);
cancelBuildBtn.x = 820;
cancelBuildBtn.y = 400;
this.addChild(cancelBuildBtn);
cancelBuildBtn.visible = false;