Unityでパフォーマンスの良いUIを作る為のTips
•
36 likes•82,840 views
UnityのUIとはどういったシステムなのか、そして最適化する上で確認すべきポイントとTipsを紹介します。 --- このスライドは、「TECHxGAME COLLEGE#10 Unityでパフォーマンスの良いUIを作る為のTips」で紹介したスライドを少し手直ししたものとなります。 https://techxgamecollege.connpass.com/event/99824/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Unityでパフォーマンスの良いUIを作る為のTips
Similar to Unityでパフォーマンスの良いUIを作る為のTips (20)
More from Unity Technologies Japan K.K.
More from Unity Technologies Japan K.K. (20)
Unityでパフォーマンスの良いUIを作る為のTips
- 1. Unityでパフォーマンスの 良いUIを作るためのTips Tatsuhiko Yamamura @ Unity ver 1.1
- 2. お品書き • UnityのUIシステムおさらい • パフォーマンスの良いUIの為に注意すべきこと • バッチング • フィルレート • リビルド • その他
- 3. Unity UI
- 4. Unity UI • Unity UI、通称UGUI • Unity 4.6のタイミングで追加 • オープンソースで開発 https://bitbucket.org/Unity-Technologies/ui/ • 当時はNGUIというアセット（有料）を殆どの人が使用していた • NGUI開発者が中の人になって一緒に開発
- 5. uGUIの機能 • Text • Image • Raw Image • Button • Toggle • Slider • etc • Basic Layout • Layout Group • etc ビジュアル表現 インタラクション レイアウト uGUIには結構いろいろな機能がある
- 6. UGUIの機能 • 基本的なレイアウト • 自動レイアウト • ビジュアル表現 • インタラクション
- 7. UGUIの機能 • 基本的なレイアウト • 自動レイアウト • ビジュアル表現 • インタラクション
- 8. UGUIの機能 • 基本的なレイアウト • 自動レイアウト • ビジュアル表現 • インタラクション https://github.com/mob-sakai/UIEffect
- 9. UGUIの機能 • 基本的なレイアウト • 自動レイアウト • ビジュアル表現 • インタラクション
- 12. バッチング
- 21. バッチが可能な条件 • 同じCanvasに所属している • 同じMaterialを使用している • 同じTextureを参照している • 座標のZ値が同じ位置にあること • 同じマスクでクリップされていること（RectMask2Dの場合） バッチングの為には全ての条件を満たす必要がある
- 22. UI Profilerで観察 確認 方法バッチングが解けてるかどうかはUI Profilerで確認 （Unity 2017.1から）
- 32. バッチング対策 • バッチの条件を満たす • テクスチャをパックする • マスクの使用は抑える 対策
- 33. フィルレート
- 37. UI Profiler （Composite Overdraw) 確認 方法UI ProfilerのCompsiteOverdrawで確認できる。色が赤に濃いほど負荷が高い
- 39. オーバードロー対策 • 不要なUIを排除 • 重なる部分を出来るだけ削る • Sprite Meshを使用 • Fill Centerを外して、中央をくり抜く • オーバードローしても問題ないシェーダーを使う sprite mesh使用 通常のquad 対策
- 41. UIのリビルド （ジオメトリ）
- 44. 変化があれば再構築が必要 Canvas マテリアル テクスチャ UIのレイアウト バッファバッファ 更新 更新 更新 UIを動かすと以前のバッファを使い回せなくなるので、バッファを作り直す必要がある
- 45. バッファの再構築は即時ではない Update LateUpdate Post Rate Update SendWillRenderCanvasesSetDirty 変化した内容に応じて Dirtyフラグを付ける UIを再構築 Canvas バッファは即時反映ではなく、変化した物にDirtyフラグをセット、溜めて一括処理する
- 46. 再構築の条件 • UIをenable/disable • マテリアルが変化 • RectTransformのサイズが変化 • Transformの親が変化 UI再構築の条件は結構緩く、簡単に再構築が走る
- 52. CPU Profiler（Hierarchy）で OnDidApplyAnimationPropertiesや OnRectTransformDimensionsChangeで検索 追加表示項目を変更 Show Related Objects（関連オブジェクトを表示） UI再構築してそうなの一覧が表示される 確認 方法 UIのEventSystemでUIが動いている場合、誰がUIを動かしたのかを確認できる
- 54. Set Dirty Static Canvas Dynamic Canvas 違うCanvasなのでリビルド対象外 Canvasを分割 Canvasを分割することで、UIを動かしてもジオメトリの再構築範囲を限定できる
- 56. 動くUIはImageのSprite Meshを避ける use sprite mesh : enable 3.22ｍｓ use sprite mesh : disable 0.4ｍｓ対策 SpriteMeshはポリゴンが多く、ジオメトリ生成のコストが上がる。動かすUIには使わない方が無難
- 67. Dirty System Layout Group Element Element Element Element UI LayoutもDirtySystemを使用して実現している
- 69. Child Dirty System Layout Group Element Element Element リビルド申請 DirtyしたUIから親LayoutGroupへ、レイアウトの再構築を申請
- 77. • RectTransformに関連するものを操作しない （結果は変化しなくとも、セットするだけでリビルドが走る） • Layout Propertyに関連するものを操作しない • UI Element関連を操作しない • Mecanimのステートマシンに、上記の要素にアクセスする AnimationClipを入れない （Simple Animationなら多分OK） 対策
- 80. その他
- 82. その他 • Raycast Targetは可能な限り外す • World Space CameraのEvent Cameraにはカメラを登録する （無い場合はFindTag(“MainCamera”)を呼ばれる • Pixel Perfect設定は動かないカメラのみ設定する • テクスチャは画面解像度に合ったものを使う、 可能な限り圧縮する
- 83. その他 • UI Profilerはエディターのみ動作 • ＸＣｏｄｅ等のデバイス専用プロファイラーは 詳しい情報を収集できて便利 • 負荷を見るならビルドする Windows向けでも、多くのノイズを取り除いてくれる （実機で確認するのがベターではある）
- 84. まとめ
- 85. ポイント • 動かさなければ負荷は低い • 動かすなら最低限の影響に抑える • ドローコールとフィルレート、バッチング。 良いバランスを取る •気を抜くな！誰も信用するな！ プロファイラーを手放すな！
- 87. おしまい