「スプライトシート」はビットマップアニメーションの複数のフレーム(コマ)を、1枚にまとめた画像ファイルです。スプライトシートから切り出したひとつひとつのフレームの画像を、アニメーションにつくり直して再生します。EaselJSのふたつのクラスSpriteSheetとBitmapAnimationを用います。

01 SpriteSheetとBitmapAnimationクラスの使い方

スプライトシートは、アニメーションの複数フレームをひとつの画像ファイルにまとめたものです(図001左図)。そのとき、EaselJSではフレームごとの画像の大きさ(幅×高さ)をすべて揃えると扱いやすいです(図001右図)^[*1]。この画像ファイル(sprite_sheet.png)を、HTMLドキュメントと同じ場所のフォルダ(images)に入れておきます。

スプライトシート全体

フレームごとの大きさを揃える

まず、SpriteSheetクラスのコンストラクタでインスタンスをつくります。そして、引数に渡すObjectインスタンスに、スプライトシートから切り出して再生するアニメーションの情報をプロパティとして与えます。必要なプロパティは、imagesとframes、およびanimationsの3つです。

imagesプロパティは配列で、スプライトシートに用いる画像ファイルのURIをエレメントに加えます。framesプロパティには、切り出すイメージの幅(width)と高さ(height)、および基準点のxy座標(regXとregY)などをObjectインスタンスとして定めます。animationsプロパティにはObjectインスタンスを与え、そのプロパティにアニメーションの名前で、再生するフレームの開始と終了のインデックス番号を配列に入れて定めます。インデックスは0から始まる整数です。さらに、配列エレメントとして、つぎに再生するアニメーション名とTicker.tickイベントの頻度が加えられます。

var data = {};
data.images = [画像ファイルのURI];
data.frames = {width:幅, height:高さ, regX:水平基準点, regY:垂直基準点};
data.animations = {アニメーション名:[開始フレーム, 終了フレーム, つぎのアニメーション名, Ticker.tickイベント頻度]};
var mySpriteSheet = new SpriteSheet(data);

BitmapAnimationクラスを用いたアニメーションは、Ticker.tickイベントで描かれます。配列の4つ目(インデックス3)のエレメントに頻度の整数を与えると、アニメーションがフレームごとにその回数イベントを待って進むようになるので、再生がゆっくりになります。

つぎに、ビットマップのアニメーションは、BitmapAnimationクラスのコンストラクタにSpriteSheetオブジェクトを引数に渡してつくります。アニメーションを再生するには、BitmapAnimation.gotoAndPlay()メソッドに引数としてアニメーション名またはフレーム番号を渡して呼出します。

var animation = new BitmapAnimation(mySpriteSheet);
animation.gotoAndPlay(アニメーション名);

02 スプライトシートからふたつのアニメーションをつくって再生する

それでは、スプライトシートからアニメーションをつくりましょう。script要素全体は、後にコード001として掲げました。その中から、スプライトシートの扱いに関わるコードを抜出してご説明します。まず、前述のとおり、スプライトシートを扱うSpriteSheetとBitmapAnimationのふたつのクラスと、アニメーションを動かすTickerクラスはscript要素で読込んでおきます(第5および第12〜13行目)。そして、初期化の関数(initialize())でStageオブジェクトをTickerクラスのリスナーに加えます(第21行目)。

<script src="easeljs/utils/Ticker.js"></script> <script src="easeljs/display/SpriteSheet.js"></script> <script src="easeljs/display/BitmapAnimation.js"></script> function initialize() {   Ticker.addListener(stage); }

スプライトシートは、初めの6フレーム(インデックス0から5まで)が、ペンギンの歩くアニメーションです(図003上図)。そして、残りのフレーム(インデックス6から30まで)は、ペンギンが上から落ちてきて弾みます(図003下図)。このふたつは、それぞれに別のアニメーション名をつけて扱うことにします。

図003■ペンギンの歩きと落ちて弾むアニメーション

ファイルのパスを変数(file)に定め(第16行目)、初期設定の関数(initialize())からスプライトシートのアニメーション作成の関数(setAnimation())を呼出します(第20行目)。渡す引数は、ファイルのパスとアニメーションを置くxy座標です。

スプライトシートのアニメーションをつくる関数(setAnimation())では、SpriteSheet()コンストラクタに与える引数のObjectインスタンス(data)がまずつくられます(第24行目)。imagesプロパティの配列には、関数が引数として受取ったファイルのパス(file)をエレメントに納めます(第25行目)。framesプロパティには、切り出すイメージの幅(width)と高さ(height)、および基準点のxy座標(regXとregY)をObjectで与えました(第26行目)。animationsプロパティのObjectインスタンスには、ふたつのアニメーションの名前(walkとdrop)をプロパティに定め、値の配列に再生するフレームの開始と終了のインデックス番号をエレメントに納めます。ふたつ目のアニメーションには、つぎに再生するアニメーション名とTicker.tickイベントの頻度も加えました(第27行目)。

このObjectインスタンス(data)を引数にしてSpriteSheetオブジェクト(mySpriteSheet)をつくり、さらにこのオブジェクトを引数にして、BitmapAnimationのインスタンス(animation)をつくります(第28〜29行目)。BitmapAnimationインスタンスは、Stageオブジェクトの表示リストに加え、関数が引数に受取ったxy座標値(nXとnY)に位置を定めます(第30〜32行目)。そして、アニメーションを再生するため、BitmapAnimation.gotoAndPlay()メソッドにふたつ目のアニメーション名(drop)を渡して呼出します(第33行目)。

ふたつ目のアニメーションが再生し終わると、つぎに定められたひとつ目のアニメーションが繰返します。そこで、BitmapAnimationオブジェクト(animation)のDisplayObject.onClickイベントにはハンドラの関数を定め、ふたつ目のアニメーションが再生されるようにしました(第34〜36行目)。

var file = "images/sprite_sheet.png"; function initialize() {   setAnimation(file, canvasElement.width / 2, canvasElement.height); } function setAnimation(file, nX, nY) {   var data = {};   data.images = [file];   data.frames = {width:102, height:282, regX:54, regY:282};   data.animations = {     walk: [0, 5],     drop: [6, 30, "walk", 2]     };   var mySpriteSheet = new SpriteSheet(data);   var animation = new BitmapAnimation(mySpriteSheet);   stage.addChild(animation);   animation.x = nX;   animation.y = nY;   animation.gotoAndPlay("drop");   animation.onClick = function() {     this.gotoAndPlay("drop");   } }

これで、まずペンギンが落ちて弾むアニメーション(drop)から始まり、続くアニメーション(walk)としてペンギンが歩き続けます。そして、クリックすると、またペンギンが落ちてきて、歩き続けるという繰返しです(コード001)。

作成者: 野中文雄
作成日: 2012年10月3日