Adobe Animate CC から利用可能な WebGL Document Preview版の調査と、Haxe からの利用サンプルを作成しました。

サンプル

今回作成した WebGL で表示する簡易ムービーです。5秒ほどのムービーをループさせています。

Adobe Animate CC WebGL Document とは

情報がほとんど無く 自分で使用してみての調査報告となるため、誤っている箇所があるかもしれませんが、その場合はつっこみください。

---

Adobe Animate CC には HTML5 コンテンツを制作するための「HTML5 Canvas Document」と「WebGL Document」の二種類のドキュメント形式があります。

「HTML5 Canvas Document」は CreateJS ライブラリを利用してコンテンツ制作を行います。Adobe Animate CC で作成したムービーの再生も可能です。しかしムービーを WebGL で再生したい場合、MovieClip をスプライトシートで出力する・専用の処理を記述する等 手間が増え、更に複雑な構造のムービーを WebGL で再生するのは難しい状況です。

「WebGL Document」は独自の API により、Adobe Animate CC で作成したムービーをそのまま WebGL 上で再生する事が可能です。複雑な構造のムービーであってもです。ムービー内部で使用されている ビットマップデータは一つの画像に自動的に収められ、ベクターデータは数値として別途出力され描画されます。描画に関しては 「HTML5 Canvas Document」よりも高い機能を持ち合わせています。

以上から WebGL Document は HTML5 版 GAFMedia 的 立ち位置となりそうです。GAFMedia 詳細に関しましては以下の過去記事をご参考ください。
Haxe(Adobe AIR or Flash) から GAFMedia を利用する

Preview 版による問題

現在 WebGL Document は Preview 版となっており、不具合のような動作や問題点が結構あります。これら問題点が解決するまで実用するにはまだ難しいかもしれません。

ビットマップデータを利用すると描画がちらつく

ビットマップデータを利用すると Internet Explorer や Microsoft Edge では描画がちらついてしまいます。Google Chrome ではちらつくことはありません。現状の一番致命的な問題です。

ビットマップデータを拡大すると画像がぼやける

スムージングがデフォルトでかかってしまっています。解除方法がわかりません。解決作としては、初めから拡大したビットマップ画像を利用する等がありますが、データ量に無駄がでてしまいます。

短いサウンドファイルは正常に出力されず

ムービー内に埋め込んだサウンドを再生する事も可能です。しかしサウンドファイルの再生長が短い場合、正常にファイルが出力されず 0KB の mp3 ファイルが出力されてしまいました。

総画像サイズは 2048 x 2048 px まで

コンテンツ内で使用している全てのビットマップを結合した画像サイズが 2048 x 2048 px を超えると、正常に素材出力が行われません。

jQuery との併用の注意

WebGL Document API が記述してある flwebgl-0.2.min.js を定義する前に jQuery 用 js ファイルを読み込んでしまうと、jQuery の $ 記述が認識されなくなってしまいます。併用したい場合は flwebgl-0.2.min.js 定義後に jQuery 利用の記述を行う必要があります。

今回のサンプルで行った問題回避策

サンプルムービーではドット絵(ビットマップデータ)を利用していますが、IE や Edge でも正常に表示するために、一つ一つのビットマップデータをベクターデータ化する、という手間を費やしています。
比較的シンプルなドット絵なのでベクターデータ化しても問題なく、力技とも言えましょう。

Haxe からの利用

WebGL Document をパブリッシュすると、素材用データやライブラリファイルの他、素材を読み込む処理(JavaScript)が記述された html が出力されます。この読み込み処理部分を Haxe で別途記述し github にアップロードしました。JavaScript 処理では イベントハンドラの数珠つなぎ状になっているため、処理を整理しタイマーで順次読み込みを行うような形式に変更しています。

https://github.com/siratama/WebGLDocument

今後 Haxe で WebGL Document コンテンツ制作を行う場合のテンプレート的ファイルとしてご参考ください。

終わりに

WebGL Document が登場してから Preview 版状態が結構長く続いています。今後どうなるのかわかりませんが、今一番に期待できる機能なので、問題点を全て解決し正式版になってほしいものです。

WebGL Document 用 API はそこそこ整っており、ゲームコンテンツにも使用できます。サウンド制御用の API が用意されていない等ありますが、不足分は CreateJS ライブラリを利用する等すれば良しとなりそうです。

Adobe Animate CC WebGL Document API
https://helpx.adobe.com/jp/flash/webgl-runtime-api-help/index.html

[ FLASH ] [ tips ] 投稿者 siratama : 2016年09月25日 12:10