Unity Term Book
アニメーションと UI

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 が必要。

ハンズオン手順

1

基本の Canvas を作成

GameObject → UI → Canvas。Unity が Canvas + CanvasScaler + GraphicRaycaster + EventSystem を追加します。

2

CanvasScaler を設定

UI Scale Mode → Scale With Screen Size。Reference Resolution → 1920×1080(またはターゲット)。Match → 0.5。

3

RectTransform を使う

UI は Transform ではなく RectTransform を使います。Anchor プリセット(右上、全画面ストレッチ…)がレスポンシブレイアウトの鍵です。

4

複数 Canvas の Sorting Order

Canvas → Sort Order: 大きいほど手前。ツールチップはインベントリの上、ダイアログは HUD の上。

5

Canvas を分割してリバッチを減らす

Canvas ごとに別バッチになります。静的 UI(背景)を別 Canvas に置き、動的 UI が全体を汚さないようにします。

インタラクティブシミュレーター

CanvasScaler の動きを観察——画面サイズを変え、UI がどう縮尺されるか確認しましょう。

HP 75/100
⭐ 1280

Game Menu

map

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