HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう

HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう

HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。

  • スプライトシートを使う方法
  • ベクターアニメーションを使う方法
  • スプライトシートビルダーを使う方法
  • おまけ:GIFアニメーションを使う方法
  • おまけ:Flashアニメーションを使う方法

スプライトシートを使う

スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。

130516_about_spritesheet

表現の再現性が高いうえに実行時の再生負荷が低くパフォーマンスに優れるという利点があります。例えばキャラクターが歩くアニメーションを再生するとこんなに多くのオブジェクト(20体)を配置しても60fpsをキープしています。

130516_use_spritesheet

デモの容量は2.1MBで再生時のフレームレートは60fpsです。

しかしスプライトシートには「容量がでかい」という大きな課題があります。HTML5コンテンツは(Flashに比べて)ただでさえ容量が膨らみがちなのですが、スプライトシートはほぼ無圧縮なPNGデータを使うことが多いため容量が肥大化しがちです。特にスマートフォンなど通信帯域の限られる環境では、HTML5コンテンツがエンドユーザーに長いロード時間を強いることになります。

ベクター情報としてToolkit for CreateJSを使う

CreateJSは最近注目を集めているJavaScriptでリッチコンテンツを実現するフレームワークです。次のデモはToolkit for CreateJSを使ったベクターアニメーションです。ベクター情報のためファイルとしての容量は少なく読み込み時間をかなりコンパクトにすることができます。
※ベクター図形は頂点情報として、移動・回転・スケールのアニメーションは変化量だけ記録されているだけ容量が抑えられています。

130516_about_vector

しかしベクター情報だとレンダリング負荷が高いのがデメリットです。表示するオブジェクトの数が少ないうちはいいのですが、大量のオブジェクトを配置するとフレームレートが著しく下がります。それを試してみたのが次のデモです。

130516_use_vector

デモの容量は67KBで再生時のフレームレートは約14fpsです。

ベクターアニメーションとして再生するとレンダリングをする度にベクターグラフィックスをゼロから計算するため負荷が高くなります。結果として計算量が増えるとフレームレートを落とす要因となってしまいます。

ちなみに類似の方法としてGoogle Swiffyを使う方法もあります。

CreateJSのスプライトシートビルダーを使う

CreateJSのスプライトシートビルダーを使う方法を紹介します。データをベクター情報として読み込み、初期化時にベクターアニメーションをビットマップとしてレンダリングし内部的にスプライトシートを生成。その後は内部的に生成されたスプライトシートからアニメーションを再生するという方法になります。

130516_about_spritesheetbuilder

Adobe MAX 2013 – CreateJS: Building Rich Interactive Experiences in HTML5 – Togetterより抜粋

この方法は上記のどちらのデメリットを解決しており、容量の軽いベクターとパフォーマンスに優れるビットマップのいいとこどりをすることができます。

130516_use_builder

デモの容量は67KBで再生時のフレームレートは60fpsです。コンパクトな容量で、高いパフォーマンスを実現できています。いいところだらけのスプライトシートビルダーですが、初期化時にアニメーション全コマをプレレンダリングするため、コンテンツ再生前に少し待ち時間が増えてしまうのが注意点です。

おまけ:GIFアニメーションを使う

おまけですがGIFアニメーションは従来からHTMLでアニメーションをする簡易的な方法として用いられていました。しかし、次の点で複雑な制御には向きません。

  • 使える色数が256色と制限がある
  • 透過部分の境界が汚い
  • GIFアニメーションの停止や再開の方法がない(フレームラベル手法が使えない)
  • 使う色数とコマ数が増えると容量が肥大化する

GIFアニメーションは容量もでかくなり、キャラクター1体の表示で1MBもかかっています。

130516_use_gif

おまけ:Flashアニメーションを使う

アニメーションをFlash(SWFファイル)で使うとたった23KBです。Flashなのでアンチエイリアスも美しく再生負荷も低く、なによりも容量がコンパクトです。

130516_use_flash

まとめ

以上の結果をわかりやすいように表にまとめたのがこちら。

130516_STATS

Flashを除いて言うと、今のところベストの方法はスプライトシートビルダーを使う方法ではないでしょうか。

エンドユーザーに長い読み込み時間やフレームレート低下による高ストレスな体験をさせないためにもCreateJSでスプライトシートビルダーを積極的に使うのがいいのではないかと思います。

では良いCreateJS開発を! HTML5開発にもFlash Proは有用ですね。

※ちなみにアニメーションのイラストはMITライセンスとして提供されているDragonBonesのイラストをつかいました。DragonBones自体は後日紹介したいと思います。

もっと知りたい方はCreateJS勉強会へ

ちなみにこの記事はCreateJS勉強会(第3回)で発表した「CreateJS最新情報〜Adobe MAX 2013より〜」から一部抜粋して記事にしました。こちらの発表資料は次のURLにて公開しています。


池田 泰延

池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」やセミナー・書籍執筆などの活動を通して積極的にインタラクションデザインの情報共有に取り組んでいる。著書に「Flash for HTML5」「Stage3Dプログラミング」など多数。