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が準備してくれているおかげですね。
