Categories
JavaScript tmlib.js Tutorial

05:「ゲームの処理を作ろう」 – JavaScriptライブラリ「tmlib.js」でシンプルなゲームを超簡単に作るチュートリアル

ハートをタッチしたら消えるようにしよう

サンプル

コードの解説

ハートをタッチ(or クリック)した時の処理を追加してみましょう。処理を作るヒントは、「シーンをタッチした時の処理」です。

/**
 * MainScene
 */
(function(ns) {

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはMainSceneです。",
                fontSize: 30,
                align: "left"
            }]
        }
    };

    var HEART_SIZE  = 64;
    var HEART_NUM   = 10;
    var HEART_PARAM = {
        fillStyle: "pink",
    };

    ns.MainScene = tm.createClass({
        superClass : tm.app.Scene,

        init : function() {
            this.superInit();

            // ラベル表示
            this.fromJSON(UI_DATA.LABELS);

            // 画面(シーンの描画箇所)をタッチした時の動作
            // this.addEventListener("pointingend", function(e) {
            //     // シーンの遷移
            //     e.app.replaceScene(ns.EndScene());
            // });

            // たくさんハートを作る
            for (var i = 0; i < HEART_NUM; ++i) {
                // 色をつくる
                HEART_PARAM.fillStyle = tm.graphics.Color.createStyleHSLA(Math.rand(0, 360), 95, 75, 0.8);

                // ハートを作る
                var heart = tm.app.HeartShape(
                        HEART_SIZE, 
                        HEART_SIZE, 
                        HEART_PARAM);
                // 表示位置
                heart.position.set(
                        Math.rand(HEART_SIZE/2, ns.SCREEN_WIDTH  - HEART_SIZE/2),
                        Math.rand(HEART_SIZE/2, ns.SCREEN_HEIGHT - HEART_SIZE/2));

                // ハートをタッチした時の処理を作る
                heart.interaction.enabled = true;           // ヒット判定フラグをON
                heart.interaction.boundingType = "circle";  // 円形のヒット判定を行う
                heart.addEventListener("pointingend", function() {
                    // 消す
                    this.remove();
                });

                // 表示する
                this.addChild(heart);
            }
        },
    });

})(game);

シーンをタッチした時の処理と同じく、addEventListener()関数を使います。違うのは、addEventListenerの左側に書いてある変数が、thisではなく、heartであることです。

                heart.addEventListener("pointingend", function() {
                    // 消す
                    this.remove();
                });

こうすることで、heartをタッチした時の処理を書くことができます。ハートを消すときは、remove()関数を使います。タッチしたときにremove()関数を読んであげると、タッチしたときにハートが消えるようになります。

制限時間を作ろう

サンプル

コードの解説

今回は追加する処理が多いですが、めげないでくださいね！

/**
 * MainScene
 */
