tmlibの練習ブログ

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

デフォルトのmain.jsをいじる8,当たり判定で敵消滅+Documentsの見方。

前回、console.logで当たり判定を確かめたところを、一気にゲームぽくしよう。
まず、[Documents]でStarShapeの項目を探すと、"消滅フラグ"―visibleというのを見つけられる。
これを使えば"ヒットした時に消滅"という事も簡単にできる。

…しかしここでちょっと寄り道して、もう一歩踏み込んだ[Documents]の見方を学んでみよう。

(慣れない内は余計な所が気になって、なかなか必要な要素を見つけられないだろうし)


f:id:superchineseland:20131115113337j:plain


まずvisible:Boolean となっているが、このBoolean…というのは出し入れできる"種類"の事。


Booleanという種類なら、true(本当)かfalse(嘘)だけを持つ。
visibleは表示フラグ…という事なので、trueならそのまま表示し、falseなら消える、という事になるだろう。


これがalpha(透明値)ならNumberで、0.1~1.0…みたいな数値による段階になるし、Stringは文字での指定をする。
color = "white"とか、"red"を指定してその色になる、みたいな感じ。


f:id:superchineseland:20131115113348j:plain


もちろん、getKey("z")のように、まず文字を渡してチェック、返ってくるのはBoolean(true=押されている、false=押されていない)か、という形もある。
(そもそも大体の属性が、Object(中に色々入っている)で、結局、一発で分かるケースは少ないけど…)


f:id:superchineseland:20131115113401j:plain

それからずっと端に目を移すと、tm.display.CanvasElementという文字が見える。
これは、そこに記された tm.display.CanvasElement が"元々の属性の持ち主ですよ"、という事だ。


つまり、StarShapeの中でまず
superClass:tm.display.Shape
でShapeのコードを流用しているのだが、Shapeもまたその中で
superClass: tm.display.CanvasElement
としてるものだから、流用に継ぐ流用…となっている。


おかげでこれだけ膨大な属性が得られる訳だけど、元々の出自はどこなのか、分かりやすいように表示している。


f:id:superchineseland:20131115113417j:plain


図に示すとまるで階層のようになっていて、それを表示しているのが[HIERARCHY]となる。
.starに入れているSpriteになると、こちらは[SUBCLASSES]というものも表示されている。
これは自分発、自分を流用(継承)した相手を示している("親子の関係"という。流用、持ち出した方が子)


f:id:superchineseland:20131115113427j:plain


ちなみに調べている物体の名前(tm.display.Spriteとか。クラスという)でページを検索すると引っ掛かる属性が"そのクラスで追加された属性(親からではなく)"という事だ。
何を流用して、何の属性を加えたのか。
つまり、何をしたくてどんな拡張をしたのか。
関係性の中でそのクラスの、役割が浮き上がる。


以上、余談終わり。


…という訳で、console.logで確認してた部分を

if(this.star.isHitElement(this.enemy) && this.enemy.visible == true){ //チェック追加
    this.enemy.visible = false; // 追加
}

と書き換えよう。これで星に当たると、消えるはず。
(マウスの位置的に、初めから重なって即消える、ってなりがちなので注意)


this.enemy.visible == true
のチェックは無くても動くけど、一回消した後も毎回"消す"という処理をしているのは、意外にゲームが重くなりがちなので、まだ消してない時のみ消すように、チェックをしている。
(逆に言えば、毎回消すよりも、毎回消えてるかどうかを調べる方が負荷は掛からない…とも言える。)


次回はスコア表示と効果音を付ける。


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


次回:デフォルトのmain.jsをいじる9,当たり判定で効果音とスコア加算 - tmlibの練習ブログ