UI Systems
Unity の UI はクラシックな Unity UI(uGUI)と UI Toolkit、さらに Canvas・CanvasScaler・EventSystem から成ります。メニュー、HUD、画面レイアウトの土台を学び、解像度差やクリック判定の落とし穴も防げます。図解とシミュレーターで構成を確認できます。
想像してみてください...
Canvas は画面の前に置いた白紙——すべての UI 要素がここに生きます。CanvasScaler はその紙を解像度が変わっても縮尺する定規です(1080p からスマホまで)。EventSystem はどの要素がクリックされたかを決める仮想マウスです。3 つのどれかが欠けると、表示されない・縮尺されない・クリックできない UI になります。
概念の詳細
Canvas はすべての UI のルートコンテナです。レンダーモードは 3 つ:
Screen Space - Overlay
(常にゲームの最前面、カメラ非依存)、
Screen Space - Camera
(特定カメラ経由で描画、深度/ポストプロセスの影響あり)、
World Space
(シーン内の 3D オブジェクト——ワールド内スクリーン、キャラ上の HP バー)。
CanvasScaler がマルチ解像度を解決します。
Scale With Screen Size
が定番: Reference Resolution(1920×1080)でデザインし、スケーラーが実画面に合わせます。Match(0=幅、1=高さ、0.5=平均)で優先軸を選びます。
EventSystem はすべての UI 入力(クリック、タッチ、ゲームパッド)を扱うシングルトンです。Raycaster(Canvas 上の GraphicRaycaster、World Space 用 PhysicsRaycaster)でホバー/選択要素を見つけます。シーンに EventSystem はちょうど 1 つ——複数あると衝突します。
Unity 2021+ では UI Toolkit が新しいスタックで、Web の考え方(UXML レイアウト、USS スタイリング=HTML/CSS 風)に基づきます。複雑な UI では uGUI より速い一方、3D ゲームプレイとの統合は難しめです。ランタイムのゲーム内 UI では今も uGUI が一般的です。
標準的な Unity UI 階層
uGUI (Scene Hierarchy)
📁 Canvas(+ CanvasScaler)
├ 📁 Panel
├ Image(background)
├ Text (TMP)
└ Button
└ Text (TMP)
└ 📁 HUD
├ Slider(health)
└ RawImage(minimap)
📁 EventSystem
Render Modes
Screen Space - Overlay
UI は常にシーンの上に描画。HUD、インベントリ、メインメニュー。カメラの影響を受けない。
Screen Space - Camera
特定の Camera 経由で描画。UI にポストプロセス(blur、bloom)をかけられる。
World Space
UI は 3D オブジェクト。HP バー、ゲーム内画面、VR UI。EventSystem + camera raycast が必要。
ハンズオン手順
基本の Canvas を作成
GameObject → UI → Canvas。Unity が Canvas + CanvasScaler + GraphicRaycaster + EventSystem を追加します。
CanvasScaler を設定
UI Scale Mode → Scale With Screen Size。Reference Resolution → 1920×1080(またはターゲット)。Match → 0.5。
RectTransform を使う
UI は Transform ではなく RectTransform を使います。Anchor プリセット(右上、全画面ストレッチ…)がレスポンシブレイアウトの鍵です。
複数 Canvas の Sorting Order
Canvas → Sort Order: 大きいほど手前。ツールチップはインベントリの上、ダイアログは HUD の上。
Canvas を分割してリバッチを減らす
Canvas ごとに別バッチになります。静的 UI(背景)を別 Canvas に置き、動的 UI が全体を汚さないようにします。
インタラクティブシミュレーター
CanvasScaler の動きを観察——画面サイズを変え、UI がどう縮尺されるか確認しましょう。
Game Menu
Scale: 1.00 | Reference: 1920×1080
コード例
基本スクリプトから UI を更新——HP バー、スコア文字、パネルの表示/非表示。
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public class HUDController : MonoBehaviour
{
[Header("Health")]
public Slider healthSlider;
public TMP_Text healthText;
[Header("Score")]
public TMP_Text scoreText;
[Header("Panels")]
public GameObject menuPanel;
public GameObject hudPanel;
public void UpdateHealth(float current, float max)
{
healthSlider.value = current / max;
healthText.text = $"{Mathf.RoundToInt(current)}/{Mathf.RoundToInt(max)}";
// Tint when HP is low
healthSlider.fillRect.GetComponent<Image>().color =
current / max < 0.3f ? Color.red : Color.green;
}
public void ShowMenu(bool show)
{
menuPanel.SetActive(show);
hudPanel.SetActive(!show);
Time.timeScale = show ? 0f : 1f; // Pause while the menu is open
}
public void UpdateScore(int score)
{
scoreText.text = score.ToString("N0"); // "1,280" format
}
}コード例
上級World Space UI——常にカメラを向くキャラ上の HP バー。
using UnityEngine;
using UnityEngine.UI;
// Attach to a World Space Canvas — HP bar over a character
public class WorldSpaceHealthBar : MonoBehaviour
{
public Slider slider;
public Vector3 offset = new Vector3(0, 2.5f, 0);
public Transform target;
Camera cam;
void Start() => cam = Camera.main;
void LateUpdate()
{
if (target == null) return;
// Follow the character + offset
transform.position = target.position + offset;
// Always face the camera (billboard)
transform.LookAt(transform.position + cam.transform.rotation * Vector3.forward,
cam.transform.rotation * Vector3.up);
}
public void SetHealth(float current, float max)
{
slider.value = current / max;
// Hide when HP is full
gameObject.SetActive(current < max);
}
}📌 要点
- ▸Canvas Overlay: カメラの影響を受けない
- ▸CanvasScaler: Scale With Screen Size → Reference 1920×1080
- ▸EventSystem はシーンに 1 つだけ——増やすと不具合
- ▸静的/動的 Canvas を分けて高価なリバッチを避ける
- ▸World Space UI は LateUpdate で物理後に追従
⚠️ よくあるミス
❌ Button がクリックを受け取らない
EventSystem がない、または GraphicRaycaster が無効
✅ EventSystem があることと、Canvas に GraphicRaycaster があることを確認
❌ PC とスマホで UI の見た目が違う
CanvasScaler が未設定
✅ Scale With Screen Size + Reference 1920×1080 + Match 0.5