(function(ns) {

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはMainSceneです。",
                fontSize: 30,
                align: "left"
            },{
                type: "Label",
                name: "limitTimeLabel",
                x: 200,
                y: 120,
                width: ns.SCREEN_WIDTH,
                fillStyle: "white",
                text: " ",
                fontSize: 40,
                align: "left"
            }]
        }
    };

    var HEART_SIZE  = 64;
    var HEART_NUM   = 10;
    var HEART_PARAM = {
        fillStyle: "pink",
    };

    var LIMIT_TIME = 300; // 10秒 x 30フレーム = 300

    ns.MainScene = tm.createClass({
        superClass : tm.app.Scene,

        init : function() {
            this.superInit();

            // ラベル表示
            this.fromJSON(UI_DATA.LABELS);

            // たくさんハートを作る
            for (var i = 0; i < HEART_NUM; ++i) {
                // 色をつくる
                HEART_PARAM.fillStyle = tm.graphics.Color.createStyleHSLA(Math.rand(0, 360), 95, 75, 0.8);

                // ハートを作る
                var heart = tm.app.HeartShape(
                        HEART_SIZE, 
                        HEART_SIZE, 
                        HEART_PARAM);
                // 表示位置
                heart.position.set(
                        Math.rand(HEART_SIZE/2, ns.SCREEN_WIDTH  - HEART_SIZE/2),
                        Math.rand(HEART_SIZE/2, ns.SCREEN_HEIGHT - HEART_SIZE/2));

                // ハートをタッチした時の処理を作る
                heart.interaction.enabled = true;           // ヒット判定フラグをON
                heart.interaction.boundingType = "circle";  // 円形のヒット判定を行う
                heart.addEventListener("pointingend", function() {
                    // 消す
                    this.remove();
                });

                // 表示する
                this.addChild(heart);
            }

            // 制限時間
            this.limitTime = LIMIT_TIME;
        },

        update: function (app) {
            // カウントダウンを行う
            --this.limitTime;

            // 制限時間を表示する
            this.limitTimeLabel.text = "残り時間 : " + ((this.limitTime / 30) |0);

            // 制限時間がなくなったらEndSceneに遷移する
            if (this.limitTime <= 0) {
                app.replaceScene(ns.EndScene());
            }
        },
    });

})(game);

複数の処理を追加したので、一つ一つ見ていきます。まず最初に、制限時間を表示するためのラベルを追加しました。以下のコードです。

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはMainSceneです。",
                fontSize: 30,
                align: "left"
            },{
                type: "Label",
                name: "limitTimeLabel",
                x: 200,
                y: 120,
                width: ns.SCREEN_WIDTH,
                fillStyle: "white",
                text: " ",
                fontSize: 40,
                align: "left"
            }]
        }
    };

次に、制限時間を設定するための変数が増えました。

    var LIMIT_TIME = 300; // 10秒 x 30フレーム = 300

ゲームの処理は一秒間に30回行われるので、それを見越して10秒を制限時間に設定したい場合は300となります。この300という値をゲームの実行毎にマイナス1していくことで、10秒経ったのかどうかが分かるようにします。
　
次に、update()という関数が増えました。update()関数は、ゲームの処理毎に呼ばれる関数です。そのため、一秒間に30回呼ばれることになります。

        update: function (app) {
            // カウントダウンを行う
            --this.limitTime;

            // 制限時間を表示する
            this.limitTimeLabel.text = "残り時間 : " + ((this.limitTime / 30) |0);

            // 制限時間がなくなったらEndSceneに遷移する
            if (this.limitTime <= 0) {
                app.replaceScene(ns.EndScene());
            }
        },

カウントダウンを行なって、0になれば勝手にEndSceneに遷移するように処理を作ります。画面に表示する制限時間の計算方法も見ておきます。

            // 制限時間を表示する
            this.limitTimeLabel.text = "残り時間 : " + ((this.limitTime / 30) |0);

this.limitTime変数は秒ではありません。ややこしいですが、一秒間に30回処理が行われる上で成り立っている300という数値です。30で割ることで現在の残り時間を取得することができます。”|0″というのはJavaScriptのテクニックの一つで、値を整数にします。割り算してるので小数点以下の数が出てしまいますが、”|0″のテクニックを使うことで整数になります。

全てハートを消したらゲームが終わるようにしよう

サンプル

コードの解説

ハートの数が今いくつなのか分かるように、「グループ」を作って管理するように変更しました。

/**
 * MainScene
 */
