Unity における UI の基本

1. 始めよう

Unity でユーザーインターフェース（UI）のゲームオブジェクトを扱う場合、Anchor ポイントと Pivot ポイントを使って、画面上での UI イメージの表示方法をカスタマイズすることができます。背景画像やボタン、テキストなどの UI 要素は、ゲーム開始時に表示されるメニューの中に表示されるのが一般的です。キャンバス内の設定された位置に合わせて拡大/縮小するように設定できます。さらに、ウィンドウサイズやアスペクト比の変化に合わせて、UI 要素の配置を調整することができます。これらの UI 機能により、開発者は複数の、あるいは様々なデバイスのスクリーンサイズに合わせてコンテンツを作成することができ、また、Game ビュー内で UI 要素を視覚的にフレーム化して整理することもできます。

Unity で UI 要素を使用するには、まず既存のプロジェクトを開くか、Unity Hub のテンプレートを使って新しいプロジェクトを作成する必要があります。このチュートリアルでは、Universal Render Pipeline (URP) プロジェクトで新しく作成された空のシーンでセットアップを行います。ここでは、背景画像、タイトル、いくつかのメニューボタンを備えたシンプルなメニューキャンバス画面を作成します。まず始めに、新しい URP プロジェクトを作成します。

1. Unity Hub から New ボタンを選択します。Create a new project with Unity ポップアップウィンドウの Project Name フィールドに、プロジェクトの名前を入力します。次に、Templates メニューから Universal Render Pipeline ボタンを選択して、Create ボタンを選択します。

Unity Hub から新規プロジェクトを作成

新しく作成されたプロジェクトが開き、デフォルトのサンプルシーンが表示されます。

2. 上部メニューのドロップダウンから、File > New Scene と選択し、空白のシーンを作成します。

3. 上部メニューのドロップダウンから、File > Save As と選択し、シーンに名前を付けます。名前を入力して、Save ボタンを選択します。

これで、UI Background Image を追加する準備が整いました。

4. 上部メニューのドロップダウンから、GameObject > UI > Image の順に選択して、新しい画像をシーンに追加します。

新たに作成した UI Image

新しい画像を追加すると、新しい Canvas と EventSystem ゲームオブジェクトも自動的に追加され、Hierarchy ウィンドウに表示されるようになりました。新しく作成された画像は、Canvas ゲームオブジェクトの中に配置されます。シーン内の白い枠は、Game ウィンドウの表示範囲を表しています。

5. UI Image のサイズや位置を設定するには、左上のツールバーで Rect Tool を選択します。また、UI 要素を操作する際には、左上のツールバーの Toggle Tool Handle Rotation ボタンが Pivot に、Toggle Tool Handle Rotation ボタンが Local に設定されていることを確認してください。

ツールバーの Rect Tool を選択し、Toggle Tool Handle Position and Rotation を Pivot と Local に設定した場合

6. UI Image をフレームいっぱいに拡大します。Rect Tool で画像のサイズを変更するには、Scene ウィンドウの画像の角にある青いドットのアイコンを選択し、図形をドラッグして幅と高さを大きくし、Game ウィンドウに合わせてフレームを埋めるようにサイズを変更します。Rect Tool を使って画像のサイズをドラッグすると、エッジがフレームにスナップします。また、Inspector の Rect Transform コンポーネントの Pos X と Pos Y の値、および Width と Height の値を変更して、UI Image の具体的な形とサイズを調整することもできます。

画面サイズ、Unity エディターのシーンと Game ウィンドウサイズによっては、このチュートリアルで表示されている寸法が正確に一致しない場合がありますので注意が必要です。チュートリアルの例は、おおよその目安とし、必要に応じて寸法を調整してください。

画像のサイズ変更

なお、Game ウィンドウのサイズを変更すると、長方形の外枠が変化します。この時点で Game ウィンドウのサイズを調整した場合、フレームもプロポーションに合わせて更新されますが、画像は Game ビューには表示されなくなります。これについては次のステップで説明します。

UI Image が Game ウィンドウのサイズに合わせてフィットするようにするには、画像の Anchor ポイントを調整する必要があります。Anchor ポイントは、4 つの三角形がつながって、白い X アイコンになっています。ただし、現在のところ、このアイコンは、画像の白い背景の上では見づらいものとなっています。まず、Anchor ポイントを見やすくするために、画像の色を濃くする必要があります。

7. 画像の色を変更するには、Inspector ウィンドウの Image コンポーネント内の Color フィールドを選択し、Color ポップアップウィンドウから濃い色を選択します。

背景画像の色の設定

