Game Development Reference
In-Depth Information
Some variables that will be used for display objects and loops are first created. Then some position values are set
that will be used for various placements during the function. The dice tray container is then created, set to the game
variable
diceTray
,
and positioned using some of the game constants that were declared earlier.
The background image for the tray is created as a sprite and added as the tray container's first child. A simple
“roll” message graphic is also added and positioned to the container. Next, the dice are created (see Listing 7-11).
Listing 7-11.
The buildDiceTray Function Continued: Creating the Dice
...
//dice
for (i = 0; i < NUM_DICE; i++) {
die = new createjs.Sprite(spritesheet, 'die');
die.name = 'die' + i;
die.paused = true;
// die.visible = false;
die.mouseEnabled = false;
die.regX = die.getBounds().width / 2;
die.regY = die.getBounds().height / 2;
die.x = xPos;
die.y = yPos;
die.hold = false;
die.on('click', holdDie);
xPos += hGap;
diceTray.addChild(die);
}
...
With a loop, the dice are each created using the animation
die
that is declared in the sprite sheet data. Figure
7-4
shows the six frames used for this sprite.
Figure 7-4.
The six frames that make up a die sprite
Each die is given a sequential name so it can be easily accessed later when evaluating their values. The dice
are also set to
paused
so they don't start spinning as soon as they are created.
Each die will also be initially
hidden by setting its visible property to false
. For now, this line will be commented out so the dice can be
seen while positioning. Their
mouseEnabled
property is set to false to prevent them from being interactive before a
player makes an actual roll.
The registration points for the dice sprites are set to the center. This is so you can create an interesting bounce
effect when you initially reveal them at the start of a game. Using
xPos
and
yPos
values, they are placed horizontally
across the tray (see Figure
7-5
).
Figure 7-5.
Five die sprites added to the dice tray container
