はじめに
こんにちは、harayokiです。今回は、自分がStarlingを使ってアプリを開発している時に、個人的に編み出したテクニックをお届けします。一般的には、Objectをプーリングしろだとか、Drawコールをまとめろとか、そういう話になるのですが、そのようなプログラマ観点ではなく、FlasherもといAnimetor(?)ならではの内容をお伝えします。
UI作成には、タイムラインを積極的に使おう！
通常はStarlingでUIを作る、と言ったらFeathers( http://feathersui.com )の出番になりますね。はい、選択肢が沢山あるリストをヌルヌル動かしたいのならそれで正解です。派手なUIをAS3バリバリで動かしますか？それもStarlingまたはFeathersベースで正解かと思います。
しかし、作ろうとしているUIはそんなに動的で派手なものばかりでしょうか。タイトル画面、ヘッダ・フッタ、プロフィール入力画面、ポーズ仮面、ゲームオーバー画面、お知らせバナー、アイテム選択画面などなど。。意外と静的な画面に落ちついていたり、FeathersなどUIライブラリを用いても、複雑なことを行うには工数がかかるために、結局地味なUIに落ち着いていたりしないでしょうか。アニメーションもないか、あってもスライドしてIN/OUTする程度になっていないでしょうか。あるあるですよね？
ここで、このようなUIを昔ながらのタイムラインを使って製作することを考えてみましょう。
実は、スマホ上では遅くて使い物にならないといわれているタイムラインを使ったMovieClip/Spriteの描画ですが、動かさなければFPSはほとんど落ちません。 あまりに古いスマホでなければ、60FPSキープできます。また、最近のスマホは処理能力が格段に上がっていますので多少動かしても気になる速度低下もありません。
DisplayObjectの入れ子が激しかったりすれば遅くなるのでしょうが、それはStarling側でも同じことです。もちろん、残りタイム表示など、更新が毎フレームあるテキストなどを担当するとFPSは下がってしまいますので、そこは、UIに穴を開けて背面に存在するGPU側(Starling)に描画処理を対応してもらえばいいのです。ゲーム本体は Starling(やAway3DなどGPUベースの描画エンジン)に頑張ってもらい、ヘッダやフッタ、その中のあまり操作しないUIはタイムライン側で描画してしまえばいいのです。
今やっている大ヒットゲームのUIもヘッダ・フッタやサイドバーは普段は止まっていたりしませんか？GPUベースのUIでも画像やテキストを差し込みまくっていると、結局動作がかなり重くなったりしていませんか？
画面全体に大きな範囲で存在する、美麗で繊細な図柄の動かない装飾などはまさに、タイムライン側の描画の出番です。テキストや画像が多量に差し込まれても問題ありません。ドローコール数が増加しないので、むしろそのアプリケーションがより速く動くとも言えます。
タイムライン＋ベジェでUIを作成した時のポイント
以下、GPUのビットマップベースで構築したUIと比較して、といった観点での考察です。
- 2x、3xなど解像度のちがう素材をいくつも用意しなくて良い
- 一般的にファイル容量がかなり小さくなる(デザインによっては逆効果)
- ピクセルパーフェクトになるのでにじみのない見た目になる
- SEの入れ込み対応がやりやすい
- 画面遷移を追いやすい、直感的に画面がつくれる
- 美しいグラデーション表示ができる、イラレからそのままデータが持ってこれる
- フィルターを使いテキストに派手な装飾をつけられる
- 別途UIビルダー的なソフトを使う必要がない(StarlingBuilder、MXML for Feathersなど)
- 大きな描画範囲でこみ入ったアニメーションさせると動作が重い
- スコア・タイムの表示など描画更新頻度が多いものには向かない
- アクションゲームの操作ボタンなどレスポンスが重要なUI表示には向かない
- 項目が多いリスト表示には向かない
パフォーマンスを上げる細かいテクニック
以下は、タイムラインを扱ったFlashとしては枯れたテクニックですが、併記しておきます。このあたりはいくらでもネットに情報が落ちていると思うので、詳細は解説しません。
- Stage.qualityはMIDDLEで充分：スマホは解像度が高いので、HIGHやBEST設定にしても遅くなるだけでそこまで綺麗に見えません
- Cache as Bitmapを使おう：メモリは食いますが、ベジェ曲線の描画計算が行われなくなるので、MovieClipを動かす場合に速くなります
- アニメーションは平行移動やアルファ値の変更程度にとどめる：回転・フィルタなどのアニメーション処理はBitmapCache処理の計算し直しになるので遅くなります
- Bitmap素材を用いると速い(上にあげたベジェの利点はなくなりますが、部分的に用いるとよい)
終わりに
StarlingにもMovieClipが存在するため、解説が多少くどい書き方になりました。上記だけ読むとFeathersを若干ディスっているようにも見ますが、Feathersはとてもいいものです。筆者も頻繁に利用しています。つまりは、適材適所ということです。Feathersの弱点は直感的に画面構成を作れないことですが、最近はFlexのMXMLを用いてUI画面作成ができるようになったようです。自分は追っていないのですが、これについて誰か詳しい人が記事にしてくれないかなあ。。
コンテンツ製作者としてはどうしてもアプリを60FPSで動かすことにこだわってしまいますが（そして上記で書いた内容も60fpsでアプリを動かすこと前提としていますが)、30FPSでも良いと妥協すると、タイムラインUIもそこそこ動かしつつGPU側の描画ともぴったり同期ができて、一番バランスが良いのかもしれないなあ、と思ったりもしています。
以上です。まだまだネタはまだあるんですが、その２はカレンダーに空きがあれば書きます(笑)。
ではまた。