Cocos Creatorで時計アプリを作る

今回は、Cocos Creatorを使って時計アプリを作ってみました。
使用したスクリプトはTypeScriptです。本編のブログからはサンプルプログラムをGitからダウンロード可能です。

今回書いたプログラムはこれだけで、簡単な時計アプリを作ってみました。

const {ccclass, property} = cc._decorator;

@ccclass
export default class Clock extends cc.Component {
    private hoursToDeg: number = -360 / 12;
    private minutesToDeg: number = -360 / 60;
    private secondsToDeg: number = -360 / 60;

    @property(cc.Label)
    label: cc.Label = null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    update (dt) {
        let now_dt: Date = new Date();      // 現在の日時を取得
        let children = this.node.children;  // Clock_BG（Node Treeパネル上）の下の子ノードを取得する

        for (let i = 0; i < children.length; ++i) {
            children[i].zIndex = -3;
            if (children[i].name == "r_tile16x16") {
                // 長針のノードの場合の処理（分）
                // 360度を60分割した角度（要は1分毎の角度）を現在の分に掛けて現在の分の角度を計算
                children[i].angle = now_dt.getMinutes() * this.minutesToDeg;
            } else if (children[i].name == "g_tile16x16") {
                // 短針のノードの場合の処理（時）
                // 現在の分により、短針の角度を徐々に次の時間まで動くよう微調整角度を計算
                let addVal: number = ( now_dt.getMinutes() / 12 ) * 6;
                // 現在の時に合わせて角度を計算。１時間あたり-30度づつ角度が変わるが、addValの数値を減算して、角度を微調整する
                // 例えば、現在の時刻が30分だとすると、30 / 12 * 6 = 15、現在の時が6時の場合、
                // 6 * -30（１時間毎に進む角度）= -180度
                // -180 - 15 = -195度が短針の角度（6時と7時の中間あたりに短針がくる）になる
                children[i].angle = ( now_dt.getHours() * this.hoursToDeg ) - addVal;
            } else if (children[i].name == "b_tile16x16") {
                // 秒針のノードの場合の処理
                // 360度を60分割した角度（要は1秒毎の角度）を現在の秒に掛けて現在の秒の角度を計算
                children[i].angle =now_dt.getSeconds() * this.secondsToDeg;
            }
        }
    }
}

できたアプリはこちら。
FireFoxで実行したところです。

本編の記事は、以下のブログをご覧ください。