PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのenchant.jsゲームプログラミング入門:

スプライトを使いこなそう! (1/5)

作成:2012-09-23 11:13
更新:2012-09-23 11:13
■複数イメージを切り替えてアニメーションする
前回、キャラクタを「Sprite」というオブジェクトを使って動かしてみました。これには、Gameオブジェクトのフレーム切替時の処理を利用して表示を変更していましたね。

Gameのフレームは、非常に簡単にアニメーションを表示させることができます。が、単にキャラクタの位置が変更されるというだけでは、アニメーションとしても限定されます。表示されるキャラクタが(位置を移動するのでなく)変化してくれないと本当のアニメーションにはなりません。

キャラクタのイメージを複数用意し、それを切り替え表示してアニメーションする、といった手法がゲームの世界では一般的に用いられています。これを行なってみましょう。

キャラクタのイメージを切り替えて表示する場合、enchant.jsでは、使用するイメージを1つのファイルにまとめたものを用意して、それを使います。例えば2つのイメージを交互に切り替え表示して動かそう、と思った場合には、2つのイメージを横に並べたイメージファイルを1つ用意するのです。これを読み込み、キャラクタのサイズごとにイメージを切り抜いてSpriteに表示する、というようなイメージで考えておくとよいでしょう。

では、実際にやってみましょう。前回、100×100ドットの大きさでキャラクタのイメージを作りましたね。このキャラクタを少し変化させたイメージをもう1つ作成し、この2つを横に並べて200×100ドットのイメージファイルを1つ作成してください。ファイル名は、「character2.png」としておきましょう。前回同様、キャラクタの周辺部分は透過設定しておきます。作成したファイルは、HTMLファイルと同じ場所に配置しておきましょう。

今回は2つのイメージを並べたものを用意しましたが、基本的な考え方はイメージの数が3つでも4つでも同じです。利用する順番に横一列に並べたイメージファイルを用意します。



 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

※以下はサンプルで作成したイメージファイル。
100×100のイメージを横に2つ並べ、200×100にまとめたもの。



 


「初心者のためのenchant.jsゲームプログラミング入門」に戻る



※その他のコンテンツ