ヒキダスブログ

テック系や最近見たもの感じたことを書いて残す引き出しスペースです

CreateJS勉強会 (第9回)に行ってきた

Frontend JS Web Canvas 勉強会

12月7日、 Adobe Creative Cloud 道場 にてCreateJS勉強会がありました。

私自身、 CreateJS を昨年から触り始め実案件でいくつか導入してみました。その他2D Canvasライブラリだと Pixi.js も使ったことがありますが、日本語のドキュメントが少なく、バージョンも適宜更新されてネットで探した記事だと記述が前のバージョンだったりして。
CreateJSについては、 ICSさんのCreateJS入門サイト があったので、比較的スムーズに覚えて徐々に調べつつ進められました。

今回は、CreateJSが正規版1.0.0にあがったことで何ができるのか、登壇された3名のお話を聞いて自分なりにまとめてみました。

CreateJSの概要 + Animate CC 2018の新機能 (ICS 池田さん)

  • 2012年頃、カナダのFlashクリエイターGrant SkinnerがHTML5向けにCanvasライブラリを立ち上げた(ちなみに、Canvasを使った事例は ここ にあるらしい)
  • 当初、EaselJSのみ提供していたが、ローディング・音声等包括してCreateJSという名称に
  • CreateJSの得意分野は、インタラクションコンテンツ、自由度の高い表現。苦手分野は、ユーザーインターフェース(HTMLでやった方がスムーズ)
  • 使える用途として、ゲーム・スペシャルサイト・バナー広告
  • 他ライブラリに比べCreateJSの利点は、Animate CCとの連携(HTML5 Canvasドキュメントで内部的にCreateJSが利用されている、CreateJSで書き出しされる)
  • 最新Animate CCでは、カメラ機能・深度機能が加わった(その他、Robert Penner式のイージング設定とか、タイムライン上に秒数が表示される、絶対時間を保ったままFPSを変更できるとか)

CreateJS 1.0.0で何が変わったか (野中さん)

  • こちらのレジュメ を元に進行
  • StageGLによるWebGL対応が可能になった
  • コンストラクタStage()の呼び出しをStageGL()にする
  • デフォルトだとステージがグレーになるので、StageGL.setClearColor()メソッドにカラーを渡す
  • Shapeオブジェクトをキャッシュさせる
  • フィルターは機能するが、マスク・合成機能がStageGLで動作しない

我々はCreateJSをどう使うべきか？ (世路庵 沖さん)

  • アニメーションを使う意図として、[フィードバック]・[世界観の演出]・[ストーリーの伝達]がある
  • アニメーションにしか伝えられないことがある
  • 今のアニメーション実装方法(DOM / CSS3 / Canva)は、コード思考のアニメーション
  • Animate CCのような、タイムライン思考のアニメーションにしか伝えられないことがある

池田さんのお話で印象に残ったのは、Animate CCの新機能でした。
カメラ・深度機能が追加されたことで、同じAdobe製品のAfter Effectsを彷彿とさせました。
グラフィックやイラスト主体にした平面表現であれば現状機能で事足りるでしょうが、
奥行き感をもたせた3Dライクな2Dコンテンツを作るのであれば、必要な機能と言えるでしょう。
この辺りは、レイヤー間の動きが映像作品のように緻密になってきそうなので、ビジュアルエディタによるところが大きいと思われます。

映像だと、湯浅監督が「ピンポン」や「夜明け告げるルーのうた」でFlashを制作ツールとして使うという事例もあるので、上記機能による活用性が広がりそうな気がします。

野中さんによる、CreateJS新機能も着目すべき点でした。
これまでContext 2D Canvasでの表現にとどまっていましたが、WebGL対応によりパーティクルだったり数の多い物体のアニメーションを高速で処理できるようになり、リッチ表現の幅が広がることが期待されました。
一方で、これまでの記述と違う点(ごく部分的なところのようです)や、マスクや合成が動作しなかったりと、WebGLがすべての表現において有効手段とは言い難いともいえます。この辺りはICSさんの方も以前 検証 をしていたようです。

最後、沖さんのお話は現在の実装方法とも絡めたアニメーションの重要性という意味で考えさせる内容でした。

確かに、JSやCSSによるアニメーション記述が豊富になってきたことでコードで考えるアニメーション実装が増えてきました。頭の中でシミュレーションして、立てたロジックの試行錯誤と調整。現在それの行き着くところが、Three.jsを使った奥行きも加味した3D表現だったり、GLSLや数学演算を用いてランダム性を持たせたり数千数万の物体を操作するプログラマブルなリッチコンテンツになるのでしょう。

一方で、グラフやイラストといった少数を対象にフォーカスさせるアニメーションとかは、タイムラインの必要性は大きいでしょう。映像作品を作るように、視覚的に気持ちの良い動きかどうか、相互のフレーム間の調整がしやすいところが強みと言えます。それは、Animate CCに限らず、3D系のビジュアルエディタであれば、Unityとか Play Canvas も候補として考えられます。

ということをつらつら考えつつ、コード・タイムラインという手段を、フロントエンドエンジニアとして両輪うまく生かしていきたいなと思った勉強会でした。

参考：
https://wired.jp/2014/09/10/science-saru/
https://gigazine.net/news/20170417-masaaki-yuasa-interview/
https://ics.media/entry/5140