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

2. We are going to create several butons. EaselJS provides a ButtonHelper funcion
that makes use of the SpriteSheet class. Inside our helper.js file, we add the
following createButton funcion. Having the common code placed at one place
and reusing it would be beter than wriing it again and again inside the main logic:
game.helper.createButton =
function(spriteImage, width, height) {
var data = {
images: [spriteImage],
frames: {width:width, height:height},
};
var spritesheet = new cjs.SpriteSheet(data);
var button = new cjs.Sprite(spritesheet, 1);
var helper = new cjs.ButtonHelper(button, 0, 1, 2);
return button;
};
3. Let's move to the game.js ile. To make use of the buton's mouse hover efect, we
need to enable mouse over. This is disabled by default because not every CreateJS
project needs the mouse hover event and this event could be computaionally
expensive to generate:
game.stage.enableMouseOver();
4. The building-choosing panel is part of the user interface. We will set up the panel
inside UILayer :
function UILayer() {
...
// existing code goes here.
// we need a flag to know whether we are creating new building.
By default it is false;
game.isCreatingNewBuilding = false;
this.setupBuildingPanel();
}
5. Now we come to the major logic of this task. We deine the following funcion to
set up the building panel user interface. We will split this long funcion into steps.
The skeleton of this funcion is given in the following code snippet:
UILayer.prototype.setupBuildingPanel = function() {
// Building Panels
// building buttons data
// three building buttons