これで、UI Image の Anchor ポイントがわかりやすくなりました。4 つの三角形が X を形成するアイコンで表現されています。

8. ここで、各アンカーポイントの四隅を UI Image のフレームに合わせて移動させる必要があります。 まず、画像のアンカーポイントの左上の三角形を選択し、その位置を画像のフレームの左上に向かってドラッグします。

UI Image の左上のアンカーポイントのフレーミング

9. 右下のアンカーポイントを選択し、画像の形状の右下隅にドラッグして、UI Image の長方形のフレーミングを完成させます。

UI Image の右下のアンカーポイントのフレーミング

10. Game ウィンドウのサイズを大きくしたり小さくしたりして、Game ウィンドウ内の UI Image の比率をテストします。Game ウィンドウのサイズやアスペクト比に関わらず、画像の位置は中央に配置され、サイズは Game ウィンドウに比例していることが確認できるはずです。

UI Image のサイズは、Game ウィンドウのサイズに比例

2. メニュータイトルの追加

ここでは、メニューからキャンバススクリーンにタイトルを追加するなど、UI Text 要素を扱います。

1. トップメニューのドロップダウンから、GameObject > UI > Text の順に選択して、シーンに新しいテキスト要素を追加します。先に追加した UI Image と同様に、新しく作成したテキスト要素も、Hierarchy 内の Canvas ゲームオブジェクト内に配置します。

2. Rect Tool を使って、UI Text 要素の境界線を拡大します。Inspector の Rect Transform コンポーネントで、Width を 350 に、Height を 100 に設定します。

3. Pos Y を 200 に設定して、UI Text をフレームの上部に近づけます。

4. Inspector で Text コンポーネントを展開し、Text フィールドにカスタムメニューのタイトルを設定します。この例では「Game Jam」と設定しています。Font Size を 70 に設定します。Paragraph の Alignment を中央揃えのアイコンに設定します。最後に、Color フィールドを選択し、Color ポップアップウィンドウからカスタムカラーを選択して、UI Text の色を選びます。

カスタムの UI Text

現在、Game ウィンドウのサイズを変更すると、UI Text 要素は中央に配置されません。そこで、UI アンカーを使用して、テキストを中央に配置し、Game ウィンドウの大きさに合わせて配置します。今回は、Anchor Presets を利用して処理を高速化します。

5. Inspector の Anchor Presets ボタンを選択して、 Anchor Presets オプションを開きます。上部中央の Anchor Preset に対応するボタンを選択します。

Anchor Presets ボタン

これで、Game ウィンドウのサイズを変更しても、UI Text 要素はキャンバス画面の上部中央に比例して表示されます。ただし、Game ウィンド ウのサイズを変更しても、UI Text のフォントサイズは一定に保たれます。

UI Text 要素のサイズは、キャンバス画面の上部中央に配置される

6. Inspector の Anchor Presets ボタンを選択して、 Anchor Presets のオプションを開きます。 水平/垂直軸上が top-stretch にある Anchor Preset に対応するボタンを選択します。

水平/垂直軸上が top-stretch に設定された Anchor Presets ボタン

現在、Game ウィンドウのサイズを変更しても、UI Text 要素の Rect Transform の境界形状のみが変更され、テキストサイズ自体は変更されません。

UI Text 要素のサイズは、キャンバス画面の上部中央に配置される

7. Game ウィンドウのサイズに合わせてテキストサイズも変化するようにするには、Best Fit のチェックボックスを有効にします。

Best Fit のチェックボックスを有効にする

これで、Game ビューウィンドウのサイズを変更しても、UI Text 要素はキャンバス画面の上部中央に比例し、Game ビューウィンドウのサイズに比例してフォントサイズが拡大/縮小されます。

UI Text 要素は、キャンバス画面の中央上部に配置されたままスケールもサイズ変更される

3. UI ボタンのセットアップ

ここでは、いくつかの UI ボタンを追加し、その外観をカスタマイズし、Anchor ポイントと Pivot ポイントを微調整します。

1. 上部メニューのドロップダウンから、GameObject > UI > Button の順に選択し、シーンに新しいボタン要素を追加します。

2. Inspector で Rect Transform コンポーネントの Width を 250 に、Height を 100 に設定して、UI Button のサイズを大きくします。

UI ボタンの拡大

3. ここでは、UI ボタンの配色をカスタマイズします。Inspector で Button コンポーネントの左にある三角形を選択して、ボタンのプロパティを展開します。次に、Normal Color フィールドを選択し、 Color ポップアップウィンドウから色を選択します。Play モードでのプレビュー時に UI ボタンがよりインタラクティブになるように、Highlighted Color、Pressed Color、Selected Color の各フィールドにカスタムカラーを選択してください。

