JavaScript

CreateJSでビジュアル表現を作った感想

前回、CreateJSに簡単に触れましたがCanvasでちょっとしたビジュアルを作成する機会があった為、早速CreateJSを導入しました。
先に結論から書くと、ノンライブラリ(Canvas API)で実装する事を考えると工数は半分以下になったと思います。

CreateJSで行ったこと

PreloadJSで画像の読込管理
画像を複数枚使用した為、全画像の読込完了を検知するコンプリートイベントを利用。
var loader,
  manifest = {
    {src: '/img/hoge.png', id: 'hoge'},
    {src: '/img/fuga.png', id: 'fuga'}
  };

loader = new createjs.LoadQueue(false);
loader.addEventListener('complete', function() {
  // 画像読込完了 
  do something
});
loader.loadManifest(manifest);
EaselJSのスプライトシートでフレームアニメーション
キャラクターのフレームアニメーションを作成。
このような画像(スプライトシート)を用意することで、公式のデモは実現されています。

上記のような画像のフレームを細かく指定してアニメーションを作成します。
var piyo = new createjs.SpriteSheet({
  'images': [loader.getResult('hoge')],
  'frames': {
    'width': 44,
    'height': 66,
    'count': 8,
    'regX': 22,
    'regY': 33
  },
  'animations': {
    'kick': {
      'frames': [0, 1, 2, 3, 4, 5, 6, 7],
      'next': 'stand',
      'speed': 2
    },
    'stand': [7]
  },
  'framerate': 5
});

var PIYO = new createjs.Sprite(piyo);
TweenJSでアニメーション
  • Canvas要素内に一定の背景を描画(同じ絵をずっと表示)
  • 背景の上でキャラクターを動かす(アニメーション)
例えば、上記のようなケースでキャラクターのアニメーション(1pxでも動かす)を行う場合ですが、
背景を再描画してキャラクターが描かれていない状態を経てキャラクターを直前の位置とは異なる座標に動かす。
これを繰り返す事でアニメーション(滑らかに動いているように見せる)を実現しています。

ノンライブラリ(Canvas API)でこれを実現する際の問題は本来作りたい「キャラクターのアニメーション」と関係ない「一切変化の無い背景」を意識(再描画)しないといけないこと。
アニメーションと関係ない部分を意識しないで良くなります。(意図的に削除しない限り前回と同じ状態を描画します)
var stage = new createjs.Stage('canvasID'),
  bg = new createjs.Shape();
  character = new createjs.Shape();

// 背景描画 
bg.graphics
  .beginFill('#70942c')
  .drawRect(0, 0, 300, 300);

// キャラクター描画 
character.graphics
  .beginBitmapFill(loader.getResult('character'))
  .drawRect(0, 0, 20, 20);

// Canvasへ配置 
stage.addChild(
  bg,
  character
);

// アニメーション 
createjs.Tween.get(character).wait(300).to({
  'y': 40
}, 1000, createjs.Ease.bounceOut);

CreateJSを使うことのメリット

一番のメリットは工数が大幅に短縮出来ました。
また、豊富かつ直感的なAPIで記述出来るため、設計が複雑になり難くメンテナンスも行いやすくなります。
Stage(Canvas)内に配置したオブジェクトを簡単にアニメーション出来る事と、オブジェクト毎に容易にイベント設定が出来る事はライブラリならではのメリットではないでしょうか。

CreateJSを使うことのデメリット

CreateJSに限った話ではありませんが、ライブラリでは豊富なAPIが提供されていますが、汎用性を持たせた設計がされているためパフォーマンス(FPS)が落ちてしまいがちです。
厳密に検証出来ていませんが、Stage(Canvas)上でパーティクルを(同時に)大量にアニメーションさせる場合など、PCではサクサク動いていても、モバイルではパフォーマンスが落ちる傾向にあります。

ただ、記述方法を工夫する事である程度は改善出来ますし、バージョンアップにより高速化される事もありますので、一概にCreateJSで作ったから重い、と言う程ではありません。
今回私が使った範囲ではモバイルでもパフォーマンス低下を感じませんでしたので、結局は内容による、という事になると思います。

まとめ

CreateJSを利用する事で工数が大幅に短縮出来るが、パフォーマンスが落ちる傾向にある。
ただし、内容にもよるが、PCがメインターゲットであればCreateJSで作ったから重い、といった状況は稀なため、
モバイル専用、もしくはモバイルがメインターゲットになる場合以外は気にならないレベルだと思われる。

大量のパーティクルを動かすのに相当する負荷がかかるケース、
例えば、演出で小さなオブジェクトを大量にアニメーションさせる場合などは処理が重くなりそうな部分を先に作って検証すると手戻りが少ないかもしれません。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。