デフォルトから一本のゲームを完成させる１.オブジェクトを作る
今回から本腰を入れて一つ、ちょっとしたゲームと呼べるものを完成させたい。
以後、開発を楽にするための色々な技術を取り込んでいくけど、全部すぐに覚えたり理解しなければいけない、という訳ではない。
基本的には今までのやり方でも出来る。
ただ、それなりのゲームを作ろうとした時に、"作りやすくなる方法"というのは、ある。
今までを下敷きに、まずスコア以外、同じ要領(Lable)で、タイム・スピードのラベルを用意した所から始める。
(各自で追加してみよう)
// タイムのラベル this.timeLabel = tm.app.Label(); this.timeLabel.position.set(240, 40); this.timeLabel.text = "time : " + userData.time; this.timeLabel.width = tm.app.width; this.timeLabel.align = "end"; this.timeLabel.fontSize = 32; this.addChild(this.timeLabel);
気に入らないのは、こんな感じのがずらり…と３つ並んでいること。
妙にコードが長くなってしまう。
これは、後々のいじりにくさに繋がる。
よく見れば、要は同じtm.app.Label();を使って、設定する場所やテキストが違ってるだけなのだ。
なんとか共通化できないか?
その為にはまず、"オブジェクト"を作ってみる。
var l_obj = {
x : SCREEN_WIDTH,
y : 30,
text : "score : " + userData.score,
align : "end"
}こんな感じ。
これは一見目新しく見えるけど、要は今まで
// シーンの遷移
var loadingScene = tm.app.LoadingScene({
assets: ASSETS,
nextScene: MainScene,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT
});として、データを設定してきたのと同じことだ。
今まで機会が無かったけど、オブジェクトは自分で要素名を決めていいし、普通に文字や数値も入れられる。
{ }内で要素を設定すれば、"オブジェクト"は作れる(オブジェクトリテラル、という)
そしてl_objに代入している、という一文。
(＊"オブジェクト"と"クラス"はどう違う? という疑問はひとまず置いておこう…、それにそんなに違いはない)
こうして自分で作ったオブジェクトを利用して、ラベルの設定をしてみると
// #l_objを使って設定
var l_obj = {
x : SCREEN_WIDTH,
y : 40,
text : "score : " + userData.score,
width : tm.app.width,
align : "end",
fontSize : 32
}
// スコアのラベル
this.scoreLabel = tm.app.Label();
this.scoreLabel.position.set(l_obj.x, l_obj.y);
this.scoreLabel.text = l_obj.text;
this.scoreLabel.width = l_obj.width;
this.scoreLabel.align = l_obj.align;
this.scoreLabel.fontSize = l_obj.fontSize;
this.addChild(this.scoreLabel);こんな形になる。
また、以後のタイム・スピードのラベル設定では同じl_objを使い、
違う要素だけ変更する、という事もできる。
l_obj.x = 240 // #スコアラベルと違う、xだけ再設定 l_obj.text = "time : " + userData.time // #スコアラベルと違うテキストだけ再設定 // タイムのラベル this.timeLabel = tm.app.Label(); this.timeLabel.position.set(l_obj.x, l_obj.y); this.timeLabel.text = l_obj.text; this.timeLabel.width = l_obj.width; this.timeLabel.align = l_obj.align; this.timeLabel.fontSize = l_obj.fontSize; this.addChild(this.timeLabel);
むしろ前より長くなってるじゃん、とツッコミたくなるかも知れない。
ここからグングン短くしていく。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_24.txt
＊バージョンは、tmlib.js 0.2.0で作成。