UI ボタンの配色のカスタマイズ

4. UI ボタンのテキストをカスタマイズするには、まず Hierarchy の Button ゲームオブジェクトの中の Text ゲームオブジェクトを選択し、Inspector の Text コンポーネントの中の Text フィールドにカスタムテキストを入力します。この例では、テキストを「Start」に設定しています。Font Size を 60 にします。最後に、Best Fit チェックボックスを有効にします。

UI ボタンのテキストとフォントサイズのカスタマイズ

5. Hierarchy で Button ゲームオブジェクトを選択した状態で、Inspector の Anchor Presets ボタンを選択して、Anchor Presets のオプションを開きます。今回は、Anchor Preset を設定する際に、Button の位置も設定します。キーボードの Alt キーを押しながら、水平/垂直軸上が middle-stretch にあるボタン Anchor Preset を選択します。

UI Button の Anchor Preset を middle-stretch に設定

UI ボタンは、シーン内で複製することも、メニューに必要な数だけ新しい UI ボタンを作成してカスタマイズすることもできます。次に、特定の UI 要素を回転させるために、Pivot ポイントを使用します。Pivot ポイントで回転角度を指定した UI ボタンを作成します。

6. UI ボタンの矩形ツールが選択されている状態で、アイコンをクリックして新しい位置にドラッグするか、Inspector の X および Y Pivot フィールドに Pivot 値を設定して、青い円で示された Pivot ポイントを移動します。ボタンを回転させるには、Inspector で Rotation の Z 軸を 10 に設定し、Pivot ポイントに比例した角度でボタンを回転させます。

UI Button の Pivot ポイントと Rotation (回転) の調整

UI Button の Rotation (回転) と Pivot ポイントの調整

7. Hierarchyで例の UI Button ゲームオブジェクトを選択した状態で、Inspector の Anchor Presets ボタンを選択して、Anchor Presets のオプションを開きます。今回は、Anchor Preset を設定する際に、Button の Pivot ポイントも設定します。キーボードの Shift キーを押しながら、左下の Anchor Preset ボタンを選択します。Anchor Preset 内の別のオプションとして、Alt キーを押しながら左下の Anchor Preset ボタンを選択すると、ボタンの位置が設定されます。

Reset UI Button の Anchor Preset を bottom-left に設定し、Shift キーを押しながら Pivot ポイントも設定する

4. Canvas Scaler の使用

Canvas ゲームオブジェクトは、初めて UI 要素を追加する際に、自動的にシーンに追加されます。追加の UI 要素は、Canvas ゲームオブジェクトの中に追加されます。また、Canvas Scaler コンポーネントを使って、UI 要素のスケーリングを調整することができます。

1. Hierarchy ウィンドウで Canvas ゲームオブジェクトを選択した状態で、Inspector で Canvas Scaler コンポーネントの左にある三角形を選択して、そのプロパティを展開します。

Canvas Scaler コンポーネント

これまでは、Game ウィンドウのサイズを変更すると、Canvas Scaler コンポーネントの UI Scale Mode が Constant Pixel Size に設定されていました。これは、Free Aspect 比設定で Game ウィンドウをスケーリングする際に役立ちました。Canvas Scaler を使用すると、カスタムモバイルデバイスの画面解像度を特にターゲットにします。

2. UI Scale Mode フィールドのドロップダウンから Scale with Screen Size を選択します。Reference Resolution の X と Y のフィールドにカスタム値を入力します。例えば、中型のモバイルデバイスの画面解像度に近づけるには、X=1440、Y=2960 とします。

UI Scale Mode が Scale With Screen Size に設定されている

Game ビューウィンドウのサイズを変更しても、UI 要素はモバイルデバイスの画面幅の寸法に合わせて表示されます。

3. モバイル端末の画面に合わせて UI 要素の幅や高さを調整するには、Match スライダーをドラッグします。例えば、モバイル画面の高さ方向の解像度に UI 要素を合わせるには、Match スライダーを Height にドラッグするか、値を 1 に設定します。

Canvas Scaler コンポーネントの Match スライダーを Height に設定

5. 次のステップ

Anchor ポイントと Pivot ポイントを UI 要素に使用し、Canvas Scaler と組み合わせることで、様々なスクリーンサイズやデバイスでの UI イメージの表示をカスタマイズすることができます。背景画像、ボタン、テキストなどの UI 要素を細かく調整し、整理することで、プロ品質のメニューやその他のユーザーインターフェース体験を実現します。