60fpsへの道:                                      Flashゲームにおける                                  パフォーマンスチューニングの A to Z        ...
Andy Hall アンディ ホール                                      Game Evangelist ゲーム エバンジェリスト                                      ...
Agenda                                         •        最適化の全体的な話                                         •        ActionS...
最適化の原則                                                              “Premature                                            ...
最適化の流れ        パフォーマンス                                            効率よく、      最適化        向けの設計作り                            ...
Metrics          最適化の前には測定基準が必要。                                                          •   FPS                         ...
プロファイリング                                           現在:                   近未来:                   Flash Builder 4.6 プロファイラー ...
ACTIONSCRIPT 最適化© 2012 Adobe Systems Incorporated. All Rights Reserved.
ActionScript 3.0 の最適化          注意:          • レンダーリングの方が            ネックの場合が多い          • 良く見る最適化の            「コツ」は多くの場合   ...
基本の基本                                              • AS3.0 は必須    常に!                                              • すべての変...
Pooling          インスタンス化のコストが高い!          オブジェクトのプール、再利用で、インスタンス化と          処理のコストを抑える             • Static temps         ...
Function コール          ファンクションコールにもコストそこそこ。          コールスタックを浅く、再帰的定義を避けよう。© 2012 Adobe Systems Incorporated. All Rights Re...
ガベージコレクション          GCを良く知ろう!          • Flash のGCは参照カウント、 マーク・スイープを            両方実装している。                  (メモリー使用量の最適化には上...
GCをスマートに          GCの都合の良いタイミングをFlashに教えよう。          画面切り替え、ポーズ画面等で上記を呼ぼう。          FlashのGC処理の準備は徐々に進んでいる。上記コマンドでは、      ...
参考文献:            「ActionScript 3.0 パフォーマンスチューニング」                             (野中 文雄 著)© 2012 Adobe Systems Incorporated. ...
FLASH 内部設計© 2012 Adobe Systems Incorporated. All Rights Reserved.
全体像                     // フラッシュの内部ループ(単純的に)                     while() {                          sleep until (nextEvent...
Flash の内部ループ                                                               次のSWF                 外部からの                    ...
ポイント!                                    定期的な処理は基本的に                                   Event.ENTER_FRAME で!               ...
表示リスト                                                                         Vector                                      ...
再描画領域                                                                      “Dirty”                                        ...
表示プレーン                                                                         Vector                                     ...
描画モード          wmode (Flash )          renderMode ( AIR)                                      direct                      ...
レンダリング 最適化© 2012 Adobe Systems Incorporated. All Rights Reserved.
Rendering 基本          • 表示リストを浅くしよう。                  理由:再描画領域内                  のすべてが                  毎フレーム完全に          ...
Rendering 基本          ある表示機能は物理的に重い。          気を付けながら使おう。          • ビットマップエフェクト            (グロー、ドロップシャドー等)          • マスク...
Rendering 基本          • 用が済んだものはStageから消去          • 適切なフレームレートを          • ベクターシェイプを簡単化しよう© 2012 Adobe Systems Incorporat...
Stage設定          • StageQuality.LOW:            Lower-quality vector shapes. Never anti-alias, never            smooth bit...
Rendering 内部設計          • ラスタライズ化の条件、            ビットマップキャッシュは            デザイナーさんも含めて理解しよう!© 2012 Adobe Systems Incorporate...
Bitmap Caching          • 複雑なアセットを            一度ラスタライズして            後はビットマップが            代わりに使われる。          • ビットマップエフェクト、...
再ラスタライズの条件          foo.cacheAsBitmap = true;                                                          キャッシュ      再ラスタライズ ...
Bitmap Caching                          キャッシュ状態をモノクルで確認しよう。© 2012 Adobe Systems Incorporated. All Rights Reserved.
Rendering 最適化          最後の一言:             現場のスペックに合わせよう!                                                          500 part...
レンダリング モデル© 2012 Adobe Systems Incorporated. All Rights Reserved.
Rendering Models                                              現代のゲームに、                                           レンダーモデルは主...
1.表示リストモデル         • Flash Proアニーメータが作る、タイムライン                 アニーメーションベースの一般的なコンテンツ         • 作りやすい。パフォーマンスは低い。         •...
2.GPU Mode          • AIRアプリのパブリッシュ設定である。                  Android、iOSにも対応する。          • 設定の場合、ベクターやビットマップをGPU経由で         ...
GPU Mode 事例          モンスタープラネットSMASH!          (GREE)              参考:© 2012 Adobe Systems Incorporated. All Rights Reserv...
3.Blitting(ブリット)          • StageにBitmapを置いて、自分で扱うビットマッ                  プデータをBitmapData.copyPixels()で                  ゲー...
4. Stage3D© 2012 Adobe Systems Incorporated. All Rights Reserved.
4.Stage3D          • Flash 11.0からの新機能。ActionScriptから                  シェーダープログラムを直接GPUに送れる。          •         AGAL (Adobe...
Stage3D ライブラリー                                                          ( コレヲ サズケヨウ!)          • オフィシャルライブラリー (free, open ...
Stage3D 事例© 2012 Adobe Systems Incorporated. All Rights Reserved.
今後のトピック© 2012 Adobe Systems Incorporated. All Rights Reserved.
AS3 ワーカー                                                                作成                                メイン             ...
AS3 ワーカー                                                                作成                                メイン             ...
Longer term                              新コンパ                        プロジェクト   Flash Proを   ActionScript                   ...
ご清聴ありがとうございました。                                                          andhall@adobe.com                                ...
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Upcoming SlideShare
Loading in …5
×

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

3,991 views
3,823 views

Published on

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

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,991
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
25
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

  1. 1. 60fpsへの道: Flashゲームにおける パフォーマンスチューニングの A to Z Andy Hall Adobe Japan© 2012 Adobe Systems Incorporated. All Rights Reserved.
  2. 2. Andy Hall アンディ ホール Game Evangelist ゲーム エバンジェリスト Adobe Japan アドビ システムズ 株式会社 @fenomas© 2012 Adobe Systems Incorporated. All Rights Reserved.
  3. 3. Agenda • 最適化の全体的な話 • ActionScript 3.0 最適化 • Flash Player 内部設計 • レンダリング最適化 • 今後のトピック© 2012 Adobe Systems Incorporated. All Rights Reserved.
  4. 4. 最適化の原則 “Premature optimization is the root of all evil” Donald Knuth (早すぎる最適化は諸悪の根源)© 2012 Adobe Systems Incorporated. All Rights Reserved.
  5. 5. 最適化の流れ パフォーマンス 効率よく、 最適化 向けの設計作り 迅速に開発 (ボトルネックのみ)© 2012 Adobe Systems Incorporated. All Rights Reserved.
  6. 6. Metrics 最適化の前には測定基準が必要。 • FPS • メモリー使用量 • CPU 使用率 • Bandwidth? • バッテリー消費 • etc...© 2012 Adobe Systems Incorporated. All Rights Reserved.
  7. 7. プロファイリング 現在: 近未来: Flash Builder 4.6 プロファイラー コードネーム「モノクル」© 2012 Adobe Systems Incorporated. All Rights Reserved.
  8. 8. ACTIONSCRIPT 最適化© 2012 Adobe Systems Incorporated. All Rights Reserved.
  9. 9. ActionScript 3.0 の最適化 注意: • レンダーリングの方が ネックの場合が多い • 良く見る最適化の 「コツ」は多くの場合 無視しましょう© 2012 Adobe Systems Incorporated. All Rights Reserved.
  10. 10. 基本の基本 • AS3.0 は必須 常に! • すべての変数に型付け • Array、Dictionaryより Vector.<type> ネック • RegExpよりStringメソッド の場合 • E4X、XML は要注意 ( ) • イベントよりコールバック© 2012 Adobe Systems Incorporated. All Rights Reserved.
  11. 11. Pooling インスタンス化のコストが高い! オブジェクトのプール、再利用で、インスタンス化と 処理のコストを抑える • Static temps • オブジェクト pooling© 2012 Adobe Systems Incorporated. All Rights Reserved.
  12. 12. Function コール ファンクションコールにもコストそこそこ。 コールスタックを浅く、再帰的定義を避けよう。© 2012 Adobe Systems Incorporated. All Rights Reserved.
  13. 13. ガベージコレクション GCを良く知ろう! • Flash のGCは参照カウント、 マーク・スイープを 両方実装している。 (メモリー使用量の最適化には上記の理解が絶対条件!) • モノクルを利用して、GC発生の頻度をチェックしよう。 • プール、再利用してGCの発生を抑えよう。 • リテラル(String、intなど)はヌルにするだけで処理 が済むので、大量データをリテラルとして扱おう。© 2012 Adobe Systems Incorporated. All Rights Reserved.
  14. 14. GCをスマートに GCの都合の良いタイミングをFlashに教えよう。 画面切り替え、ポーズ画面等で上記を呼ぼう。 FlashのGC処理の準備は徐々に進んでいる。上記コマンドでは、 今のタイミングで処理するようにFlashに指示する。 因数は緊急性を表す。 imminence=0.99; // すぐに処理ができれば発生させる imminence=0.01; // 処理の準備がまだ多少残っても発生させる© 2012 Adobe Systems Incorporated. All Rights Reserved.
  15. 15. 参考文献: 「ActionScript 3.0 パフォーマンスチューニング」 (野中 文雄 著)© 2012 Adobe Systems Incorporated. All Rights Reserved.
  16. 16. FLASH 内部設計© 2012 Adobe Systems Incorporated. All Rights Reserved.
  17. 17. 全体像 // フラッシュの内部ループ(単純的に) 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(); } }© 2012 Adobe Systems Incorporated. All Rights Reserved.
  18. 18. Flash の内部ループ 次のSWF 外部からの フレームを処理 レンダー イベント処理 (表示) スクリプト実行 sleep© 2012 Adobe Systems Incorporated. All Rights Reserved.
  19. 19. ポイント! 定期的な処理は基本的に Event.ENTER_FRAME で! ENTER_FRAME 次のSWF 外部からの フレームを処理 レンダー イベント処理 (表示) スクリプト実行 sleep© 2012 Adobe Systems Incorporated. All Rights Reserved.
  20. 20. 表示リスト Vector shapes Video Bitmap Display List© 2012 Adobe Systems Incorporated. All Rights Reserved.
  21. 21. 再描画領域 “Dirty” (再描画される) フレーム Display List アップデート© 2012 Adobe Systems Incorporated. All Rights Reserved.
  22. 22. 表示プレーン Vector 3D Video Display List© 2012 Adobe Systems Incorporated. All Rights Reserved.
  23. 23. 描画モード wmode (Flash ) renderMode ( AIR) direct GPU gpu CPU cpu ブラウザー Flash レンダリング transparent opaque© 2012 Adobe Systems Incorporated. All Rights Reserved.
  24. 24. レンダリング 最適化© 2012 Adobe Systems Incorporated. All Rights Reserved.
  25. 25. Rendering 基本 • 表示リストを浅くしよう。 理由:再描画領域内 のすべてが 毎フレーム完全に 処理されるため Display List© 2012 Adobe Systems Incorporated. All Rights Reserved.
  26. 26. Rendering 基本 ある表示機能は物理的に重い。 気を付けながら使おう。 • ビットマップエフェクト (グロー、ドロップシャドー等) • マスク(ベクターベースだし) • アルファーチャンネル・半透明 • ブレンドモード(add、multiply等) • 組み込みフォント(特に日本語!)© 2012 Adobe Systems Incorporated. All Rights Reserved.
  27. 27. Rendering 基本 • 用が済んだものはStageから消去 • 適切なフレームレートを • ベクターシェイプを簡単化しよう© 2012 Adobe Systems Incorporated. All Rights Reserved.
  28. 28. 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.© 2012 Adobe Systems Incorporated. All Rights Reserved.
  29. 29. Rendering 内部設計 • ラスタライズ化の条件、 ビットマップキャッシュは デザイナーさんも含めて理解しよう!© 2012 Adobe Systems Incorporated. All Rights Reserved.
  30. 30. Bitmap Caching • 複雑なアセットを 一度ラスタライズして 後はビットマップが 代わりに使われる。 • ビットマップエフェクト、ブレンドモード等を 利用する場合に自動的に適用 一般的なFlashコンテンツの最適化には、 これは何より大事!© 2012 Adobe Systems Incorporated. All Rights Reserved.
  31. 31. 再ラスタライズの条件 foo.cacheAsBitmap = true; キャッシュ 再ラスタライズ のまま foo.cacheAsBitmapMatrix = new Matrix(); キャッシュのまま GPUで描画される AIRアプリのみ!© 2012 Adobe Systems Incorporated. All Rights Reserved.
  32. 32. Bitmap Caching キャッシュ状態をモノクルで確認しよう。© 2012 Adobe Systems Incorporated. All Rights Reserved.
  33. 33. Rendering 最適化 最後の一言: 現場のスペックに合わせよう! 500 particles 200 particles© 2012 Adobe Systems Incorporated. All Rights Reserved.
  34. 34. レンダリング モデル© 2012 Adobe Systems Incorporated. All Rights Reserved.
  35. 35. Rendering Models 現代のゲームに、 レンダーモデルは主に4つ: 1. Display List 2. GPU mode 3. Blitting 4. Stage3D© 2012 Adobe Systems Incorporated. All Rights Reserved.
  36. 36. 1.表示リストモデル • Flash Proアニーメータが作る、タイムライン アニーメーションベースの一般的なコンテンツ • 作りやすい。パフォーマンスは低い。 • PC向けの軽いコンテンツには十分に使える。 モバイルにはNG。(GPU一切使われないし) • 最適化のキーテクニックはビットマップ キャッシュである。© 2012 Adobe Systems Incorporated. All Rights Reserved.
  37. 37. 2.GPU Mode • AIRアプリのパブリッシュ設定である。 Android、iOSにも対応する。 • 設定の場合、ベクターやビットマップをGPU経由で 描画しようとする。 • movieclip.cacheAsBitmapMatrix を正しく、注意深く 使えば、かなりパフォーマンスが出る。 • 現代までは有力なモデルだが、今後の作品・ 新プロジェクトにはおすすめできない。© 2012 Adobe Systems Incorporated. All Rights Reserved.
  38. 38. GPU Mode 事例 モンスタープラネットSMASH! (GREE) 参考:© 2012 Adobe Systems Incorporated. All Rights Reserved.
  39. 39. 3.Blitting(ブリット) • StageにBitmapを置いて、自分で扱うビットマッ プデータをBitmapData.copyPixels()で ゲームエリアに手動的に描く。 • つまり、レンダリングを完全に自分で担当。 • 固い条件が満たされる場合、効果的である。 • 解像度の高い(Retina)画面には スケールしないので寿命が…© 2012 Adobe Systems Incorporated. All Rights Reserved.
  40. 40. 4. Stage3D© 2012 Adobe Systems Incorporated. All Rights Reserved.
  41. 41. 4.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 (ヒトリデハキケンジャ!)© 2012 Adobe Systems Incorporated. All Rights Reserved.
  42. 42. Stage3D ライブラリー ( コレヲ サズケヨウ!) • オフィシャルライブラリー (free, open source): • Starling (2D) • Away3D • ニーズによって他にも様々… N2D2 Genome2D© 2012 Adobe Systems Incorporated. All Rights Reserved.
  43. 43. Stage3D 事例© 2012 Adobe Systems Incorporated. All Rights Reserved.
  44. 44. 今後のトピック© 2012 Adobe Systems Incorporated. All Rights Reserved.
  45. 45. AS3 ワーカー 作成 メイン バックグラウンド ワーカー ワーカー MessageChannel (既存 API (制限付き) Flash Player) mutex 共用メモリー© 2012 Adobe Systems Incorporated. All Rights Reserved.
  46. 46. AS3 ワーカー 作成 メイン バックグラウンド ワーカー ワーカー MessageChannel (既存 API (制限付き) Flash Player) mutex 共用メモリー© 2012 Adobe Systems Incorporated. All Rights Reserved.
  47. 47. Longer term 新コンパ プロジェクト Flash Proを ActionScript イラー! モノクル より進化! の次版・・?© 2012 Adobe Systems Incorporated. All Rights Reserved.
  48. 48. ご清聴ありがとうございました。 andhall@adobe.com @fenomas© 2012 Adobe Systems Incorporated. All Rights Reserved.
  49. 49. © 2012 Adobe Systems Incorporated. All Rights Reserved.

×