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

Objective complete - mini debriefing
We have a data file to define the basic data of buildings. The class name is used in order
to refer to the sprite view. Every building has a minimum number of required coins and
populaion to be created. The power supply building generates power to increase the
populaion capacity.
The following figure shows the user interface flow of the building panel:
Button helper
There is no Button class in the CreateJS library. The buton is actually a combinaion
of a three-frame sprite image and the mouseover and mousedown events. The buton
is an EaselJS SpriteSheet class that takes the image path and the frame dimension as
parameters. The buton helper then converts a three-frame spritesheet into a buton
with mouse interacivity. It automaically adds the rollover and mousedown events to
the created sprite. The following code is a recap of the code we added to the logic:
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);