今回は少し目先が変わって，スプライトシートでアニメーションをつくる。「⁠スプライトシート」というのは，アニメーションのひとコマひとコマをひとつにまとめた画像ファイルだ（図1⁠）⁠。ファイルをひとつにすると，読込みが1回で済むため効率がいい。画像からそれぞれのコマのグラフィックイメージを切り出して，アニメーションとして再生する。パフォーマンスを重く見るゲームコンテンツでも使われる仕組みだ。

スプライトシートを用意する

これからつくるのは，前掲図1のスプライトシートを使った簡単なアニメーションだ。でき上がりのコンテンツを先にjsdo.itでお見せしよう。

スプライトシートは，ひとつあるいは複数の画像ファイルで成立つ。スプライトシートがつくれるツールはいろいろあり，どれを使ってもよい。本稿では，Flash Professional CCを用いた（※1⁠）⁠。大事なのは，画像からコマごとのグラフィックイメージを切り出すということだ。つまり，それぞれのコマについて，予め矩形領域を定めておかなければならない。簡単なのは，すべてのコマを同じ大きさにすることだ（図2⁠）⁠。また，背景を抜きたいなら画像ファイルはPNG形式がよいだろう。

※1

Flash Professionalによるスプライトシートの書出し方については，「⁠スプライトシートの作成」や動画「アニメーションのスプライトシート書き出し」をご覧いただきたい。

SpriteSheetとBitmapAnimationクラス

スプライトシートアニメーションをつくるには，SpriteSheetとBitmapAnimationのふたつのクラスを使う。まず，SpriteSheetクラスで，スプライトシートのどこからそれぞれのコマのグラフィックイメージを切り出し，どのような順序でアニメーションにするのか定めたSpriteSheetオブジェクトをつくる。引数にはアニメーションを組み立てるための情報をオブジェクトで渡す。つぎに，そのSpriteSheetオブジェクトをBitmapAnimationクラスのコンストラクタに渡して，ステージに置いて再生や停止などの制御ができるBitmapAnimationオブジェクトをつくるという段取りだ。

new createjs.SpriteSheet(情報オブジェクト)

new createjs.BitmapAnimation(SpriteSheetオブジェクト)

SpriteSheet()コンストラクタの引数に渡す情報オブジェクトには，基本としてimagesとframes，およびanimationsの3つのプロパティを与える（表1⁠）⁠。ただ，それらに納める中身や定め方にはバリエーションがある。詳しくは，公式リファレンス「SpriteSheet」の例（SpriteSheet Format）を参照してほしい。

今回のお題では，次のようなJavaScriptコードを書いた。情報オブジェクト（data）のimagesプロパティには，スプライトシートのパス（file）ひとつを配列に納めて与えた。framesプロパティには，Objectインスタンスで幅と高さ，および基準点の座標を定めた。

{width:幅, height:高さ, regX:水平基準点, regY:垂直基準点}

animationsプロパティの中身については，この後説明する。こうして設定した情報オブジェクトがSpriteSheet()コンストラクタに渡され，できあがったSpriteSheetオブジェクト（mySpriteSheet）は，さらにBitmapAnimation()コンストラクタの引数にして，BitmapAnimationオブジェクト（mySprite）がつくられている。

var data = {};
data.images = [file];
data.frames = {width:82, height:109, regX:41, regY:55};
data.animations = {walk: {
    frames: [0, 0, 1, 2, 2, 3],
    frequency: 3
  }
};
var mySpriteSheet = new createjs.SpriteSheet(data);
var mySprite = new createjs.BitmapAnimation(mySpriteSheet);

改めて，animationsプロパティだ。アニメーションの名前（walk）をプロパティにつけて，値にはObjectインスタンスが与えてある。

そのframesプロパティには，再生するコマ（フレーム）を配列エレメントで定めた。スプライトシートから切り出すグラフィックイメージには，0から始まる連番インデックスが振られる（図3⁠）⁠。そのインデックスを再生順に配列に納める。同じイメージを複数のコマで続けて見せたければ，その数だけインデックスを加えればよい。なお，このインデックスはフレーム番号と呼ばれることもある。

プロパティfrequencyは，アニメーションの速さを整数で決める。ただし，値が大きいほど遅くなる。スプライトシートアニメーションは，Ticker.tickイベントで再生が進む。frequencyプロパティの整数値は，そのイベントいくつごとにひとコマ進めるかを定める。アニメーションの世界で「何コマおき」という指定に当たる。

SpriteSheetとBitmapAnimationのふたつのクラスでスプライトシートアニメーションをつくって再生するのが，次のコード1だ。上述のスプライトシートアニメーションのオブジェクトをつくる処理は，関数（createAnimation()）に定めて初期設定の関数（initialize()）から呼び出している。また，スプライトシートのアニメーションは，BitmapAnimation.gotoAndPlay()メソッドで再生する。引数には，情報オブジェクトのanimationsプロパティに定めた再生したいアニメーション名を渡す（※2⁠）⁠。

BitmapAnimationオブジェクト.gotoAndPlay(アニメーション名)

アニメーションする画面の書替えは，お約束どおりTicker.tickイベントのリスナー関数（animate()）で行う。この関数が行っているのは，今のところStage.update()メソッドの呼出しだけだ。これで，スプライトシートのアニメーションがステージのうえで再生される（図4⁠）⁠。

var stage;
var animation;
var stageWidth;
var stageHeight;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stageWidth = canvasElement.width;
  stageHeight = canvasElement.height;
  stage = new createjs.Stage(canvasElement);
  animation = createAnimation("images/sprite_sheet.png");
  stage.addChild(animation);
  animation.x = stageWidth / 2;
  animation.y = stageHeight / 2;
  animation.gotoAndPlay("walk");
  createjs.Ticker.addEventListener("tick", animate);
}
function animate(eventObject) {
  stage.update();
}
function createAnimation(file) {
  var data = {};
  data.images = [file];
  data.frames = {width:82, height:109, regX:41, regY:55};
  data.animations = {walk: {
      frames: [0, 0, 1, 2, 2, 3],
      frequency: 3
    }
  };
  var mySpriteSheet = new createjs.SpriteSheet(data);
  var mySprite = new createjs.BitmapAnimation(mySpriteSheet);
  return mySprite;
}

※2

スプライトシートに並べたグラフィックイメージをただその順番に再生すればよいときは，BitmapAnimation.gotoAndPlay()メソッドの引数に再生を始める連番インデックス（フレーム番号）を渡すこともできる（前掲図3参照⁠）⁠。