CEDEC2012 - Flashコンテンツの最適化

© 2012 Adobe Systems Incorporated. All Rights Reserved.

60fpsへの道： Flashゲームにおける

パフォーマンスチューニングの A to Z

Andy Hall Adobe Japan


Andy Hall Game Evangelist

Adobe Japan

アンディホールゲームエバンジェリストアドビシステムズ株式会社 @fenomas


Agenda

• 最適化の全体的な話 • ActionScript 3.0 最適化 • Flash Player 内部設計 • レンダリング最適化 • 今後のトピック


最適化の原則

“Premature optimization is the

root of all evil” Donald Knuth

（早すぎる最適化は諸悪の根源）


最適化の流れ

パフォーマンス向けの設計作り

効率よく、迅速に開発

最適化（ボトルネックのみ）


Metrics

最適化の前には測定基準が必要。

• FPS • メモリー使用量 • CPU 使用率 • Bandwidth? • バッテリー消費 • etc...


プロファイリング

現在: Flash Builder 4.6 プロファイラー

近未来: コードネーム「モノクル」


ACTIONSCRIPT 最適化


ActionScript 3.0 の最適化

注意： • レンダーリングの方が

ネックの場合が多い

• 良く見る最適化の「コツ」は多くの場合無視しましょう


基本の基本

• AS3.0 は必須 • すべての変数に型付け • Array、Dictionaryより

Vector.<type> • RegExpよりStringメソッド • E4X、XML は要注意

( ) • イベントよりコールバック

常に！

ネックの場合


Pooling

インスタンス化のコストが高い！オブジェクトのプール、再利用で、インスタンス化と処理のコストを抑える

• Static temps

• オブジェクト pooling


Function コール

ファンクションコールにもコストそこそこ。コールスタックを浅く、再帰的定義を避けよう。


ガベージコレクション

GCを良く知ろう！

• Flash のGCは参照カウント、マーク・スイープを両方実装している。（メモリー使用量の最適化には上記の理解が絶対条件！）

• モノクルを利用して、GC発生の頻度をチェックしよう。 • プール、再利用してGCの発生を抑えよう。 • リテラル（String、intなど）はヌルにするだけで処理

が済むので、大量データをリテラルとして扱おう。


GCをスマートに

GCの都合の良いタイミングをFlashに教えよう。

画面切り替え、ポーズ画面等で上記を呼ぼう。 FlashのGC処理の準備は徐々に進んでいる。上記コマンドでは、今のタイミングで処理するようにFlashに指示する。因数は緊急性を表す。 imminence=0.99; // すぐに処理ができれば発生させる imminence=0.01; // 処理の準備がまだ多少残っても発生させる


参考文献：

「ActionScript 3.0 パフォーマンスチューニング」（野中文雄著）


FLASH 内部設計


全体像 // フラッシュの内部ループ（単純的に） while() { sleep until (nextEvent OR externalEvent) if ( various events pending ) { handleEvents(); // Timerイベント、 // audio/video バッファー等を処理する } if ( time for next SWF frame ) { parseSWFFrame(); executeActionScript(); } if ( screen needs update ) { updateScreen(); } }


Flash の内部ループ

外部からのイベント処理

次のSWF フレームを処理スクリプト実行

レンダー（表示）

sleep


ポイント！定期的な処理は基本的に

Event.ENTER_FRAME で！

sleep

ENTER_FRAME

外部からのイベント処理

次のSWF フレームを処理スクリプト実行

レンダー（表示）


表示リスト

Display List

Bitmap Video

Vector shapes


再描画領域

Display List フレームアップデート

“Dirty” (再描画される)


表示プレーン

Display List

3D Video

Vector


描画モード

wmode （Flash ） renderMode （ AIR）

direct

transparent opaque

ブラウザー

CPU

GPU

Flash レンダリング

gpu

cpu


レンダリング最適化


Rendering 基本

• 表示リストを浅くしよう。

理由：再描画領域内のすべてが毎フレーム完全に処理されるため

Display List


Rendering 基本

ある表示機能は物理的に重い。気を付けながら使おう。 • ビットマップエフェクト

（グロー、ドロップシャドー等） • マスク（ベクターベースだし） • アルファーチャンネル・半透明 • ブレンドモード（add、multiply等） • 組み込みフォント（特に日本語！）


