Adobe Scoutは、Flash PlayerまたはAIRランタイムで再生されるコンテンツの中身を覗いて、パフォーマンスデータをリアルタイムに分析できるツールです。 この記事では、Scoutを使って応用的な分析を実施する方法について解説します。

プロファイリングについて一言

“Premature optimization is the root of all evil.”
「早すぎる最適化は諸悪の根源」
 = Donald Knuth

アニメーションでもスクリプトでも、パフォーマンス向上を目指して最適化をする際にはコンテンツの負荷に集中しなければ実質的な改善は期待できません。プロファイリングツールであるAdobe Scoutはコンテンツの負荷をわかりやすく表示します。したがってScoutを使いこなす方法は、Knuth博士の言葉を思い出して、負荷を確認できるところに最適化を行ない、それ以外の最適化を行わないようににすることです。この原則に従って効率良く最適化を行いましょう。

ゼロから始めるプロファイリングの手段

  1. Adobe Creative Cloudのメンバーになる(無償プランでも可能)
  2. Adobe Application ManagerまたはCreative Cloudウェブサイトから、Game Development Toolsという項目でAdobe Scoutをインストールする
  3. Scoutを起動する
  4. ブラウザを起動してFlashコンテンツを参照する(Flash Player 11.4以上が必要)

手段は以上です!コンテンツ側の変更もデバッグプレーヤーの利用も必要ありません。Scoutが起動した状態でFlash Player 11.4以上が動作すれば、自動的にプロファイリングデータがプレーヤーからScoutへ送信されます。

Flash Professionalのアニメーションのプロファイリングの仕方

Flash Professional CS6に含まれるプレーヤーは、現時点ではまだScoutに対応していないため、Flashで「ムービープレビュー」を行なったとしてもScoutには分析データは流れません。このため、Flash Professionalから直接プロファイリングする場合には、ブラウザで動作確認([ファイル]→[パブリッシュプレビュー])する必要があります。つまり、プロファイリングしたい場合には手慣れた「Ctrl+Enter/⌘+Enter」の代わりに、「F12/⌘+F12」を使うということです。

詳細データの分析の仕方

Scoutで確認できるデータの中には第三者にあまり見てほしくないデータも含まれますので、Scoutのプロファイリングは誰でも見れる「一般データ」とデフォルト設定では確認できない「詳細データ」に別れます。その区別は各SWFにある「詳細プロファイリング」のフラグによって行われるので、開発中にはそのフラグを設定し、一般公開前に外すことをお勧めします。フラグの設定方法は制作ツールによって異なります。

Flash Builder 4.7の場合

Flash Builderはバージョン4.7から詳細プロファイリングデータに対応しています。設定は以下の手順で行います。

  1. プロジェクトのプロパティを開く
  2. ActionScriptのコンパイラーを選択する
  3. 詳細なTelemetryを有効にする

Flash Professionalの場合

Flash Professional CS6にはまだ自動的にこのフラグを設定する方法がないため、Flashで作るアニメーションの詳細分析には別の手段が必要です。もっとも直接的な方法としては、こちらにあるPythonスクリプト(add-opt-in.py)が利用できます。

SWFの更新のたびに毎回スクリプトを実行するのが面倒な場合には、一度プリローダーを用意して、そのプリローダーのSWFにのみ詳細プロファイリングのフラグを設定できます。ScoutはFlashプレーヤーが最初に読み込まれるSWFの詳細フラグのみをチェックするので、プリローダーさえ詳細プロファイリングできれば、その後にロードされるコンテンツもプロファイリングできます。ただしコンテンツをライブアップする際にはプリローダーのフラグを外すのが望ましいでしょう。

タイムラインアニメーションのプロファイリングの仕方

タイムラインアニメーション(つまりDisplayListコンテンツ)のプロファイリングを行う基本的な手段としては、以下に紹介する2つの方法があります。

ヒートマップで負荷の全体像を把握する

タイムラインアニメーションの全体的なイメージを把握するには、まずはScoutの「DisplayList レンダリング」パネルで、メニューを「ヒートマップ」に設定するが良いでしょう。そしてタイムラインパネルでフレームを選択すると、Scoutが画面の各領域のレンダリング負荷を絵で表します。白く描画されている領域ほどより負荷が高いということです。ただし、負荷の表示は当フレームのパフォーマンスの相対的なものなので、白い描画が広い範囲を占めていたとしても、アニメーションが全体的に重いとは限りません。

ビットマップキャッシュ対応オブジェクトのプロファイリング

ビットマップキャッシュと言う機能をうまく利用すればパフォーマンス改善ができるケースが多くありますが、一歩間違うと逆効果になる危険もあります。そこで、その判断を行うためにScoutが役に立ちます。調査には、「DisplayList レンダリング」パネルでのメニューを「領域」に設定します。