(function(ns) {

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはMainSceneです。",
                fontSize: 30,
                align: "left"
            },{
                type: "Label",
                name: "limitTimeLabel",
                x: 200,
                y: 120,
                width: ns.SCREEN_WIDTH,
                fillStyle: "white",
                text: " ",
                fontSize: 40,
                align: "left"
            }]
        }
    };

    var HEART_SIZE  = 64;
    var HEART_NUM   = 10;
    var HEART_PARAM = {
        fillStyle: "pink",
    };

    var LIMIT_TIME = 300; // 10秒 x 30フレーム = 300

    ns.MainScene = tm.createClass({
        superClass : tm.app.Scene,

        init : function() {
            this.superInit();

            // ラベル表示
            this.fromJSON(UI_DATA.LABELS);

            // たくさんハートを作る
            this.heartGroup = tm.app.CanvasElement();
            for (var i = 0; i < HEART_NUM; ++i) {
                // 色をつくる
                HEART_PARAM.fillStyle = tm.graphics.Color.createStyleHSLA(Math.rand(0, 360), 95, 75, 0.8);

                // ハートを作る
                var heart = tm.app.HeartShape(
                        HEART_SIZE, 
                        HEART_SIZE, 
                        HEART_PARAM);
                // 表示位置
                heart.position.set(
                        Math.rand(HEART_SIZE/2, ns.SCREEN_WIDTH  - HEART_SIZE/2),
                        Math.rand(HEART_SIZE/2, ns.SCREEN_HEIGHT - HEART_SIZE/2));

                // ハートをタッチした時の処理を作る
                heart.interaction.enabled = true;           // ヒット判定フラグをON
                heart.interaction.boundingType = "circle";  // 円形のヒット判定を行う
                heart.addEventListener("pointingend", function() {
                    // 消す
                    this.remove();
                });

                // 表示する
                this.heartGroup.addChild(heart);
            }
            this.addChild(this.heartGroup);

            // 制限時間
            this.limitTime = LIMIT_TIME;
        },

        update: function (app) {
            // カウントダウンを行う
            --this.limitTime;

            // 制限時間を表示する
            this.limitTimeLabel.text = "残り時間 : " + ((this.limitTime / 30) |0);

            // 制限時間がなくなったらEndSceneに遷移する
            if (this.limitTime <= 0) {
                app.replaceScene(ns.EndScene());
            }

            // ハートが全部なくなったらEndSceneに遷移する
            if (this.heartGroup.children.length <= 0) {
                app.replaceScene(ns.EndScene());
            }
        },
    });

})(game);

ハイライトの部分をみてみると、this.addChild()としてシーンに追加するのはグループのみになってますね。そのグループに対してheartをaddChild()するので、シーンから見るとheartは子でなく孫になります。一つグループをかませることにより、heartの数を簡単に取得することができます。

            // ハートが全部なくなったらEndSceneに遷移する
            if (this.heartGroup.children.length <= 0) {
                app.replaceScene(ns.EndScene());
            }

これで、EndSceneに遷移する条件は「ハートが全部無くなる」か、「制限時間が無くなる」場合の2つとなりました。

スコアを表示しよう

サンプル

コードの解説

/**
 * MainScene
 */
