サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJSでスプライトシートからアニメーションをつくる

ID: FN1210001 Technique: HTML5 and JavaScript

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


01 SpriteSheetとBitmapAnimationクラスの使い方

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

図001■フレームの画像をまとめたスプライトシート
図001左
スプライトシート全体
  図001右
フレームごとの大きさを揃える

まず、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(アニメーション名);

[*1] スプライトシートをつくるとき用いるのは、PhotoshopやFireworksのような画像編集ソフトのほかに、スプライトシートを書出せるアプリケーションもあります。Flash Professional CS6では、[ライブラリ]につくったアニメーションのシンボルを右クリックすると、コンテクストメニューから[スプライトシートを生成]が選べます。[スプライトシートを生成]ダイアログボックスが開くと、[データ形式]の選択項目に[easeljs]がありますので(図002)、書出した画像ファイルがそのまま使えます。

図002■[スプライトシートを生成]ダイアログボックス
図002


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

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

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

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

図003■ペンギンの歩きと落ちて弾むアニメーション
図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行目)。

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

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

コード001■スプライトシートからふたつのアニメーションをつくって再生する
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="easeljs/utils/UID.js"></script>
  5. <script src="easeljs/utils/Ticker.js"></script>
  6. <script src="easeljs/geom/Matrix2D.js"></script>
  7. <script src="easeljs/geom/Rectangle.js"></script>
  8. <script src="easeljs/events/MouseEvent.js"></script>
  9. <script src="easeljs/display/DisplayObject.js"></script>
  10. <script src="easeljs/display/Container.js"></script>
  11. <script src="easeljs/display/Stage.js"></script>
  12. <script src="easeljs/display/SpriteSheet.js"></script>
  13. <script src="easeljs/display/BitmapAnimation.js"></script>
  14. <script>
  15. var stage;
  16. var file = "images/sprite_sheet.png";
  17. function initialize() {
  18.   var canvasElement = document.getElementById("myCanvas");
  19.   stage = new Stage(canvasElement);
  20.   setAnimation(file, canvasElement.width / 2, canvasElement.height);
  21.   Ticker.addListener(stage);
  22. }
  23. function setAnimation(file, nX, nY) {
  24.   var data = {};
  25.   data.images = [file];
  26.   data.frames = {width:102, height:282, regX:54, regY:282};
  27.   data.animations = {
        walk: [0, 5],
        drop: [6, 30, "walk", 2]
        };
  28.   var mySpriteSheet = new SpriteSheet(data);
  29.   var animation = new BitmapAnimation(mySpriteSheet);
  30.   stage.addChild(animation);
  31.   animation.x = nX;
  32.   animation.y = nY;
  33.   animation.gotoAndPlay("drop");
  34.   animation.onClick = function() {
  35.     this.gotoAndPlay("drop");
  36.   }
  37. }
  38. </script>

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


Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.