HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第12回 スプライトシートでアニメーションをつくる

この記事を読むのに必要な時間:およそ 6 分

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

図1 スプライトシートの画像ファイル

図1 スプライトシートの画像ファイル

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

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

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

図2 すべてのコマを同じ大きさでPNGファイルに納める

図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)を参照してほしい。

表1 情報オブジェクトに定める基本のプロパティ

プロパティ
images画像イメージのImageオブジェクトまたはURIの文字列をエレメントに納めた配列
framesフレーム領域の情報をプロパティに納めたObjectインスタンス
animationsアニメーション名をプロパティとして,値に再生のための情報を配列またはObjectインスタンスで定める

今回のお題では,次のような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)。そのインデックスを再生順に配列に納める。同じイメージを複数のコマで続けて見せたければ,その数だけインデックスを加えればよい。なお,このインデックスはフレーム番号と呼ばれることもある。

図3 スプライトシートのグラフィックイメージに振られる連番インデックス

図3 スプライトシートのグラフィックイメージに振られる連番インデックス

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

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

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

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

コード1 SpriteSheetとBitmapAnimationクラスでスプライトシートアニメーションをつくって再生する

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;
}

図4 スプライトシートのアニメーションが再生される

図4 スプライトシートのアニメーションが再生される

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

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入