Rendering 基本

• 用が済んだものはStageから消去 • 適切なフレームレートを • ベクターシェイプを簡単化しよう


Stage設定 • StageQuality.LOW:

Lower-quality vector shapes. Never anti-alias, never smooth bitmaps.

• StageQuality.MEDIUM: Better vectors. Some anti-aliasing but no bitmaps smoothing. Default value for mobile devices.

• StageQuality.HIGH: Always uses anti-aliasing. Uses smoothing on bitmaps depending on whether the SWF is animating. Default value on desktop PCs.

• StageQuality.BEST: Best quality. Always anti-alias, always smooth bitmaps.


Rendering 内部設計

• ラスタライズ化の条件、ビットマップキャッシュはデザイナーさんも含めて理解しよう!


Bitmap Caching

• 複雑なアセットを一度ラスタライズして後はビットマップが代わりに使われる。

• ビットマップエフェクト、ブレンドモード等を利用する場合に自動的に適用

一般的なFlashコンテンツの最適化には、これは何より大事！


再ラスタライズの条件 foo.cacheAsBitmap = true;

foo.cacheAsBitmapMatrix = new Matrix();

キャッシュのまま

再ラスタライズ

キャッシュのまま GPUで描画される AIRアプリのみ！


Bitmap Caching

キャッシュ状態をモノクルで確認しよう。


Rendering 最適化

最後の一言：現場のスペックに合わせよう！

500 particles 200 particles


レンダリングモデル


Rendering Models

現代のゲームに、レンダーモデルは主に４つ：

1. Display List 2. GPU mode 3. Blitting 4. Stage3D


１．表示リストモデル

• Flash Proアニーメータが作る、タイムライン

アニーメーションベースの一般的なコンテンツ

• 作りやすい。パフォーマンスは低い。

• PC向けの軽いコンテンツには十分に使える。

モバイルにはNG。（GPU一切使われないし）

• 最適化のキーテクニックはビットマップ

キャッシュである。


２．GPU Mode

• AIRアプリのパブリッシュ設定である。

Android、iOSにも対応する。

• 設定の場合、ベクターやビットマップをGPU経由で

描画しようとする。

• movieclip.cacheAsBitmapMatrix を正しく、注意深く

使えば、かなりパフォーマンスが出る。

• 現代までは有力なモデルだが、今後の作品・

新プロジェクトにはおすすめできない。


GPU Mode 事例モンスタープラネットSMASH!

(GREE)

参考：


３．Blitting（ブリット）

• StageにBitmapを置いて、自分で扱うビットマッ

プデータをBitmapData.copyPixels()で

ゲームエリアに手動的に描く。

• つまり、レンダリングを完全に自分で担当。

• 固い条件が満たされる場合、効果的である。

• 解像度の高い（Retina）画面には

スケールしないので寿命が…


4. Stage3D


４．Stage3D

• Flash 11.0からの新機能。ActionScriptから

シェーダープログラムを直接GPUに送れる。

• AGAL (Adobe Graphics Assembly Language) を利用する

• AGAL とはこんな感じ：

• 一般的な開発者には

ライブラリーが必要！

m44 op, va0, vc0 dp4 op.x, va0, vc0 dp4 op.y, va0, vc1 dp4 op.z, va0, vc2 dp4 op.w, va0, vc3 m44 op, va0, vc0 mov v0, va1

（ヒトリデハキケンジャ！）


• オフィシャルライブラリー（free, open source）：

• Starling (2D)

• Away3D

• ニーズによって他にも様々…

N2D2 Genome2D

Stage3D ライブラリー（コレヲサズケヨウ！）


Stage3D 事例


今後のトピック


AS3 ワーカー

作成

MessageChannel

API

共用メモリー

メインワーカー

（既存

Flash Player）

バックグラウンドワーカー

（制限付き）

mutex


AS3 ワーカー

作成

MessageChannel

API

共用メモリー

メインワーカー

（既存

Flash Player）

バックグラウンドワーカー

（制限付き）

mutex


Longer term

新コンパイラー！

プロジェクトモノクル

Flash Proをより進化！

ActionScript の次版・・？


[email protected] @fenomas

ご清聴ありがとうございました。


Technology

CEDEC2012 - Flashコンテンツの最適化