Game Development Reference
In-Depth Information
For this function to work, it needs to be called. Revisit the
initGame
function and one final function call at the end.
function initGame() {
buildTitle();
buildDiceTray();
buildScoreCard();
buildScoreboard();
revealGame();
}
Revealing the Title and Dice Tray
The first areas of the game that are animated in are the title and dice tray. Listing 7-18 shows this being accomplished
with two functions, one for each section.
Listing 7-18.
The revealTitle and revealDiceTray Functions
function revealTitle() {
createjs.Tween.get(title).to({alpha:1}, 400);
}
function revealDiceTray() {
var i, die, delay, btn, rollMessage;
createjs.Tween.get(diceTray).to({alpha:1}, 500);
for (i = 0; i < NUM_DICE; i++) {
die = diceTray.getChildByName('die' + i);
die.scaleX = die.scaleY = 0;
die.visible = true;
delay = (i * 150) + 500;
createjs.Tween.get(die).wait(delay)
.to({scaleX:1, scaleY:1}, 1000, createjs.Ease.elasticOut);
}
btn = diceTray.getChildByName('rollBtn');
btn.scaleX = btn.scaleY = 0;
btn.visible = true;
delay += 150;
createjs.Tween.get(btn).wait(delay)
.to({scaleX:1, scaleY:1}, 1000, createjs.Ease.elasticOut);
rollMsg = diceTray.getChildByName('rollMsg');
createjs.Tween.get(rollMsg).wait(delay).to({alpha:1},1000);
}
The title shouldn't need much explanation. A simple fade is accomplished using a tween. Revealing the dice tray
is a bit more exciting. At first, only the tray's background is revealed as the entire container is faded in using a tween.
Next, each die is handled.
A loop is created to access each die in the tray. Using
getChildByName
and the loop iterator value, each die is
found. The
scaleX
and
scaleY
of each die is set to 0, which will essentially give it a size of nothing, and the visibility
is then turned back on. By gradually incrementing the
delay
local variable, an offset to each die animation is
accomplished. This value is used in the tween call, which scales each die back up with a bounce effect. Using the same
approach, the roll button follows suit, and bounces in line with the dice. Finally, the roll message sprite is faded in,
and the dice tray is then fully revealed. Figure
7-11
shows the dice tray revealing, mid animation.
