CEDEC2012 Flashゲームにおけるパフォーマンスチューニングの A to Z

60fpsへの道：
Flashゲームにおける
パフォーマンスチューニングの A to Z

Andy Hall
Adobe Japan

© 2012 Adobe Systems Incorporated. All Rights Reserved.

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 で！

ENTER_FRAME

次のSWF
外部からのフレームを処理レンダー
イベント処理（表示）
スクリプト実行

sleep


表示リスト

Vector
shapes

Video
Bitmap

Display List


再描画領域
“Dirty”
(再描画される)

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


表示プレーン

Vector
3D
Video

Display List


描画モード

wmode （Flash ）
renderMode （ AIR）

direct
GPU

gpu CPU

cpu ブラウザー
Flash
レンダリング
transparent
opaque

レンダリング最適化


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
（ヒトリデハキケンジャ！）

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

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

• Starling (2D)

• Away3D

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

N2D2
Genome2D


Stage3D 事例


今後のトピック


AS3 ワーカー

作成

メイン
バックグラウンド
ワーカーワーカー
MessageChannel

（既存 API （制限付き）
Flash Player）

mutex

共用メモリー


Longer term

新コンパプロジェクト Flash Proを ActionScript
イラー！モノクルより進化！の次版・・？


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

andhall@adobe.com
@fenomas


CEDEC2012 Flashゲームにおけるパフォーマンスチューニングの A to Z

More Related Content

What's hot

Similar to CEDEC2012 Flashゲームにおけるパフォーマンスチューニングの A to Z

CEDEC2012 Flashゲームにおけるパフォーマンスチューニングの A to Z