デフォルトの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 だけど、固定位置ならこんな感じだろう。
表示された。
さて、この星形にプレイキャラが触ってる…という判定をしたい。
.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で作成。