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

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 フレームを処理スクリプト実行

レンダー（表示）

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

Event.ENTER_FRAME で！

ENTER_FRAME

外部からのイベント処理

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

レンダー（表示）

表示リスト

Display List

Bitmap Video

Vector shapes

再描画領域

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

“Dirty” (再描画される)

表示プレーン

Display List

3D Video

Vector

描画モード

wmode （Flash ） renderMode （ AIR）

direct

transparent opaque

ブラウザー

Flash レンダリング

レンダリング最適化

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

共用メモリー

メインワーカー

（既存

Flash Player）

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

（制限付き）

AS3 ワーカー

作成

MessageChannel

共用メモリー

メインワーカー

（既存

Flash Player）

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

（制限付き）

Longer term

新コンパイラー！

プロジェクトモノクル

Flash Proをより進化！

ActionScript の次版・・？

andhall@adobe.com @fenomas

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

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

Technology

Sitecore CMS 6 コンテンツクックブック

リコーデジタルサイネージ熱中症予防情報コンテンツ...リコーデジタルサイネージ熱中症予防情報コンテンツ熱中症予防情報コンテンツは、各地域の暑さ指数を5

スマートプロパティの概要とコンテンツ管理への適用€¦ · 場面もあります。ブロックチェーン技術(*1)を活用した仕組みで、コンテンツの正当な権利許諾や編集の履歴を保証します。

小学校算数動画コンテンツ URL一覧領域コンテン …...2020/04/09 · 小学校算数動画コンテンツ URL一覧領域コンテンツ名 URL

Cedec2012 ai-contest-design-patterns-principles

CEDEC2012 Starling 開発

スマートプロパティの概要とコンテンツ管理への適用 · Blockchain-based content management technology ... ブロックチェーン技術(*1)を活用した仕組みで、コンテンツの正当な権利許諾や編集の履歴を保証します。

コンテンツSEOセミナー Ginzamarkets資料 20141209

Cedec2012 ゲームに使える翻訳支援ツールの要件

コンテンツ見本市 Jimdo

Felix Duchesneau, Cloud Canvas · 2018. 8. 14. · 動的コンテンツユーザ生成コンテンツゲーム機能コミュニケーションメッセージ・オブ・ザ・デイ

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

生活者支援のための知的コンテンツ基盤 · のコンテンツ制作の最適なワークフローを設計し，それをプロの現場に導入する。いずれの場合も，上記の生活世界

CEDEC2012 sound workshop

01 概要コンテンツ · オンモールのpenshoppe

Cisco コンテンツセキュリティ仮想アプライアンス …...5 Cisco コンテンツセキュリティ仮想アプライアンスインストールガイドシステム要件

マルチメディア･コンテンツの配送・フィルタリング機構

【梅田スノーマンフェスティバル2018 コンテンツ】【梅田スノーマンフェスティバル2018 コンテンツ】 1）オープニングイベント「SNOWMAN

Co-Learning | コラーニング · 2020. 7. 27. · 必要なベーススキルを網羅できる学習コンテンツ最適化することでコンテンツ質を担保 5段階のユーザー評価で常に4以上の評価になるようにユーザーからの

コンテンツ制作・配信ソリューション展ブローシュア