Sprites and Sprite Sheet Animations - Beginning HTML5 Games with CreateJS - page 118

"3":[3],
"4":[4],
"5":[5],
"6":[6],
"7":[7],
"8":[8],
"9":[9]
}
}
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
var img = new Image();
img.src = "letters.png";
img.onload = function () {
addScore();
}
}
function addScore() {
scoreContainer = new createjs.Container()
scoreContainer.x = scoreContainer.y = 30;
spritesheet = new createjs.SpriteSheet(data);
scoreTxt = new createjs.BitmapText(score.toString(), spritesheet);
scoreContainer.addChild(scoreTxt);
scoreContainer.updateText = function (text) {
this.removeChildAt(0);
scoreTxt = new createjs.BitmapText(text, spritesheet);
scoreTxt.letterSpacing = 6;
this.addChild(scoreTxt);
}
stage.addChild(scoreContainer);
setInterval(updateScore, 100);
}
function updateScore() {
score += 1;
scoreContainer.updateText(score.toString());
}
At the time of writing this topic, BitmapText does not contain a public update method, so a new one needs to be
created if the message needs to updated. In the case of a scoreboard, it absolutely needs to update on a regular basis.
Wrapping the text object in a container makes it easy to remove its only child and add a new one when needed. This is
done by assigning it an update method. This method, udpateText , accepts one parameter, which is the text you want
to display.
The first thing this method does is remove the current text object, which is the only child and located at index 0.
A new one is immediately created to replace it and is given the text value passed into the method. The letter spacing
can also be adjusted to give you the desired spacing between letters.
A simple interval is then created to demonstrate the update process. Figure 6-8 demonstrates the bitmap text for
a scoreboard after letting the interval run for a while.