Unity を検索

Accelerate Success シリーズ:「Unity UI Makeover」の質疑応答フォローアップ

2021年10月13日 カテゴリ: ゲーム | 8 分 で読めます
Person creating a game
Person creating a game
シェア

Unity の UI に関するウェビナーの質疑応答フォローアップ

9 月 9 日、Unity の Accelerate Solutions チームは、初めての Accelerate Success ウェビナー「The Unity UI makeover」を開催しました。このウェビナーでは、チームリーダーの Andrea と Sebastian がホストを務め、Unity のコンサルティングチームがどのようにしてデザインの悪い UI を最適化するのかを、参加者にライブで説明しました。 

まず、Unity の UI に何か問題があることを発見する方法に焦点を当て、アニメーション、リストビューとグリッドビュー、キャンバスの階層、ダイナミックレイアウト、オーバードロー、テクスチャとアセット、マスクと RectMasks2D、ドローコールのバッチ処理などに関するヒントとベストプラクティスを Andrea と Sebastian が交互に説明しました。 

今回のウェビナーに参加できなかった方で、オンデマンドの録画をご覧になりたい方は、こちらからご覧になれます。

このウェビナーは、これまでに行った中でも最も人気のものの 1 つとなり、さまざまなバックグラウンドを持つ方や、さまざまな規模のスタジオの方のご参加をいただき、参加者数は約 1,000 人となりました。ウェビナーでは素晴らしいやり取りがありましたが、残念ながらウェビナー中に寄せられた質問にすべて答えることはできませんでした。

Unity らしいやり方を貫くために、私たちが用意したリソースから、クリエイターの皆さんに最大限の価値を引き出していただきたいと考えています。そこで、私たちはウェビナーの録音を見直し、ウェビナー中に拾えなかったご質問を探して、この記事でそれらのご質問にお答えすることにしました。

Andrea、Sebastian、そして Accelerate Solutions Games チームのメンバーが、Accelerate Success のウェビナー「The Unity UI makeover」で寄せられた中から選ばれた 10 本の質問に、ここでお答えします。 

質問:UI Toolkit でトゥイーンのスクリプトを使うことはできるか

回答:UnityEngine.UIElements.Experimental パッケージには、トゥイーンおよびアニメーションのユーティリティが含まれており、これらはスタイルと値の両方を扱うことができます。外部スクリプト(DOTween など)からスタイル変更を行うことの主な欠点は、どんな小さな変更でも、毎フレームごとに UI レイアウト全体を再評価しなければならないということです。特に数値の精度の障壁をまたぐ変更や、float 型への、あるいは float 型からの型変換を引き起こす変更については、これが顕著です。

質問:特定のボタン機能をトリガーするには、アニメーターとスクリプトのどちらを使うのが良いか

回答:アニメーターを UI の近くに置かない方が良いでしょう。アニメーターは、一般的に UI で使用されるようなシンプルなアニメーションを効果的に処理するための「スケールダウン」がうまくできないだけでなく、アニメーションが再生されていないときでも、毎フレームごとにキャンバスをダーティにしたり、レイアウトを強制的に変更したりします。 

カスタムスクリプトやトゥイーンライブラリ、レガシーな Animation コンポーネントを使って UI アニメーションを行う方がはるかに効率的です。詳細については、Ian Dundore の Unite 2018 講演「Unity's Evolving Best Practices」のアニメーションに関するセクションをご覧ください。

質問:単一のキャンバスの場合、トランスフォームをまったく動かさなくても、兄弟の子はダーティに設定されるか

回答:ここでの「兄弟の子」が何を指すのかを完全には分かりかねるのですが、次のような状況を想定していると推定してお答えいたします。

A(キャンバス) |_ B(子の UI 要素) |_ C(他の子 UI 要素)

この状況だと、質問の意味は「B が動いたら、C はダーティに設定されるのか」ということになるかと思います。答えは、C が個別の要素としてダーティに設定されることはありませんが、A の子のいずれかが変更されてそれがダーティと判定されると、A はキャンバスのジオメトリ全体を再構築する、となります。C が動いても動かなくても、キャンバスの再構築のコストは同じです。

質問:なぜ空の rect が UI 階層がさかのぼってダーティになる問題(dirty bubble)を解決したのかそれは、レイアウトコンポーネントがないからというだけか。

