FP130720 - EaselJS NEXTが公開された - 東京ひよこの会: SpriteSheet・AIR for Desktop・CreateJS・Scoutについて語り合おう！

HTML5 / Flash ActionScript講座

Webクリエイターのための
CreateJSスタイルブック

ActionScript 3.0
プロフェッショナルガイド

EaselJS NEXTが公開された

Date: 2011年3月5日

Technique: HTML5 and JavaScript

Library: EaselJS NEXT

index

バブリングするイベントを捉える
EaselJS NEXTでスプライトシートアニメーションに施された互換性を損なう変更
EaselJS NEXTでスプライトシートアニメーションに加えられた新たな機能
イベントのバブリングとマウスイベント

jsdo.itサンプルファイル
- before (0.6.1)
- after (NEXT)

日本時間の7月9日GitHubに、EaselJSの次期バージョン(NEXT)が公開された。開発者のGrant Skinner氏が、Google Groupsへの投稿「EaselJS updates」でおもな変更とその意図について説明している。その内容を中心に簡単な解説を加える。細かな項目はEaselJS(NEXT)の「VERSIONS.txt」に書上げられているので、F-site「EaselJSの次期バージョン候補が公開される」にまとめた。

01 EaselJS 0.6.1でスプライトシートを使ったアニメーション

EaselJS NEXTでは、スプライトシートを使ったアニメーション周りの扱いが変わる。そこで、まずは現行バージョンEaselJS 0.6.1におけるサンプルコードを示し、その後NEXTバージョン向けに書替えてみる。スプライトシート(images/sprite_sheet.png)には、ふたつのアニメーションを納めた(図001)。

図001■キャラクタの歩きと落ちて弾むアニメーション

EaselJS 0.6.1でスプライトシートのアニメーションを再生するサンプルは、以下にコード001としてscript要素全体を掲げた。なお、スプライトシートについては、「EaselJSでスプライトシートからアニメーションをつくる」を参照してほしい(ただし、旧バージョンによる解説のため0.6.1とはイベントの扱いが変わる)。

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

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

<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<script>
var stage;
var file = "images/sprite_sheet.png";
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
setAnimation(file, canvasElement.width / 2, canvasElement.height);
createjs.Ticker.addEventListener("tick", stage);
}
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 createjs.SpriteSheet(data);
var animation = new createjs.BitmapAnimation(mySpriteSheet);
stage.addChild(animation);
animation.x = nX;
animation.y = nY;
animation.gotoAndPlay("drop");
animation.addEventListener("click", drop);
}
function drop(eventObject) {
var instance = eventObject.target;
instance.gotoAndPlay("drop");
}
</script>

02 EaselJS NEXTでスプライトシートアニメーションに施された互換性を損なう変更

前掲コード001でEaselJS 0.6.1をNEXTバージョンに差替えると、ブラウザの開発ツールで警告が示される(図002)。BitmapAnimationクラスは名前がSpriteに変わるからだ。このクラス名を書替えなければならない(ただし、NEXTパージョンでは警告が出ても動く)。

BitmapAnimation is deprecated in favour of Sprite. See VERSIONS file for info on changes.

図002■BitmapAnimationクラスでなくSpriteを使うように警告が示される

それから、ふたつ目のアニメーション(drop)の再生速度が違う。これは、SpriteSheet()コンストラクタの引数に渡すオブジェクトについて、再生の速さを定めるプロパティが頻度(frequency)から速度(speed)に置換えられたからだ。速度は頻度の逆数(speed = 1 / frequency)で、小数値も定められる。そこで、前掲コード001はつぎのように書替える。行番号は次項に全体を掲げるコード002にもとづく。

function setAnimation(file, nX, nY) {

  var data = {};

  data.animations = {
    walk: [0, 5],
    drop: [6, 30, "walk", 0.5] // 2]
    };

  var mySpriteSheet = new createjs.SpriteSheet(data);
  // var animation = new createjs.BitmapAnimation(mySpriteSheet);

  var animation = new createjs.Sprite(mySpriteSheet);

}

03 EaselJS NEXTでスプライトシートアニメーションに加えられた新たな機能

EaselJS NEXTでスプライトシートアニメーションに加えられた新たな機能もある。前掲コード001では、ふたつ目のアニメーション(drop)を初めに再生するため、BitmapAnimation.gotoAndPlay()メソッドにアニメーション名を渡して呼出した(コード001第24行目)。新たなSpriteクラスのコンストラクタには、つぎのように第2引数に初めに再生するアニメーションが与えられる(第15行目)。すると、再生は、ただSprite.play()メソッドを呼出せば済む(第19行目)。

function setAnimation(file, nX, nY) {

  var data = {};

  data.animations = {
    walk: [0, 5],
    drop: [6, 30, "walk", 0.5]
    };

  var mySpriteSheet = new createjs.SpriteSheet(data);
  // var animation = new createjs.Sprite(mySpriteSheet);

  var animation = new createjs.Sprite(mySpriteSheet, "drop");

  // animation.gotoAndPlay("drop");
  animation.play();

}

これまでに述べた手を加えたのが、以下のコード002だ。EaselJS NEXTで前掲コード001と同じアニメーションが再生される。

コード002■EaselJS NEXTで前掲コード001と同じアニメーションを再生する

var stage;
var file = "images/sprite_sheet.png";
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
setAnimation(file, canvasElement.width / 2, canvasElement.height);
createjs.Ticker.addEventListener("tick", stage);
}
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", 0.5]
    };
var mySpriteSheet = new createjs.SpriteSheet(data);
var animation = new createjs.Sprite(mySpriteSheet, "drop");
stage.addChild(animation);
animation.x = nX;
animation.y = nY;
animation.play();
animation.addEventListener("click", drop);
}
function drop(eventObject) {
var instance = eventObject.target;
instance.gotoAndPlay("drop");
}

また、スプライトシートアニメーションにフレームレートを定めるプロパティが備わった。SpriteSheetオブジェクトのSpriteSheet.framerateプロパティにアニメーションを再生するフレームレートが与えられる。

var mySpriteSheet = new createjs.SpriteSheet(data);
mySpriteSheet.framerate = 60;

さらに、フレームレートはSpriteオブジェクトのSprite.framerateプロパティに定めてもよい。この場合、SpriteSheet.framerateプロパティはデフォルト値の扱いとなり、Sprite.framerateプロパティの値でアニメーションは再生される。

var animation = new createjs.Sprite(mySpriteSheet, "drop");
animation.framerate = 8;

このほかアニメーション絡みでは、TickerクラスにTicker.timingModeプロパティとTicker.getMeasuredTickTime()メソッドが備わる。

04 イベントのバブリングとマウスイベント

「EaselJSの次期バージョンにおけるイベントのバブリングとマウスイベント」

作成者: 野中文雄
作成日: 2013年7月20日