CreateJSでSpriteSheetアニメーションに個別でフレームレートを設定したいとき

CreateJSでは、Adobe Animate CCなどで書き出したSpriteSheetをコマアニメーションのように表現できます。アニメーションの開発をしていると、全体のフレームレートは60fpsにしたいけど、個別のアニメーションは30fpsくらいに抑えたいということがあります。コンテンツ全体のfpsと個別のアニメーションのfpsを分ける方法を備忘録として残しておきます。

全体のフレームレートの設定

コンテンツを適度にヌルヌル動かすために60fpsを全体のフレームレートとして設定します。

createjs.Ticker.setFPS(60);

個別のアニメーションのフレームレートを設定

Spriteクラスのframerateパラメーターにフレームレートを数値で設定します。ここでは30fpsとしました。

var animation1 = new Animation1();
animation1.framerate = 30;

毎フレームで描画【ここが肝】

CreateJSで処理した内容をcanvasに描画するためには、毎フレームstage.update()を実行します。ここで肝なのが、updateメソッドにeventオブジェクトを渡すとうことです。これがないと、個別のアニメーションのフレームレートは反映されず、全体のフレームレートで再生されます。

createjs.Ticker.on("tick", handleTick);
function handleTick(event) {
  stage.update(event);
}