デジタルコンテンツの制作

nekosuko.jp

RPG レッスン

【05】UIのパーツを作ってみる|RPGを作ってみる

更新日:

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のフォントを変えてみたり画像を変えてみたりすると、ゲームの雰囲気がガラッと変わってワクワクできます。

リンク

-RPG, レッスン

Copyright© nekosuko.jp , 2021 All Rights Reserved.