04:「画像を表示してアニメーションさせてみよう(スプライトアニメーション)」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - 04:「画像を表示してアニメーションさせてみよう(スプライトアニメーション)」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

ローディング画面を使って画像を読み込もう!

サンプル

コードの解説

タイトル画面が表示される前に、ローディングの画面を挟んで画像をロードしてみます。

このように読み込みたい画像のURLを書いた変数、ASSETSを用意します。ASSETSの”backMap”とは画像の別名です。画像に別名をつけることで、URLを変更しても他のプログラム箇所は書き換えなくてよくなっています。

画像を表示しよう

サンプル

コードの解説

画像を表示してみます。マップの画像を表示させてみましょう。

これで画像を表示することができました。次はアニメーションをさせてみましょう。

スプライトアニメーションをさせてみよう

サンプル

コードの解説

プレイヤークラスを用意しちゃいましょう。初めて自分用のクラスを作りますが、作り方は既存のクラスの拡張と同じです。

画像の追加や、MainSceneへの処理の追加はMapクラスと同じですね。今回違うのは、プレイヤークラスの作り方です。プレイヤークラスをちょっと詳しくみてみましょう。

プレイヤーのサイズを変数として作っています。サイズは幅20pixel x 高さ16pixelです。画像全体の大きさではないことに注意してください。キャラクターのサイズです。画像を見ると分かりますが、一つ一つの動きごとに絵が書かれているので画像を見たほうが分かりやすいでしょうか。

 

 

流用するクラスは”tm.app.AnimationSprite”となっています。これはスプライトアニメーションを簡単に行えるようにtmlib.jsが用意しているクラスです。
 

superInitにアニメーションの仕方を記述しているファイルである”playerSS”を渡すことで、アニメーションができるようになります。

サイズを4倍にしているのは、プレイヤーの表示を大きくするためです。元の画像が小さいので。
 
これでアニメーションの準備は終わりです。次のコードでアニメーションが開始されます。

“left”を指定することで、左方向に移動しているようなアニメーションが再生されます。実際にindex.htmlをブラウザで開くとアニメーションされますのでチェックしてみてください。

 

次は、アニメーションの仕方を指定する方法です。アニメーションの仕方は”playerSS”ファイルに書かれています。中身はこんな感じです。

jsonファイルの形式になっています。画像名や画像のサイズ、アニメーション方法などをまとめて書いています。