回答:基本的にはそうです。レイアウトの更新は、LayoutElement と LayoutGroup のチェーンがある限り、階層をさかのぼって行われます。既存の UI では、空の RectTransform を追加することが、このようなチェーンを断ち切る最も簡単な方法となることがあります。 

もう 1 つの方法は、最初のレイアウトを行った後に LayoutElement と LayoutGroup コンポーネントを無効にすることです。たとえば、現在の画面サイズに UI を合わせるために最初だけ生成が必要な静的レイアウトの場合、レイアウトの更新も制限する方法です。 

詳細についてはこちらをご覧ください。

質問:空の rect を入れるソリューションの仕組みを教えてほしい

回答:レイアウト要素が変更された場合、Unity は変更された要素から階層をさかのぼり、LayoutGroup コンポーネントを持つゲームオブジェクトを探し続けます。 

Unity は、あるゲームオブジェクトが LayoutGroup を持ちながら、その親が LayoutGroup を持っていない場合、そのゲームオブジェクトを「ルート」の LayoutGroup とみなし、そのゲームオブジェクトとその子のすべてのレイアウトを再計算します。つまり、LayoutGroup コンポーネントを持たないゲームオブジェクトは、階層の中で「防火帯」のような役割を果たします。

質問:スプライトを UI としてインポートする際に、スプライトのインポート設定で「Generate Physics Shape」をオフにすることで、パフォーマンスの向上や、ビルドサイズの削減が期待できるか

回答:必要なければ Generate Physics Shape をオフにすべきです。これはゲーム中に Physics2D で駆動されるスプライトにのみ必要なもので、UI にはあまり意味がありません。

とはいえ、物理形状の生成がローディング時間や実行時のメモリのパフォーマンスにどれだけ影響するか、いくつかのテストプロジェクトを作成してみましたが、極端なテストケースでも差は感じられませんでしたので、あまり気にする必要はないでしょう。物理メッシュのジオメトリは非常に小さい(頂点位置の短いリストに過ぎない)ので、ビルドサイズや実行時のメモリに目立った影響を与えることはないでしょう。

質問:SpriteMesh を使うことのデメリットは何か

回答:SpriteMesh を使用すると、いくつかのオーバーヘッドと制限が発生します。

  • SpriteMesh を生成する必要があるため、エディターでの反復作業やビルドにかかる時間が若干長くなります。
  • SpriteMesh を保存する必要があるため、実行時のメモリ使用量とバイナリのビルドサイズが若干増加します。
  • 実行時にスクリプトを使って SpriteMesh で直接テクスチャを切り替えても、SpriteMesh は更新されません。この場合は、必ずスプライト全体を更新してください。
  • より多くの頂点とポリゴンをレンダリングする必要が生じます。

質問:インポーターの設定で、タイトなメッシュタイプと矩形のメッシュタイプの違いは何かタイトにキャッシュするのが良いのか、それとも「長方形」が良いのか。「use sprite mesh」にチェックを入れず、長方形を使うほうが良いのか

SpriteMesh は、スプライトをたくさんの透明なピクセルを持つ長方形としてではなく、実際のテクスチャの形状によく合ったメッシュとしてレンダリングすることで、オーバードローを減らします。トレードオフとして、SpriteMesh ではより多くの頂点やポリゴンを描画する必要があります。 

最近の GPU(モバイル GPU を含む)では、素のポリゴン数について制限を受けることはほとんどありませんが、細長い三角形を大量にレンダリングしなければならない場合は処理の負荷が厳しいものとなることもあり、残念ながら SpriteMesh の機能ではこれが多発してしまいます。

結局のところ、皆さんのプロジェクトにおいて、オーバードローと細長い三角形のどちらがマシかを判断する唯一の方法は、両方を試して GPU パフォーマンスをプロファイリングすることです。また、アプリケーションが CPU バウンドの場合、GPU 最適化ではフレームレートを改善できないことを覚えておいてください。一般的に、Unity UI は GPU よりも CPU に大きな負荷をかけます。そのため、実際にパフォーマンスを低下させている部分を確実に最適化し、プロファイリングツールで問題だと指摘されない限り、小さなことにこだわらないようにしましょう。

