tmlibの練習ブログ

自分流にtmlibを触っていきます。分かったことを解説。入門用になれば…?

デフォルトの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を使うようだ。


f:id:superchineseland:20131108195051j:plain
このままでも、大きなヒヨコの画像が読めると思うけど、自前の画像を読み込みたい時は、画像の参照アドレスを変えよう。
つまり、

"bigChick": "http://jsrun.it/assets/g/6/p/V/g6pVK.png"

"bigChick": "neko.png"

とかにしてしまう。


そして適当にお絵かきした画像を、index.htmlと同じフォルダに(.png形式の、nekoというファイル名で)放り込めば読んでくれるはず。

f:id:superchineseland:20131108195102j:plain

ちなみにたぶんwindowsのペイント機能で保存すると、白い四角が付いてしまうと思う。
…まあ"アルファチャンネル 透過"とかで調べて、白い部分を透明にして、保存しよう。


ここまでのコード(main.js)
http://spchinese.s601.xrea.com/tmlib_text/main_2013_11_08.txt
*バージョンは、tmlib.js 0.2.0で作成。


次回:デフォルトのmain.jsをいじる4,シーンを使わずに画像表示してみる - tmlibの練習ブログ