サイトトップ

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

HTML5テクニカルノート

EaselJSの次期バージョン候補でアニメーションの扱いが変わる

ID: FN1307002 Technique: HTML5 and JavaScript Library: EaselJS NEXT

日本時間の7月9日GitHubに、EaselJSの次期バージョン(NEXT)が公開されました。大きく手を加えられたのが、スプライトシートやアニメーションの扱いです。おもな変更点について、簡単に解説します。なお、細かな項目については「EaselJSの次期バージョン候補が公開される」をご覧ください。


01 Spriteクラス(旧BitmapAnimationクラス)

EaselJS 0.6.1のBitmapAnimationクラスは、名前がSpriteに変わります。ActionScriptのクラスとの混同を避けるために名づけたものの、BitmapAnimationという名前が長いうえ、アニメーションを含まないといけないかのような誤解が生じたようです。また、SpriteSheetインスタンスからつくられるという関係をはっきりさせる狙いもあります(「EaselJSのBitmapAnimationクラスの名前を変更する計画について」参照)。

*【NEXT】次期バージョン候補で新たに加わった項目。
Sprite()コンストラクタ
文法 Sprite(spriteSheet, frameOrAnimation)
概要 引数のSpriteSheetオブジェクトの情報にもとづいて、Spriteインスタンスをつくる。
引数

spriteSheet − 再生するSpriteSheetインスタンス。インスタンスにはもと画像のイメージとフレームごとの領域、および再生するフレームの情報が含まれる。

frameOrAnimation【NEXT】− 初めに再生するフレーム番号の整数またはアニメーション名の文字列。

Sprite.framerateプロパティ【NEXT】
文法 Spriteオブジェクト.framerate
プロパティ値 デフォルトではSpriteインスタンスのアニメーションは、DisplayObject.tickイベントごとに進みます。Spriteインスタンス(またはインスタンスのもとになるSpriteSheetオブジェクト)のframerateプロパティを定めると、フレームレートに合わせてアニメーションが進められます。

スプライトシートのアニメーションを司るオブジェクトにframerateプロパティが加えられる一方で、DisplayObject.tickイベントの頻度(frequency)にもとづく制御はなくしていく方向のようです。そのため、BitmapAnimation.offsetプロパティはSpriteクラスからはいずれ除かれます(推奨されません)。


02 SpriteSheetクラス

SpriteSheetクラスも、前項Spriteクラスと歩を合わせた手直しが加えられました。まず、SpriteSheet.framerateプロパティで、デフォルトのフレームレートが決められます。

つぎに、SpriteSheet()コンストラクタの引数に渡すdataオブジェクトが少し変わります。animationsプロパティで設定する再生スピードの単位が、DisplayObject.tickイベント何回ごとに進めるかという頻度(frequency)でなく、その逆数となる速度(speed)に変更されます。また、SpriteSheet.framerateプロパティに定めたい値を、framerateとして与えられます。

*【NEXT】次期バージョン候補で新たに加わった項目。
SpriteSheet()コンストラクタ
文法 SpriteSheet(data)
概要 スプライトシートからつくるアニメーションの情報が含まれたSpriteSheetインスタンスを生成する。
引数

data − imagesとframes、animations、およびframerateプロパティを与えたObjectインスタンス。それぞれのプロパティ値はつぎのとおり。

  • images
    • 画像イメージのImageオブジェクトまたはURIの文字列をエレメントに納めた配列。
  • frames
    • フレーム領域の情報をプロパティとして納めたObject インスタンス。
      data.frames = {width:幅, height:高さ, count:フレーム総数, regX:水平基準点, regY:垂直基準点}
    • フレームによって矩形領域が異なるときは、ひとつひとつのフレームの領域情報を配列にして、それらがエレメントとして納められた入れ子の配列で定めることができる。
      data.frames = [[x座標, y座標, 幅, 高さ, 画像番号, 水平基準点, 垂直基準点]]
  • animations
    animationsプロパティには、再生フレームとつぎに再生するアニメーション名に加えて、スピードが与えられる。スピードは現行バージョンではDisplayObject.tickイベント何回ごとに進めるかという頻度(frequency)で決めるのに対して、次期バージョンは頻度の逆数となる速度(speed = 1 / frequency)で定めるようになる(【NEXT】)。
    • アニメーション名をプロパティとし、値に配列を定めたObject インスタンス。
      data.animations = {
        アニメーション名: [開始フレーム, 終了フレーム, つぎのアニメーション, スピード]
      }
    • 再生するフレームのインデックスが連番ではないときは、Object インスタンスで細かく定められる。
      data.animations = {
        アニメーション名: {
          frames: 再生フレームの配列,
          next: つぎのアニメーション名,
          speed: スピード
        }
      }
  • framerate【NEXT】
    • Spritesheet.framerateプロパティに定めるフレームレート。
SpriteSheet.framerateプロパティ【NEXT】
文法 SpriteSheetオブジェクト.framerate
プロパティ値 デフォルトではSpriteインスタンスのアニメーションは、DisplayObject.tickイベントごとに進む。SpriteSheet.framerateプロパティを定めると、フレームレートに合わせてアニメーションを進めるのがSpriteインスタンスのデフォルトになる。

03 Tckerクラス

TckerクラスではタイミングのAPIとして、setTimeoutかrequestAnimationFrameが用いられます。次期バージョン候補では、タイミングが3つのモードから選べることになります。また、新たにTicker.getMeasuredTickTime()メソッドが備わります。

*【NEXT】次期バージョン候補で新たに加わった項目。
Ticker.timingModeプロパティ【NEXT】
文法 Ticker.timingMode
プロパティ値

[静的] タイミングのAPIとモードを決める。Tickerクラスの定数で定める[*1]

表001■タイミングモードの定数
Tickerクラスの定数 API 説明 文字列
TIMEOUT setTimeout フレームベース timeout
RAF requestAnimationFrame タイムベース raf
RAF_SYNCHED requestAnimationFrame タイムベースでtickイベントと同期 synched
Ticker.getMeasuredTickTime()メソッド【NEXT】
文法 Ticker.getMeasuredTickTime(ticks)
概要 [静的] Ticker.tickイベントの実行が費やした平均時間を返す。つぎのTicker.tickイベントとの間に別の処理が使う時間もあるため、Ticker.getMeasuredFPS()メソッドの戻り値の逆数とは値が一致しない。
引数 ticks − 平均時間を計るTicker.tickイベント数。デフォルト値は1秒当たりのイベント数。
戻り値 Ticker.tickイベントの実行に費やされた平均ミリ秒数。

なお、タイミングのモードが3つになりましたので、ふたつのAPIを切替えるTicker.useRAFプロパティはなくなります。

[*1] requestAnimationFrame APIについては、「window.requestAnimationFrame」をご参照ください。



作成者: 野中文雄
変更日: 2013年7月10日 若干の字句の修正と変更。
作成日: 2013年7月9日


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