デフォルトのmain.jsをいじる９,当たり判定で効果音とスコア加算
前回までで、当たり判定により消滅するようになった。
そこで今度は、.enemyを消した時に"ドカ"という効果音を鳴らすようにしたい。
http://testcording.com/?p=1367
このサイトが詳しいけど、要は
tm.preload(function() {
tm.sound.SoundManager.add("hit_se", "hit_se.wav");
});と書くと、音ファイルを使えるように読み込め、
tm.sound.SoundManager.get("hit_se").play();で使える、という事だ(画像を直に使うのとほぼ同じ)
読み込みの記述は例によって初めの方、ASSETSの下のところへ置き、ヒット効果音はvisibleで消した所で使おう。
if(this.star.isHitElement(this.enemy) && this.enemy.visible == true){
tm.sound.SoundManager.get("hit_se").play(); // #追加
this.enemy.visible = false;
}
効果音は適当に作って、という訳にはいかないので、
ザ・マッチメイカァズ2nd 【フリー効果音素材】
の効果音をダウンロードして使わせて頂こう。
当たったぽい効果音を探して、hit_seにリネームする(.wav形式のものでないとだめ)
そして画像と同じく、index.htmlと同じフォルダに置く。
上手くいったなら、効果音が鳴って消えたと思う。
ついでなので、スコア表示もしてしまおう。
これは実は過去記事、デフォルトのmain.jsをいじる４,シーンを使わずに画像表示してみる - tmlibの練習ブログでもチラッと見ているのだけど、"Label"で行う。
tmlib.jsでシューティングゲームを作るチュートリアル その10 スコアを表示する « なんかもう実験場
ここがとても分かりやすい。
要は、Labelというのは付箋で、文字を書ける。
書いたLabelを画面に貼り付ける、といった感じ。
画像ならSprite、図形ならShape、そして文字ならLable…と。
まずLabelに書き込む物、今回はスコアを作ろう。
tm.util.DataManager.set("userData", {
score: 0
});を、またもASSETSの下の所に置く。
効果音がtm.sound.SoundManagerに収められるのと同じで、今回はスコアにまつわるデータを、tm.util.DataManagerに格納しておくと。
そして画像なんかと同じく、"格納したら取り出せる"。
userData = tm.util.DataManager.get("userData");で取り出し、
alert(userData.score);
とか
userData.score += 10;
という風に、アクセスを行えるようになる。
これを使い、ラベルへ書き込む時に取得したり、星を消した時にスコア加算する。
Labelは
var titleLabel = tm.app.Label();
基本的にはこう。ただこのままではどこに表示するとか、何の文字を書くかなどが無い、のっぺらぼうなので
(引用) var titleLabel = tm.app.Label(); titleLabel.position.set(app.width/2, app.height/2); titleLabel.text = "Title"; // ラベルの文字列 titleLabel.width = app.width; // フォントの横幅。文字が潰れる場合は横幅を合わせればOK titleLabel.align = "center"; // 中央揃え。topやendで右揃え、左揃えに出来る。 titleLabel.fontSize = 64; // フォントのサイズ this.addChild(titleLabel);
と、設定する(設定する事が多くて大変そうに見えるが)
this.addChild(titleLabel);
がある事からも分かる通り、これは.starや.enemyを宣言している所に並べて書けばＯＫ。
するとthis.という表記をtitleLabelの前に付ける必要が出てくる。
また、今回はLableにスコアを書き込みたいので、さきほどのスコア取得の出番だ。
最終的に
// (this.starへ代入する処理とか)
//スコアの取得
userData = tm.util.DataManager.get("userData");
//ラベルで表示
this.scoreLabel = tm.app.Label();
this.scoreLabel.position.set(SCREEN_WIDTH, 40);
this.scoreLabel.text = "score : " + userData.score;
this.scoreLabel.width = tm.app.width;
this.scoreLabel.align = "end";
this.scoreLabel.fontSize = 32;
this.addChild(this.scoreLabel);という形になった(右上に表示したかったので、位置を変えている)
あとはスコア増のタイミング。星にぶつかって消した時がいいだろう。
if(this.star.isHitElement(this.enemy) && this.enemy.visible == true){
tm.sound.SoundManager.get("hit_se").play();
this.enemy.visible = false;
// スコアを更新
userData.score += 100; // #追加
this.scoreLabel.text = "score : " + userData.score; // #追加
}
星にぶつかると効果音が鳴り、１００点が手に入る。
という処理ができた。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_16.txt
効果音が入ったので、ここまでのファイル(.zip)
http://spchinese.s601.xrea.com/tmlib_text/tmlib_up_2013_11_16.zip
＊バージョンは、tmlib.js 0.2.0で作成。
