Categories
JavaScript tmlib.js Tutorial

Ex:「音をつけよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなゲームを超簡単に作るチュートリアル

BGMを鳴らしてみよう

サンプル

コードの解説

まず、音楽を入れるディレクトリを作っておきます。jsフォルダと同階層に「rsc」という名前のディレクトリを用意しています。音のファイルも用意しています。では音を読み込んでみましょう。音を読み込む用のコードも別のファイルにしておきます。名前はresource.jsです。

/**
 * リソースの読み込み
 */
tm.preload(function() {

	// 音
	tm.sound.SoundManager.add("bgm", "http://rawgithub.com/omatoro/tmlib.js_tutorial_TouchGame/master/EX_%E9%9F%B3%E3%82%92%E9%B3%B4%E3%82%89%E3%81%9D%E3%81%86/01_BGM/rsc/Comical01_Koya.mp3");

});

新しくresource.jsというファイルを用意しました。tm.preload()関数内に読み込みたいファイルを記述します。次は読み込んだデータの呼び出し方です。

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

            // BGM再生
            this.bgm = tm.sound.SoundManager.get("bgm");
            this.bgm.loop = true;
            this.bgm.play();
        },

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

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

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

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

})(game);

tm.sound.SoundManager.get()関数を使うことで、読み込んだデータを取り出すことができます。取り出したデータをthis.bgm変数に入れ込み、ループして鳴るように設定しています。play()関数を呼べば音がなります。音を出すにはplay()関数を呼ぶだけです。簡単ですね。EndSceneに遷移する前に音を止めています。

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

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

EndSceneではまた別の音を鳴らしたい！と思ったら、同じように追加してみてくださいね。

SE(サウンドエフェクト)を鳴らしてみよう

サンプル

コードの解説

SE用の音楽データを追加し、resource.jsファイルを書き換えます。

/**
 * リソースの読み込み
 */
tm.preload(function() {
	// 音
	tm.sound.SoundManager.add("bgm", "http://rawgithub.com/omatoro/tmlib.js_tutorial_TouchGame/master/EX_%E9%9F%B3%E3%82%92%E9%B3%B4%E3%82%89%E3%81%9D%E3%81%86/02_SE/rsc/Comical01_Koya.mp3");
	tm.sound.SoundManager.add("se",  "http://rawgithub.com/omatoro/tmlib.js_tutorial_TouchGame/master/EX_%E9%9F%B3%E3%82%92%E9%B3%B4%E3%82%89%E3%81%9D%E3%81%86/02_SE/rsc/%5BSystem%5DCursor03_panop.ogg");
});

次は、ハートを消した時に音がなるようにMainSceneを修正してみましょう。

/**
 * 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() {
                    // 音を出す
                    tm.sound.SoundManager.get("se").clone().play();
                    // 消す
                    this.remove();
                });

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

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

            // BGM再生
            this.bgm = tm.sound.SoundManager.get("bgm");
            this.bgm.loop = true;
            this.bgm.play();
        },

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

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

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

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

})(game);

これで音が鳴るようになりました。本当はもっと大変なんですけど、tmlib.jsが準備してくれているおかげですね。

1 reply on “Ex:「音をつけよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなゲームを超簡単に作るチュートリアル”

Leave a Reply

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