デジタル時計の作成を通して、CreateJSの理解を深めましょう。
テキストの表示
デジタル時計の作り方ですが、createjs.Textクラスを使います。見栄えはさておき、現在時刻を表示させてみましょう。
ポイントとしては、createjs.Textインスタンスは一度だけ作成し、そのインスタンスのtextプロパティーを変更することです。詳しくはテキストの解説の「テキストの文言を変更する」段落を参照ください。
// Text インスタンスを作成
var label = new createjs.Text("", "80px sans-serif", "red");
// Text インスタンスは一度だけしか stage に追加しない
stage.addChild(label);
// 時間経過のイベント
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
// (省略)
// Text インスタンスの文字列を更新
label.text = ◯◯◯;
// (省略)
}
時・分・秒の文字列を結合したい場合は+演算子を使って記述します。コロン（:）は文字列として表示させたい場合は、ダブルクオテーションを使って":"と記述します。
// 現在時間を取得
var now = new Date();
// 時間の数値を取得
var h = now.getHours(); // 時(0〜23)
var m = now.getMinutes(); // 分(0〜59)
var s = now.getSeconds(); // 秒(0〜59)
// 表示文言を作成
var time = h + ":" + m + ":" + s;
// Text インスタンスの文字列を更新
label.text = time;
ありがちな失敗例も紹介しましょう。tickイベントでcreatejs.Textインスタンスを追加し続けると、残像効果のような表示になってしまいます。文言を変化させたいときはtextプロパティーを更新するようにしましょう。
失敗例のコード
// 時間経過のイベント
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
// (省略)
// Text インスタンスを作成
var label = new createjs.Text(◯◯◯, "80px sans-serif", "red");
stage.addChild(label);
// (省略)
}