そうすると、各フレームで再描画されたオブジェクトが色別で表示されます。

  • 緑色はキャッシュされていないベクターシェイプを表します。オブジェクトの中身がビットマップであっても、キャッシュされない限りはFlashがビットマップフィルのあるベクターシェイプとして扱います。このオブジェクトが再描画される際には必ずラスタライズされるので、中に詳細なベクターやグラデーションが入っている場合には、キャッシュされるように設定することで負荷を軽くできる可能性があります。
  • オレンジ色と水色はキャッシュ対応オブジェクトを表しています。これらのオブジェクトがラスタライズされる際にFlashがその画像をキャッシュして、次のフレームでオブジェクトの表示状態に変わりがなければ、再度ラスタライズをすることなくキャッシュされたものを画面に表示します。このうち、オレンジ色は当フレームで再ラスタライズされなかったオブジェクトを表しており、水色は当フレームでラスタライズの負荷が発生したオブジェクトを表しています。

話をまとめると、DisplayListコンテンツの「領域」を確認して、緑オブジェクトばかりだった場合には、ビットマップキャッシュが使われていないため、適切に利用すればパフォーマンス向上ができる可能性があるということです。そしてオレンジ色ばかりだったら、ビットマップキャッシュ機能でラスタライズの負荷が回避できていることがわかります。一方水色ばかりの場合、多くのオブジェクトがキャッシュされているにもかかわらず毎フレームラスタライズされているので、再ラスタライズの条件を避けるようにアニメーションを調整すればパフォーマンスの改善を期待できます。(再ラスタライズの条件についてはこちらを参照してください)。

ActionScriptのプロファイリングの仕方

ActionScriptのプロファイリングを行うには、主に3つの方法があります。まず、あるSWFのActionScriptが全体的にどんな処理をしているかを把握したい時には、気になるフレームを選択してActionScriptパネルのメニューの「上から下へ」を選択します。これでいわゆる「コールスタック」を確認できます。スタックの上はエントリーポイント(殆どの場合はイベントハンドラー)で、その下にどのファンクションがどのAPIを呼んだかが表示されます。厳密に言うと、ActionScriptパネルのデータはFlashプレーヤー内のサンプリングによって取得されているので、1フレームだけ選択した場合には呼ばれたAPIのすべてが表示されない可能性があります。したがって、スパン選択したほうが正確なデータを確認できます。

一方、特定の種類のスクリプト処理を確認したい場合には、フィルターを利用するのが良いでしょう。例えばDisplayList関係の処理を見るには、Scoutの概要パネルで[ActionScript]→[ビルトインパッケージ]→[flash.display]をクリックすると、そのパッケージ以外のデータがグレーアウトされます。このときflash.displayと言う項目が表示されない場合は、フレームパネルで選択されるスパンには当APIが呼ばれていないという意味です。フレーム時間のパネルもフィルタリングされるので、当パッケージのAPIがどのタイミングで呼ばれたかも一目で確認できます。

ActionScript処理のボトルネックを探したいケースも多いと思います。その場合にはActionScriptパネルのメニューを「下から上へ」に設定します。コールスタックが最後に呼ばれたAPIからエントリーポイントまでの順に表示され、「単体時間」でソートすると最も処理に時間かかったコードパスを確認できます。ActionScript処理をチューニングする必要がある場合には、時間がかかるパスから始めれば無駄なチューニングを避けることができます。ちなみに「コントリビューション」の値でそのコードパスのそれぞれのファンクションでかかった時間を確認できます。

Starlingフレームワークのコンテンツのプロファイリングの仕方

GPU対応の2D表示フレームワークStarling(詳細はこちら)を使うコンテンツをScoutで確認すれば、Starlingがうまく利用されているかどうかがある程度把握できます。Stage3D レンダリングパネルでコンテンツを確認すると、StarlingがGPU向けに実行したStage3Dコマンドがすべてパネルの右側に表示されます。リストの先頭にあるコマンドをクリックし、続けてスペースバーを押下すると、各drawTrianglesのコールが何を表示しているかをチェックできます。原則として、drawTrianglesのコールは少なければ少ない方がパフォーマンスが向上します。

コールを減らす方法について説明するには、まずStarlingの実装に言及する必要があります。Starlingは画面上の各オブジェクトを背景から順に表示します(いわゆる画家のアルゴリズムです)。そして複数オブジェクトのテクスチャーが全部同じTextureAtlasに入っている場合には、Starlingは1回のdrawTrianglesコールでそのオブジェクトをいっぺんに表示しようとします。このため、書き順の近いオブジェクトをできるだけ同じTextureAtlasにまとめる(つまり、背景のオブジェクトを全部同じTextureAtlasにまとめる)ことでStarlingのパフォーマンス向上が期待できます。


以上、Adobe Scoutの基本的なプロファイリングについて紹介しました。今後のプロジェクトでは早い段階からパフォーマンスを確認しながら負荷のボトルネックを最適化して、コンテンツがサクサクなめらかに動作するようにチャレンジしましょう!