デフォルトから一本のゲームを完成させる4.オブジェクト指定子で関係を明確にしてみる
デフォルトから一本のゲームを完成させる3.オブジェクトをreturnで返す。 - tmlibの練習ブログで作ったmakeLableはグローバル関数という事で、どこからでも呼び出せてしまう。
変数にvarを付けるのと同じで、使える範囲は狭いほど、余計な事を考えなくて済む。
具体的には、MainSceneの中だけで使えれば、事足りるだろう…。
そう考えた時に、ラベルの設定の為に作ったオブジェクトl_objが参考になる。
// スコアのラベル l_obj = { x : SCREEN_WIDTH, y : 40, text : "score : " + userData.score, // ...省略 }
これらの中の要素を呼び出す時には、l_obj.text と書いてアクセスする。
l_objの中のtextである、と関係性がとても明確だ。
今回のmakeLableもMainSceneの中でしか使わないのだから、同じ様に設定すればいいだろう…。
という訳で、以下の様に移してみる。
tm.define("MainScene", { superClass: "tm.app.Scene", init: function() { // ...省略 }, update: function(app) { // ...省略 }, // MainSceneの内側に移動 makeLabel : function(l_obj){ var label = tm.app.Label(); label.position.set(l_obj.x , l_obj.y); label.text = l_obj.text; label.align = l_obj.align; label.width = l_obj.width; label.fontSize = l_obj.fontSize; this.addChild(label); // 引数thatからthisに return label; } });
要はMainSceneも、l_objも
"要素名 : 登録するデータ(今回は関数)"
で新しくセットできるのだ。
(ちなみに : は、"オブジェクト指定子"という。)
ただ、superClass: "tm.app.Scene" と書いてある事で、update と init に特別な役割が割り振られているだけである。
付け足す分にはなんの問題もない。
そしてグローバル関数だった時は引数としてthisを渡し、thatとしていたけど、そのthisというのはまさにtm.app.Sceneの事だった。
そのまま関数内で this と書けば tm.app.Scene を指せるようになって、不要になった訳である。
(*余談だがこのthisの指すものがころころ変わってしまって分かりにくいのは、JavaScriptの短所と言われる部分である…)
そして関数を利用する書き方も
this.scoreLabel = makeLabel(this , l_obj); // 旧
から
this.scoreLabel = this.makeLabel(l_obj); // 新
こうなる。
ただmakeLabelと書いただけではグローバル関数と区別が付かないので、自分の関数(.this)であると書いて、意味を通さないといけない。
短くなってスッキリしたし、関係も分かりやすくなったと思う。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_28.txt
*バージョンは、tmlib.js 0.2.0で作成。