Canvasを作成する
GameObject -> UI -> Canvas
Canvasオブジェクトを作成します(同時にEventSystemオブジェクトも作成されます)。
CanvasオブジェクトのCanvas ScalerコンポーネントのUI Scale Mode を Scale With Screen Size にします。
Screen Match Mode を X 360 Y 640 にします。
こうしておくと、アプリを実行するデバイスの画面の形(アスペクト比)に合わせてUIの表示範囲が変更されるようになります。
EventSystemオブジェクトもCanvasの子にしてしまいます。
もし、シーンにCanvasを複数を作成する場合はEventSystemは分けておきます。
UIをセーフエリアに対応しておく
セーフエリアとは簡単にいうとナビゲーションバーやノッチ(カメラやスピーカーのところ)など、そうした部分が被らないエリアのことです。
UIはこのセーフエリアだけに表示されるように設定しておかないと、ノッチに隠れて"HPが見えない!"とか"ボタンが押せない!"なんていうことになります。
SafeAreaオブジェクトを作る
Canvasの子としてSafeAreaオブジェクトを作成します。
(TextやImageなどで作って、RectTransform以外のコンポーネントを削除します)
RectTransformの設定を変更します。
SafeAriaControllerスクリプトを作成してアタッチします。
SafeAriaController.cs
Awakeメソッドを追加します。
セーフエリアを取得してRectTransformのサイズを合わせる処理です。
ここはあまり気にせずそのままこのコードを使いましょう。
private void Awake() { RectTransform panel = GetComponent<RectTransform>(); Rect area = Screen.safeArea; Vector2 anchorMin = area.position; Vector2 anchorMax = area.position + area.size; anchorMin.x /= Screen.width; anchorMin.y /= Screen.height; anchorMax.x /= Screen.width; anchorMax.y /= Screen.height; panel.anchorMin = anchorMin; panel.anchorMax = anchorMax; }
プレハブにしておく
SafeAriaオブジェクトを含めたCanvasオブジェクトをプレハブ化します。
今後、UIを作成するときはまずこのCanvasを配置し、UIのパーツはSafeAriaオブジェクトの子として配置していきます。
これでアプリを実行するデバイスのセーフエリアに合わせてUIの配置エリアが変更されるようになります。
なお、背景画面のあるUIを画面全体に表示したいときは、SafeAriaオブジェクトの外に出しておきます。
UIオブジェクトはパーツごとにプレハブを作っておく
UIオブジェクトとして作成するテキストやボタン、ウィンドウなどはそのつどオブジェクトを作成するのではなく、作ったUIオブジェクトをプレハブにしてマスター化しておきます。
UIオブジェクトを作成したいときはこのプレハブにしたマスターを使うようにします。
もしテキストのフォントやボタンの画像を変更したいとき、マスターを変更するとまとめて反映されるから便利です。
(もっと良い方法があるかもしれませんが...)
制作途中でUIのフォントを変えてみたり画像を変えてみたりすると、ゲームの雰囲気がガラッと変わってワクワクできます。