(function(ns) {

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはMainSceneです。",
                fontSize: 30,
                align: "left"
            },{
                type: "Label",
                name: "limitTimeLabel",
                x: 200,
                y: 120,
                width: ns.SCREEN_WIDTH,
                fillStyle: "white",
                text: " ",
                fontSize: 40,
                align: "left"
            }]
        }
    };

    var HEART_SIZE  = 64;
    var HEART_NUM   = 10;
    var HEART_PARAM = {
        fillStyle: "pink",
    };

    var LIMIT_TIME = 300; // 10秒 x 30フレーム = 300

    ns.MainScene = tm.createClass({
        superClass : tm.app.Scene,

        init : function() {
            this.superInit();

            // ラベル表示
            this.fromJSON(UI_DATA.LABELS);

            // たくさんハートを作る
            this.heartGroup = tm.app.CanvasElement();
            for (var i = 0; i < HEART_NUM; ++i) {
                // 色をつくる
                HEART_PARAM.fillStyle = tm.graphics.Color.createStyleHSLA(Math.rand(0, 360), 95, 75, 0.8);

                // ハートを作る
                var heart = tm.app.HeartShape(
                        HEART_SIZE, 
                        HEART_SIZE, 
                        HEART_PARAM);
                // 表示位置
                heart.position.set(
                        Math.rand(HEART_SIZE/2, ns.SCREEN_WIDTH  - HEART_SIZE/2),
                        Math.rand(HEART_SIZE/2, ns.SCREEN_HEIGHT - HEART_SIZE/2));

                // ハートをタッチした時の処理を作る
                heart.interaction.enabled = true;           // ヒット判定フラグをON
                heart.interaction.boundingType = "circle";  // 円形のヒット判定を行う
                heart.addEventListener("pointingend", function() {
                    // 消す
                    this.remove();
                });

                // 表示する
                this.heartGroup.addChild(heart);
            }
            this.addChild(this.heartGroup);

            // 制限時間
            this.limitTime = LIMIT_TIME;
        },

        update: function (app) {
            // カウントダウンを行う
            --this.limitTime;

            // 制限時間を表示する
            this.limitTimeLabel.text = "残り時間 : " + ((this.limitTime / 30) |0);

            // 制限時間がなくなったらEndSceneに遷移する
            if (this.limitTime <= 0) {
                app.replaceScene(ns.EndScene(0));
            }

            // ハートが全部なくなったらEndSceneに遷移する
            if (this.heartGroup.children.length <= 0) {
                app.replaceScene(ns.EndScene(this.limitTime));
            }
        },
    });

})(game);

EndSceneに現在残っているリミット時間を渡すようにしています。そして、EndSceneに渡したデータをどうするのかと言うと……。

/**
 * EndScene
 */
(function(ns) {

    // ラベルのリスト
    var UI_DATA = {
        LABELS: {
            children: [{
                type: "Label",
                name: "label",
                x: 40,
                y: 80,
                width: ns.SCREEN_WIDTH,
                fillStyle: "red",
                text: "ここはEndSceneです。",
                fontSize: 30,
                align: "left"
            }]
        }
    };

    var RESULT_PARAM = {
            score: 256,
            msg:      "【タッチゲーム制作チュートリアル】",
            hashtags: ["omatoro", "tmlibチュートリアル"],
            url:      "http://testcording.com",
            width:    ns.SCREEN_WIDTH,
            height:   ns.SCREEN_HEIGHT,
            related:  "tmlib.js Tutorial testcording",
    };

    ns.EndScene = tm.createClass({
        superClass : tm.app.ResultScene,

        init : function(leftTime) {
            // スコア計算
            RESULT_PARAM.score = (leftTime * 100) |0;

            // スコア
            this.superInit(RESULT_PARAM);

            // ラベル表示
            this.fromJSON(UI_DATA.LABELS);

            // // 画面(シーンの描画箇所)をタッチした時の動作
            // this.addEventListener("pointingend", function(e) {
            //     // シーンの遷移
            //     e.app.replaceScene(ns.TitleScene());
            // });
        },

        // Backボタンを押したらTitleSceneに戻る
        onnextscene: function (e) {
            e.target.app.replaceScene(ns.TitleScene());
        },
    });

})(game);

init関数に引数を記述しています。こうすると、クラスを呼び出した時にinit関数がデータを受け取ることができます。で、受け取ったデータはそのままスコアの計算に使っています。

            // スコア計算
            RESULT_PARAM.score = (leftTime * 100) |0;

これでスコアを作ることができました。ゲームの処理はこれで出来上がりです！お疲れ様でした！！次はゲームを彩ってくれる”音”を入れてみたいと思います。

もうちょっと詳しく解説

よく見ると……

        // Backボタンを押したらTitleSceneに戻る
        onnextscene: function (e) {
            e.target.app.replaceScene(ns.TitleScene());
        },

この処理も新たに追加していますね。これはコメントの通り、Backボタンを押した時の動作を書くための処理です。今まで画面をタッチしたらTitleSceneに戻っていましたが、Backボタンを押した時のみTitleSceneに行くよう変更しています。

Leave a Reply

Your email address will not be published. Required fields are marked *