デフォルトから一本のゲームを完成させる1.オブジェクトを作る
今回から本腰を入れて一つ、ちょっとしたゲームと呼べるものを完成させたい。
以後、開発を楽にするための色々な技術を取り込んでいくけど、全部すぐに覚えたり理解しなければいけない、という訳ではない。
基本的には今までのやり方でも出来る。
ただ、それなりのゲームを作ろうとした時に、"作りやすくなる方法"というのは、ある。
今までを下敷きに、まずスコア以外、同じ要領(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);
気に入らないのは、こんな感じのがずらり…と3つ並んでいること。
妙にコードが長くなってしまう。
これは、後々のいじりにくさに繋がる。
よく見れば、要は同じ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で作成。