デフォルトのmain.jsをいじる６,タイトルシーンに絵、キー対応追加
今回は前回で追加したTitleSceneに、タイトル画像とマウスではなくキーで進む、という改造をしてみる。
まずはタイトル画像から。
他にTitleSceneを説明してるサイトも余り見つからない…ので、前々回と同じくTitleSceneの、tmlibの元のソースコードを確認してみる。
// ＃TitleScene、tmlibの元ソースから var texture = tm.asset.AssetManager.get(param.backgroundImage);
という一文があった。
これはまさに前々回でやったことだ(画像の直の読み込み)
paramは多分パラメーターの略だし、更に他のコードを見てると、"param.title"みたいに、既に設定した値を用いる書き方もしている。
このparamがsuperInitやらで毎回、まとめて設定したセットに間違いないだろう…
で、そのparamの.backgroundImageを使っている。
じゃあ
this.superInit({
title : "タイトル画面",
width : SCREEN_WIDTH,
height : SCREEN_HEIGHT,
backgroundImage : "TitleImage" // ＃追加
}みたいに設定すれば、バックグラウンドイメージ＝背景として使われる気配?
だがよく見たらtm.asset.AssetManager.get(…とあるから、getにはloadが前もって必要だった。
(直前に書くと読み込みが間に合わなかったりするから)main.jsの一番上の辺り、ASSETSを宣言している下の所にでも書き加えておこう。
// アセット
var ASSETS = {
"bigChick": "neko.png"
};
//画像読み込み
tm.asset.AssetManager.load("TitleImage" , "title.png"); // ＃追加title.pngは再びお絵かきして、用意しておこう。そしてそれをindex.htmlのあるフォルダに放り込んで再読み込み…
表示された！
さてもう一つやりたいのは、"今は画面タッチだけど、キー押しで次のシーンへ"ということ。
ここは、this.addEventListener("pointingend"…
という所で設定してるっぽいから、"pointingend"って所を変えればＯＫだよな…と思っていた。
それでGoogle検索もしたし、コード内もだいぶ探したけど、どうもこういった形でのキー受付はまだ対応してないっぽい!?
tmlibの作者さん：https://github.com/phi-jp/tmlib.js/issues/83
諦めかけたけど、要は前回でも推測した通り…"MainScene"でもやっている通り、
update: function(app) が使えるのではないだろうか？(同じ"シーン"なのだし)
// ＃TitleSceneに追加
update: function(app) {
var key = app.keyboard;
if (key.getKey("z")) {
// シーンの遷移
var loadingScene = tm.app.LoadingScene({
assets: ASSETS,
nextScene: MainScene,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT
});
this.app.replaceScene(loadingScene);
}
}TitleSceneにMainSceneでもある、キー受付のgetKey、それと、その中でシーン遷移の処理を組み合わせてみた。
試すと…確かにＺキーで次の画面へ行けるようになった！
(ついでにタッチには反応させたくないので、this.addEventListener("pointingend"…の部分は丸ごと消した))
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_13.txt
＊バージョンは、tmlib.js 0.2.0で作成。