質問:複数のキャンバスを使うときのコツはあるか。

回答: 一般的には、UI の主な画面やパネルのそれぞれのルートにキャンバスを置くべきです。そうすれば、UI の他の部分でジオメトリの再構築を引き起こすことなく、それらの表示を独立に切り替えることができます。そして、画面やパネルごとに、いくつかのサブキャンバスを作り、更新頻度に応じて要素を分類するのが一般的には良いやり方だと言えるでしょう。 

たとえば、ダイアログボックスには、変化しない背景やフレーム要素を含むキャンバス、スクロールするテキストボックスやボタン(プレイヤーがテキストをスクロールしたりボタンを押したりしたときにのみ変化する)を含むキャンバス、そしてフレームごとに更新されるアニメーションスプライトやパーティクルエフェクト、プログレスバーを含むキャンバスの 3 つを用意するという形になります。

これは逆に言えば、キャンバスはバッチ処理をしないので、キャンバスが極端に多くなった場合(たとえば、すべての UI 要素をそれぞれ別のキャンバスに配置する場合)、ドローコールのバッチが大量に発生し、パフォーマンスが低下する可能性があります。キャンバスを使う数のバランスを取ることは、科学であると同時に芸術でもあります。また、変更した結果を確認するためには、やはりプロファイラーが役に立ちます。

Unity UI の最適化ガイドをチェックして、UI に関するヒントやコツをさらに学んでください。 

質問:モバイルでの複数のデバイスの解像度にはどのように対応するのか。Canvas Scaler で十分か新しい解像度の設定や、スマートフォンに搭載されるカメラの数が増えているため、UI のレイヤーをどのように重ねていくかがややわかりづらくなっている

回答:一般的には Canvas Scaler と Rect Transform のアンカーとストレッチの設定で十分ですが、これらで問題が解決しない場合は LayoutGroup が役立ちます。また、最初にレイアウトした後、UI 要素が動的に動作しない(サイズ変更、並び替え、要素の追加/削除などがない)場合は、LayoutGroup コンポーネントでの処理が終わった後に、LayoutGroup コンポーネントを無効にするスクリプトを記述することも検討してください。

モバイルで重要なのは、さまざまな解像度やアスペクト比に対応して UI をオーサリングしていることを忘れず、その制約に柔軟に対応できるように UI を設計することです。1 つのデバイスを選び、その特定の解像度に合わせてピクセル単位で完璧な UI を作ろうとするのではなく、様々なデバイスで UI をテストするべきです。なお、ゲームビューで異なる解像度を設定してテストしたり、デバイスシミュレーターを使って作業内容をすぐに確認することもできます。

ゲームが非常に幅広いスマートフォンに対応する必要がある場合、スプライトのテクスチャを高解像度で作成しなければならないことがあります(たとえば、iPhone 13 の 2532 x 1170 で見栄えが良くなるように)が、その大きなテクスチャが、より低スペックの機種(たとえば、iPhone 5 の 1136 x 640)では見栄えが悪くなったり、またそれがメモリの問題を引き起こしたりします。

このような場合、アセットバンドルのバリアントバリアントスプライトアトラスを使い、異なる解像度で UI スプライトをオーサリングし、実行時に適切なものをロードすることを検討する必要があります。すべての解像度に対応したスプライトを作成する必要はありません。2 〜 3 種類のバリエーションがあれば、現在サポートされているほとんどすべてのデバイスをカバーするには十分でしょう。

ここでは、異なる解像度への対応について、いくつかのフォーラムのスレッドをご紹介します。

Understanding Canvas Scaler Screen Match Mode and Reference Resolution(Canvas Scaler の Screen Match Mode と基準解像度について)

What Reference Resolution and Game View Settings Should I Use?(どの基準解像度とゲームビュー設定を使うべきか)

Accelerate Solutions Games チームが、ゲームの UI を最適化したり、ゲーム開発中に遭遇する可能性のある問題を解決するためにどのような支援ができるかについての詳細は、Unity のウェブページをご覧ください。 Accelerate Success によるウェビナー「Unity UI makeover」は、オンデマンドでご覧になれます。こちら からご視聴ください。 

 

2021年10月13日 カテゴリ: ゲーム | 8 分 で読めます