Flashで作ったCreateJS形式コンテンツをWebGL再生したい

はじめに

最近、HTML5でゲームコンテンツを作ることが多いのですが
皆さんどのように制作されているでしょうか。

よく見かけるのは、HTML5開発のためのエンジン・ライブラリを用いつつ、アニメーションは

• アニメーターが頑張ってスクリプトを覚えて書く
• アニメーターが作ったアニメーションを、エンジニアが目コピしてスクリプトに落とす
• アニメーターが作ったアニメーションをそのまま使用できるようにシステムを組む

などで対応する…といったスタイルなのですが、
ガラケー時代～ソーシャルゲーム全盛期においてAdobe Flash(※現在はAnimateと改名)を使い続けてきた身としては
どうにかFlashだけで完結させたいんだよなー、と常々思案しております。
未だにアニメーションのオーサリングツールとしてはFlashの優位性は高いと思っていますし、
新たなエンジン・ライブラリを習得するコストもかかりますしね。

じゃあ使えばいいじゃん

ご存知の通り、Flashが某リンゴさんやスマホブラウザで動作しなくなったことから
Flashも「CreateJSを用いたHTML5コンテンツの制作ツール」としての方向に舵を切りました。

が、これもまたご存知の通り、Flash製のCreateJSコンテンツは
動作が重いという致命的な問題を抱えているため、
何も考えずに使うわけにはいかないのが現状です。

それなら軽くなれば使えるじゃん、ということで
Flashでの軽く動作する構造を研究してみたり、設定を見直してみたりなどで
何も考えずに作るよりは高速にはなってきたのですが、
俗に言うところの「ぬるぬるした動き」はなかなか難しく。

それならばという事で、スマホブラウザのWebGL対応も進んできたという点も含め

Flash製のCreateJSコンテンツをWebGL再生することで高速に動作させるプラグイン
Creap.js

を作ってみようと思いたった、という次第です。

Creap.jsについて

使いかた

<script src="Creap.all.min.js"></script>
<script src="content.js"></script> <!-- これがFlash製のCreateJSコンテンツ -->
<script>
    var content = new Creap.Content('lib', 'content', 'images', 'ss');
    // パブリッシュ設定によっては第一、第三、第四引数の内容が変わる。　初期設定なら上記
    // 第二引数はルートになるクラス名。　だいたいflaファイルの名前と一緒

    new Creap.Application(content, document.body)
    .on('initialized', function() {
        this.start();
    });
</script>

必要なものとか役割とか

• 2015.11.26ビルドのCreateJSを使用しているFlash製CreateJSコンテンツ」
  　※あくまでFlashでパブリッシュされたもののみが対象
  　特に気にせずとも、最新のFlashで書き出せば問題ないはず。
  　書き出されたHTMLにhttps://code.createjs.com/createjs-2015.11.26.min.js
  　を読み込むコードがあればたぶんOK。

• pixi.js v4.4.3 | 4.5.1 WebGLレンダリングが使える開発エンジン
  　これを用いてCreateJSの各クラスをエミュレートしている感じ。
  　pixi.jsの思想がCreateJSと結構近いので、使えるところはそのまま～といったところ。

• howler.js v2.0.1　Web Audio API周りを簡単に扱える。
  　pixi.jsにはサウンド周りの機能がないので、これで再生周りだけ管理。

• Ease.js 本家CreateJS内のTweenJSの更に一部。
  　イージングの計算などをやっているクラス。
  　Flash製CreateJSコンテンツでは、イージング計算のための関数を返すだけの用途なので
  　わざわざエミュレートしなくていいかなと思って。

機能

未実装なクラスとか関数とかプロパティ多々あり。
詳しくはdocsも参照。

createjs関連

• WebGLレンダリング
  　・非対応端末は自動で2D Contextにフォールバック(pixi.jsが勝手にやってくれる)

• DisplayObjectの主要機能(createjs.DisplayObject)
  　・transform系プロパティ制御(xとかscaleXとか)
  　・イベント制御(addEventListenerとか)

• ムービークリップ(createjs.MovieClip)
  　・タイムライン制御(goto系とかplay/stopとか)
  　・親子関係制御(addChildとか)
  　・フレームスクリプトOK
  　・クラシックトゥイーンOK
  　・モーショントゥイーンOK(たぶん)
  　　※ただしパブリッシュ時の警告のとおり
  　　　「各フレームがキーフレーム」となるようなデータになってしまうので
  　　　できる限りクラシックトゥイーンを使用するのを推奨
  　・1レイヤに複数のDisplayObject配置OK
  　　※ただし処理としては複雑になるので、1レイヤに単一種インスタンスを推奨

