CreateJS（EaselJS）でタイマを管理するTickerクラスの使い方

Tickerを起動してステージを更新するくらいならテンプレでいろんなとこに情報があるけど、それ以外の使用方法についてはあまりないのでまとめる。最終的に公式ドキュメントの訳みたいになってしまいました。

Tickerクラス

EaselJSに含まれているクラスで、タイマを管理している。一定間隔でなにか処理したいときに使う。

内部的にはsetTimeoutを一元管理している。ブラウザが対応していればrequestAnimationFrameを使うこともできる。

FPSを設定できたりするので、このクラス使ってゲームループなんかを作れる。

なぜタイマを一元管理するのか？

余談ですが、タイマを一元管理する理由をざっと書いておく。ちなみにJavaScriptでタイマの一元管理はよく使われるテクニックのようで、僕自身はJavaScript Ninjaを読んで知りました。

複数タイマを使うと以下のようなことが問題になる。

• タイマへの参照を管理する必要がある
• ガベージコレクションが発生が多くなってパフォーマンスに影響する

使い方

メソッド

addEventListener

tickイベントにリスナーを登録する。タイマが初期化されていなかったら初期化される。初期化されるとタイマが起動する。

createjs.Ticker.addEventListener('tick', handleTick);
function handleTick() {}

Stageのupdateだけしたい場合は、createjs.Stageのインスタンスを渡すだけでいい。描画だけしたい場合によく使われる。

var stage = new createjs.Stage('canvasId');
createjs.Ticker.addEventLister('tick', stage);

removeEventListener

addEventListernerがリスナーを返してくれるので、それを使ってTickerからリスナーを削除できる。

var listener = createjs.Ticker.addEventLister('tick', handleTick);
function handleTick() {};
createjs.Ticker.removeEventListener('tick', listener); // 削除

Stageを渡してリスナー追加した場合

var stage = new createjs.Stage('canvasId');
createjs.Ticker.addEventLister('tick', stage);
createjs.Ticker.removeEventListener('tick', stage); // 削除

removeAllEventListeners

リスナーを全部削除

createjs.Ticker.removeAllEventListeners('tick');

reset

リスナーを全部削除してタイマを止める

createjs.Ticker.reset();

setFPS

FPSを設定

createjs.Ticker.setFPS(12); // 12FPSに設定

プロパティ

timingMode

ざっくり言うとsetTimeoutを使うかrequestAnimationFrameを使うかを指定するプロパティ。
以下の値を指定できる。デフォルトはcreatejs.Ticker.TIMEOUT

• createjs.Ticker.RAF
  フレームレートを無視してrequestAnimationFrameのハートビートに従う。getTimeかtickイベントオブジェクトのdeltaを使って時間ベースでプログラミングする必要がある。requestAnimationFrameが使えない場合はcreatejs.Ticker.TIMEOUTにフォールバックされる。

• createjs.Ticker.RAF_SYNCHED
requestAnimationFrameを使うが、フレームレートに従う。TIMEOUTよりフレーム間のバラつきが大きいが、requestAnimationFrameの恩恵を受けながら、時間ベースのプログラミングをしなくてもいい。RAFと同様にrequestAnimationFrameが使えない場合はcreatejs.Ticker.TIMEOUTにフォールバックされる。

• createjs.Ticker.TIMEOUT
  フレームレートに従う。内部的にはsetTimeoutで制御される。

場合によるけど、RAF_SYNCHED使っておけばいいんじゃないかと

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

tickイベントオブジェクト

tickイベントのハンドラでイベントオブジェクトを受け取れる。

以下はイベントオブジェクトのプロパティ（tick固有のやつだけ）

• paused Boolean
  Tickerがポーズ中かどうか

• delta Number
  前回のtickイベント発生から経過した時間（ms）

• time Number
  Tickerが初期化されてから経過した時間（ms）

• runTime Number
  timeからポーズ中の時間を引いた時間（ms）

ちょっとしたこと

追加されているリスナーを確認

登録されているハンドラの配列が取得できる。これでちゃんとハンドラが消えてるかを確認したりしてます。

createjs.Ticker._listeners.tick