デフォルトのmain.jsをいじる５,タイトル画面追加
今回はゲームに付きものの、"タイトル画面"を設けたいと思う。
前回でシーンというもの(の内側)を意識した。
タイトル画面は"TitleScene"として、ある程度の処理が既に用意されている。それを使うのだ。
http://testcording.com/?p=1748
…と言っても、このサイトが実に分かりやすくて、それで事足りてしまうのだけど…
肝は３つ、
(引用) superClass : "tm.app.TitleScene",
この記述をすると、"そのシーンを改造して使うよ"という事になる(継承、という)
言わば雛形を使うということで、タイトル文字なんかに関しては、指定の変数に文字を入れるだけで表示されるようになる。
TitleSceneの場合は
(引用)
init : function() {
this.superInit({
title : "避けゲー制作チュートリアル",
width : SCREEN_WIDTH,
height : SCREEN_HEIGHT
});
},が文字の表示部分であり、
(引用)
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(MainScene());
});によって、初めに"マウスを押したら(もしくはスマホでの画面タッチ)移動"というイベントを登録しておく。
(addEventListenerとして登録したものは、今手元にあるmain.jsの.getKey("z")のように、update :の中で毎回実行されているのだろうか…?)
今回はloadingSceneで、画像(ASSETS)を下ごしらえしてるので、指定するのはe.app.replaceScene(MainScene());ではなく、
var loadingScene = tm.app.LoadingScene({
assets: ASSETS,
nextScene: MainScene,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT
});
e.app.replaceScene(loadingScene);となるけど。
ちなみにこのloadingSceneの色々な設定と、TitleSceneのsuperInitの中は、基本的には同じ。
ただLoadingSceneの場合はヒヨコが転がって、一定時間で次のnextScene(に入ってるシーン)に移る。
TitleSceneはタイトル文字表示(title:に入れたもの)、タッチがあるまで次に行かない。
それぞれのシーンで使う設定を、変数に入れている。
さてここで終わったらコード引き写しだけで終わってしまう、何か他の事をしてみよう。
…という訳で次回は、"タイトルの背景画像表示"と"(画面クリックではなく)キーで次のシーンへ"という改造をしてみる。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_12.txt
＊バージョンは、tmlib.js 0.2.0で作成。
