スプライトを使いこなそう! (2/5)
作成:2012-09-23 11:16
更新:2012-09-23 11:16
更新:2012-09-23 11:16
■スプライトのframeを利用しよう
では、作成したイメージファイルを使ってキャラクタをアニメーションさせてみましょう。前回作成したスクリプトを少しだけ修正して、用意したcharacter2.pngのイメージ2つを切り替え表示しながら動かしてみます。
下のリスト欄に、修正したスクリプトを掲載しておきます。HTMLから読み込むスクリプトファイル(前回作成したサンプルでは、script.js)に記述してください。なお、HTMLファイルおよびゲームの処理を記述するスクリプトファイルの作成については、第1回の記事に記述してあるのでそちらをお読みください。
今回、Gameのフレーム切り替えイベントで呼び出される関数に、キャラクタの表示イメージを切り替えるための処理を追加してあります。といっても難しいものではありません。以下の1文のみです。
さて、ここで使っている「frame」プロパティは、そのSpriteに設定されている「フレーム」を示すためのものです。Spriteには、imageに設定されたイメージファイルからイメージを表示します。が、このとき、Spriteの大きさとイメージの大きさが異なるとき(イメージのほうが大きいとき)、イメージをSpriteのサイズに合わせて分割し、そこから必要なものを取り出して表示するようになっています。Spriteは、
この「何番目のイメージを表示するか」を管理するのが「frame」プロパティなのです。分割されたイメージは、ゼロ番から順に番号付けされています。200×100のイメージなら、ゼロ番と1番に整理されているわけですね。このframeをゼロにすれば左側のゼロ番目のイメージが、1にすれば右側の1番目のイメージがそれぞれ表示されるというわけです。
今回は、Gameのフレームが切り替わるごとに交互にイメージを表示するため、「this.age % 2」という値を設定しています。「age」は、Gameがスタートしキャラクタが動き出してから何フレーム目か?を示す値が保管されているプロパティです。つまり、この値を取り出して2で割ったあまりをframeに設定することで、フレームが切り替わるごとに「0, 1, 0, 1, ……」とゼロと1を交互に設定することができるというわけです。
下のリスト欄に、修正したスクリプトを掲載しておきます。HTMLから読み込むスクリプトファイル(前回作成したサンプルでは、script.js)に記述してください。なお、HTMLファイルおよびゲームの処理を記述するスクリプトファイルの作成については、第1回の記事に記述してあるのでそちらをお読みください。
今回、Gameのフレーム切り替えイベントで呼び出される関数に、キャラクタの表示イメージを切り替えるための処理を追加してあります。といっても難しいものではありません。以下の1文のみです。
this.frame = this.age % 2;今回、イベント内でSpriteを処理している部分は、直接char1を指定するのでなく、「this」を使うようにしています。thisは、イベントが発生したオブジェクトが代入される特別な変数です。直接、Spriteの代入された変数(char1など)を指定すると、後の拡張が面倒になるので、ここでthisを使う形に書き換えておきました。
さて、ここで使っている「frame」プロパティは、そのSpriteに設定されている「フレーム」を示すためのものです。Spriteには、imageに設定されたイメージファイルからイメージを表示します。が、このとき、Spriteの大きさとイメージの大きさが異なるとき(イメージのほうが大きいとき)、イメージをSpriteのサイズに合わせて分割し、そこから必要なものを取り出して表示するようになっています。Spriteは、
new Sprite( 横幅 , 高さ )このようにしてオブジェクトを作成しましたね? 今回のイメージは200×100ドットですから、Spriteのサイズで分割すると、2つのイメージに分割されるわけです。
この「何番目のイメージを表示するか」を管理するのが「frame」プロパティなのです。分割されたイメージは、ゼロ番から順に番号付けされています。200×100のイメージなら、ゼロ番と1番に整理されているわけですね。このframeをゼロにすれば左側のゼロ番目のイメージが、1にすれば右側の1番目のイメージがそれぞれ表示されるというわけです。
今回は、Gameのフレームが切り替わるごとに交互にイメージを表示するため、「this.age % 2」という値を設定しています。「age」は、Gameがスタートしキャラクタが動き出してから何フレーム目か?を示す値が保管されているプロパティです。つまり、この値を取り出して2で割ったあまりをframeに設定することで、フレームが切り替わるごとに「0, 1, 0, 1, ……」とゼロと1を交互に設定することができるというわけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
enchant(); window.onload = function(){ var game = new Game(400, 300); game.preload("character2.png"); game.fps = 20; game.onload = function(){ var char1 = new Sprite(100, 100); char1.image = game.assets["character2.png"]; char1.x = 0; char1.y = 0; char1.addEventListener(enchant.Event.ENTER_FRAME, function(){ this.frame = this.age % 2; // ★ this.moveBy(5, 5); if (this.x > game.width){ this.x = -100; } if (this.y > game.height){ this.y = -100; } }); game.rootScene.backgroundColor = "#ffaaaa"; game.rootScene.addChild(char1); }; game.start(); };
※関連コンテンツ
「初心者のためのenchant.jsゲームプログラミング入門」に戻る