tmlibの練習ブログ

自分流にtmlibを触っていきます。分かったことを解説。入門用になれば…?

デフォルトのmain.jsをいじる7,当たり判定追加

前回から更にゲームぽく、"当たり判定"の処理を追加してみようと思う。
細かく複雑に動き回る敵を…と夢が膨らみがちだけど、まず最小限、".starが何かに触れた時に、alertを出す"からやるのが現実的だ。


単純に考えて、.starと同じ感じで、addChildで付け加えれば、もう一体表示させられる事ができるだろう。

//#こんな感じで
this.star = tm.app.Sprite("CAT"); //(ASEETS名、CATに変えた)
this.addChild(this.star);

しかしテストの表示でわざわざ画像を用意するのも面倒くさい、ここはmain.jsが初めにしていた通り、星型にしてみよう。

this.enemy = tm.app.StarShape(64,64); // #追加
this.addChild(this.enemy);    // #追加
this.star = tm.app.Sprite("CAT");
this.addChild(this.star);

こうだ。


このままindex.htmlを読み込んでも…星が画面端にチラッと見えてるだけなので、位置(座標)を指定する。

// マウス位置 or タッチ位置に移動
this.star.x = p.x;
this.star.y = p.y;
this.enemy.x = 300;// #追加
this.enemy.y = 300;// #追加

star(プレイキャラクター)はマウスの位置がそのまま座標だから = p.x だけど、固定位置ならこんな感じだろう。
 
f:id:superchineseland:20131114144224j:plain

表示された。


さて、この星形にプレイキャラが触ってる…という判定をしたい。
.starに入っている"Sprite"を[Documents]で調べてもいいし、Google検索で「tmlib 当たり判定」でもいいけど、isHitElementという物に行き渡るだろう。
(tmlib.jsでシューティングゲームを作るチュートリアル その8 自機と敵の当たり判定 « なんかもう実験場 とか)


当たる物体.isHitElement(当たられる物体)
という風に書く。


今回なら
this.star.isHitElement(this.enemy)
となる。
([Documents]風に難しく書けば、star(Sprite)の中にあるisHitElementにenemyを放り込んで、ぶつかってるかを調べる)


ここでは"キーを押しているか?"・"画面タッチしているか?"と同じく、ぶつかっているか? という条件を聞いているもの(判定をしている)なので、if()の中に入れてあげよう。

// # alert("hit!")だと、多分当たりまくって止まらなくなると思う
// if(this.star.isHitElement(this.enemy) == true)でも可能。
// == trueは省略できる
if(this.star.isHitElement(this.enemy)){console.log("hit!")} 

isHitElementは、これだけでstarやenemyの座標や大きさを計算して、自動的に当たってるかを計算してくれる優れもの。
(*ちなみに画像の余白の部分も大きさに含んでいるので、余白が大きいとちょっと不自然になるかも)


本来で言うと、
プレイヤーキャラのXとYは星の内側(左~右端から上~下端…)に存在しているか、という長い処理を書かないといけないのだけど、tmlibに用意されてるので一発で済むのだ。


ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_14.txt
*バージョンは、tmlib.js 0.2.0で作成。


次回:デフォルトのmain.jsをいじる8,当たり判定で敵消滅+Documentsの見方。 - tmlibの練習ブログ