• スプライトシートの使用(createjs.Sprite)
  　・pixi.jsでスプライトシートを使用するためのjsonファイルを作成するのにPHPを使用
  　　※TexturePackerで生成するjsonと同形式(不必要そうな部分はカットしている)
  　　※CreateJSでは、パブリッシュ時にスプライトシートと同名のjsonを生成⇒削除ということをしているらしく
  　　　スプライトシートと同名のjsonを事前に用意しておいてもパブリッシュするたびに消されてしまうので
  　　　微妙に違う名前のjsonにしている。

• 単体イメージ(createjs.Bitmap)

• シェイプ(createjs.Shape)
  　・圧縮コードに関連する関数は未実装なので
  　　パブリッシュ設定 -> 詳細 -> シェイプをコンパクト化　のチェックを外すこと
  　・角丸の線とかは非対応なので、線はカクっとした感じに

• マスク
  　・マスクをトゥイーンさせるのも可能だが、CreateJSの時点でよろしくない定義になるので非推奨

• サウンド(createjs.Sound)
  　・サウンドプレイヤーのような、リアルタイムで細かくパラメータを変更するような機能は未実装

• テキスト(createjs.Text)
  　・基本的にはダイナミックテキストの時にのみ使用される。
  　・フォント埋め込みは不可(CreateJSも不可なはず？)
  　・静止テキストはフォントを再現するが、CreateJSからの書き出したデータ上は
  　　「テキストの形をしたシェイプ」を配置することで再現しているみたい

• イベント(createjs.Event)

• マウスイベント(createjs.MouseEvent)
  　・スマホで使いそうなやつ中心、roll系とかは未実装
  　・タッチ～ドラッグ～離す　の流れは mousedown, pressmove, pressupで
  　・press~系の処理をエミュレートするために、処理が重くなる実装になってしまっている。
  　　※サンプルのstandardをPCブラウザで開き、Canvas上でマウスを動かすと分かりやすい
  　　※オプションでpress系の処理を単純化する代わりに、動作を少し軽くすることもできる

• イージング(createjs.Ease)
  　・本家をそのまま使ってるので内容も本家と同じ

Creap.js関連

• 画像・サウンド置換機能

• 変数差し込み機能

• ムービークリップ差し替え機能

• フルスクリーン化機能

性能比較

• CreateJS : アニメーションをタイムラインで実装したという前提。
• Creap.js : 同上。
• pixi.js : アニメーションを関数なりで実装したという前提。

動作速度(WebGLレンダリングの場合)

　pixi.js＞＞Creap.js＞＞CreateJS
　exampleのstandardを見てもらうと、Creap.jsとCreateJSの差はわかりやすい。
　pixi.jsがいかに速いかは、pixi.jsのHPのサンプルを見てもらえると…。

動作速度(2D Contextの場合)

　pixi.js＞＞Creap.js＞CreateJS

制作・開発のしやすさ

　Creap.js＝CreateJS＞＞＞pixi.js

※個人の感想＋コンテンツの内容によって変わってきます。

基本的に、タイムラインという概念そのものが動作を重くしている印象。
Creap.jsもタイムラインとしてアニメーションを管理しているので
関数でアニメーションを作るよりはどうしても重くなりがち。

余談

WebGLについて

実際のところ、FlashでもWebGLの向けのアニメーションは作成できます。
Flashで新しいプロジェクトを立ち上げて「WebGL(プレビュー)」を選択すれば
後はパブリッシュするだけでWebGL向けコンテンツが出来上がるようです。

ただしちょっと触った感じ、以下のような問題が…

• 提供されるAPI・構造に違いがある
  　・MovieClip#gotoAndXxxとかはあるものの、DisplayObject#xとかがない。
  　・rootに配置したaというインスタンスについて、rootにthis.aと書いても参照できない。
  　というような感じで、それなりにスクリプトの書き方を覚えなおす必要がある。

• WebGL非対応端末では「全く動かない(かも)」
  　・ちゃんと調べていないが、書き出されたHTMLに「WebGL非対応端末です」と表示する処理があったので
  　　恐らく自動で2D Contextにフォールバックはしてくれない気がする。
  　　仮にそうだとすると、WebGL非対応端末向けに別途コンテンツを用意する必要が出てきてしまう。

最後に

みんなもっとFlash使ってね！