たくさんのハートを表示してみよう

サンプル

コードの解説

ループを使ってまとめてハートを作ってみます。

/**
 * 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;

    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) {
                // ハートを作る
                var heart = tm.app.HeartShape(HEART_SIZE, HEART_SIZE);
                // 表示位置
                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));
                // 表示する
                this.addChild(heart);
            }
        },
    });

})(game);

ハートの位置は、画面の端から端までのランダムな場所です。Math.rand()という関数を使うことで、ランダムな数を取得することができます。一つ気をつけてほしい箇所があります。0からns.SCREEN_WIDTHまでのランダム値になっていないですね。感覚的には以下のようなコードになりそうです。

                // 表示位置
                heart.position.set(
                        Math.rand(0, ns.SCREEN_WIDTH),
                        Math.rand(0, ns.SCREEN_HEIGHT));

しかし、上記のコードだとハートが画面端に見切れて表示されてしまいます。それを防ぐために、ハートの半分サイズ座標を狭めてランダム値を取得しています。

ハートの色を変えてみよう

サンプル

コードの解説

ハートの色もランダムになるようにしてみましょう。

/**
 * 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));
                // 表示する
                this.addChild(heart);
            }
        },
    });

})(game);

RGBA値で完全にランダムな値にしてしまうと、真っ黒なハートやどす黒いハートばかり出てしまうのでHSLAという表記法を利用しています。HSLAについては特に解説はしませんので、別途調べてみてください。