tmlibの練習ブログ

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

デフォルトから一本のゲームを完成させる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で作成。