デフォルトのmain.jsをいじる3,画像を読み込んでみる。
前回:デフォルトのmain.jsをいじる2,拡大縮小のプロパティ(要素)を探す - tmlibの練習ブログ
まででキー受付で、アクションを起こせるようになった。
ここまで来たら、いつまでも星のままでは寂しい。
自分で作った色々な画像を使ってみたい。
という訳で、再びGoogle検索して、こんなコードに行き着いた。
色々見慣れない事もしているけど、よく観察して、手元のmain.jsとの違いを抑えてみよう。
上から順に
// アセット var ASSETS = { "bigChick": "http://jsrun.it/assets/g/6/p/V/g6pVK.png" };
が加わり、(1.とする)
main.jsでは
// シーンを切り替える app.replaceScene(MainScene());
だった部分が
// 読み込み var loadingScene = tm.app.LoadingScene({ assets: ASSETS, nextScene: MainScene, width: SCREEN_WIDTH, height: SCREEN_HEIGHT }); app.replaceScene(loadingScene);
と変わり、(2.)
this.star = tm.app.StarShape(64, 64);
は
this.chick = tm.app.Sprite("bigChick");
へとなっている。(3.)
これらの変わった部分で、"星の描画"が"オリジナルの画像の読み込み"へとなる。
よく見てみると、1.のASEETSは2.に使われている。
そして以前のmain.jsにあるMainSceneが、nextScene:にも見られる。
どうやら登録…しているのでは、と仮定してみる。
そうなると、最後のapp.replaceScene は、単純に"シーンを切り替える"だけじゃなく、この形の場合、"切り替える際に、ここで登録したデータを渡す事ができるらしい"と分かる。
そう考えると、3.
this.chick = tm.app.Sprite("bigChick");
も、どうやらASEETSのbigChickという事で良さそうだ。
つまり、main.jsにある
tm.define("MainScene", { …
といった所で"シーン"が作られ(MainSceneが)、
一番初めに実行される
tm.main(function() …
でその"シーン"に小分けにデータを渡す、という概念があるようだ。
あとは3.のthis.chick =という所を、this.star = にする事を忘れずに。
(本当は画像に合った変数名に変えた方が分かりやすいけど、今回はとりあえず)
前回[documents]で確認したところ、StarShapeは<簡単に星形を描画できるクラス>だった。
今回のSpriteを調べると、<画像の描画を行うクラス>としてある。
星ではなく、画像読み込みの時はSpriteを使うようだ。
このままでも、大きなヒヨコの画像が読めると思うけど、自前の画像を読み込みたい時は、画像の参照アドレスを変えよう。
つまり、
"bigChick": "http://jsrun.it/assets/g/6/p/V/g6pVK.png"
↓
"bigChick": "neko.png"
とかにしてしまう。
そして適当にお絵かきした画像を、index.htmlと同じフォルダに(.png形式の、nekoというファイル名で)放り込めば読んでくれるはず。
ちなみにたぶんwindowsのペイント機能で保存すると、白い四角が付いてしまうと思う。
…まあ"アルファチャンネル 透過"とかで調べて、白い部分を透明にして、保存しよう。
ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_08.txt
*バージョンは、tmlib.js 0.2.0で作成。