複数の解像度のためのUI設計

現代のゲームやアプリケーションは,多くの場合,異なる画面解像度を幅広くサポートする必要があり,特にUIのレイアウトはそれに適応できるようにする必要があります。UnityのUIシステムは,この目的のための様々なツールを含み,様々な方法で組み込むことができます。

このハウツーの中で,簡単なケーススタディを使用し,見て,それとの関連で異なるツールを比較します。私達のケーススタディでは,画面の隅に3つのボタンがあり,様々な解像度にこのレイアウトを適応させることを目標にしています。

このハウツーで4つの画面解像度を検討してみましょう。: Phone HD ポートレート（640×960）とランドスケープ（960×640）,Phone SD（320×480）とランドスケープ（480×320）。このレイアウトは,Phone HDポートレート解像度で最初のセットアップです。

アンカーを使用して,異なるアスペクト比に適応

UI要素は親矩形の中心にデフォルトで固定されてます。これは中心からオフセットを一定に保っていることを意味します。

解像度をこのセットアップでランドスケープの縦横比に変更すると,ボタンは,もはや画面の矩形の内側にないかもしれません。

スクリーンの内側にボタンを維持する一つの方法は,ボタンの位置を画面のそれぞれのコーナーに接続されるようにレイアウトを変更することです。左上のボタンのアンカーは,インスペクタのアンカープリセットドロップダウンを使用するか,またはシーンビューの中で三角アンカーハンドルをドラッグすることで左上隅に設定することができます。現在の画面解像度がゲームのビューに設定されている間は,ボタンの配置が正しく見えるように最初に設計されたレイアウトで行うのが最善です。（アンカーの詳細については,[UI Basic Layout]（）ページを参照してください。）同様に,左下,右下のボタンのアンカーはそれぞれ,左下隅と右下隅に設定することができます。

ボタンがそれぞれの四隅に固定された後,異なるアスペクト比の解像度を変更する場合,ボタンは四隅に追従します。

画面サイズを大きい解像度または小さい解像度に変更すると,ボタンもそれぞれのコーナーに固定されたままになります。しかし,ピクセル単位で指定されるように,ボタンは元のサイズを維持しているため,画面に対する割合が変わることがあります。これは,あなたの望むレイアウトを方法に応じて異なる解像度の画面で動作させるためには望ましくない場合もあります。

このハウツーの中で,Phone SDのポートレートやランドスケープの小さい解像度では物理的に小さくなっている画面に対応していないことを私たちはわかっています。むしろ,低い画素密度の画面にちょうどよいです。これらの低画素の画面上のボタンは,高密度の画面上より大きく表示されません - 同じサイズで表示されます。

これは画面が小さくなると,ボタンが同じ割合だけ小さくなることを意味し,ボタンのスケールは画面サイズに従うようにします。Reference Resolutionコンポーネントではこれを助けることできます。

画面サイズとのスケーリング

Canvas Scalerコンポーネントは,ルートCanvasに追加することができます - その上のCanvasコンポーネントと一緒のゲームオブジェクトや,その子のすべてのUI要素にもです。

キャンバススケーラーコンポーネントで,あなたはScale With Screen SizeにそのUI Scale Mode を設定することができます。このスケールモードを使用すると,リファレンスとして使用する解像度を指定することができます。現在の画面解像度が,この基準解像度よりも小さいか大きい場合,キャンバスのスケール係数は,それに応じて設定されます。従って,すべてのUI要素は画面解像度と一緒にスケールアップまたはダウンされます。

私たちのケースでは,Reference Resolutionで640×960のPhone HD ランドスケープの解像度に設定してください。さて,画面解像度を320×480のPhone SD ポートレート解像度に設定する際,フル解像度と同じ比で表示されますので,全体のレイアウトが縮小されます。すべてがスケールダウンされます。：ボタンの大きさ,画面の端への距離,ボタングラフィックス,およびテキスト要素等。これはレイアウトがPhone HDポートレートのように,Phone SDポートレートの解像度で同じように表示されることを意味します。：唯一低い画素密度です。

意識してください：Reference Resolutionコンポーネントを追加した後,レイアウトが他のアスペクト比でどのように見えるかを確認することが重要です。Phone HDランドスケープ解像度に戻す設定することで,必要以上に（そして使用されるために）今,ボタンが大きく表示されていることがわかります。

ランドスケープの縦横比が大きいボタンの理由は,Reference Resolutionの設定に由来します。デフォルトでは,幅または基準解像度の幅と現在の解像度とを比較し,その結果,すべてのデータをスケーリングするスケールファクタとして使用されます。現在の960×640ランドスケープの解像度は640×960のポートレート解像度と比較すると1.5倍大きい幅を持っているので,レイアウトも1.5倍にスケールアップされます。

そのコンポーネントは,Matchと呼ぶプロパティを持ち,0（幅）,1（高さ）またはその間の値にできます。デフォルトでは,基準解像度の幅と現在の画面の幅とを比較する0に設定しています。

Matchプロパティが代わりに0.5に設定されている場合,基準幅に対する現在の幅と基準高さに対する現在の高さの両方を比較し,両者の間での倍率を選択します。この場合,ランドスケープの解像度は1.5倍広いが,1.5倍短く,この二つのファクタで,最終的なスケールファクタ「1」を生成します。これは,ボタンが元のサイズを維持することを意味します。

この時点で,レイアウトは適切なアンカーの組み合わせとキャンバス上の Reference Resolution コンポーネントを使用して,4つすべての画面解像度をサポートしていることになります。

異なる画面サイズに関するUI要素を拡張するさまざまな方法の詳細については,Canvas Scalerのリファレンスページを参照してください。