学習記事一覧 · Unity基礎

【学習】UI（Canvas）の基本（Text、Image、Button）

これまでの学習では、

プレイヤーを動かした
プレハブで敵やアイテムを生成した

という形でゲームの動きを作ってきました。

しかし、スコアや残りライフ、ボタンなどの画面表示を学んでいません。

UI（ユーザーインターフェース）

という仕組みが必要です。

今回は Canvas と Text、Image、Button を使って、UI の基本を学びます。

今日学ぶこと

Canvas … UI を配置する土台
Text（TextMeshPro） … 文字を表示する
Image … 画像やアイコンを表示する
Button … クリックで処理を実行する
スクリプトから UI を更新する … スコア表示など

Canvas とは

Canvas は、UI を配置するための親オブジェクトです。

Hierarchy で UI → Canvas を選ぶと、Canvas と EventSystem が自動作成される
UI 要素（Text、Image、Button）は Canvas の子として配置する
Canvas Scaler で解像度に合わせた表示を設定できる

Text で文字を表示する

Canvas を右クリック → UI → Text - TextMeshPro を選択（初回は TMP のインポートが求められる場合あり）
または UI → Legacy → Text で従来の Text を使う
Text コンポーネントの Text 欄に表示したい文字を入力
Font Size、Color、Alignment で見た目を調整

スクリプトから Text を更新する

using UnityEngine;
using UnityEngine.UI;  // Legacy の Text の場合
// using TMPro;  // TextMeshPro の場合

public class ScoreManager : MonoBehaviour
{
    [SerializeField] private Text scoreText;  // Legacy
    // [SerializeField] private TextMeshProUGUI scoreText;  // TMP

    private int score = 0;

    public void AddScore(int points)
    {
        score += points;
        scoreText.text = "スコア: " + score;
    }
}

Inspector で scoreText に Text コンポーネントを持つオブジェクトを割り当てます。

Image で画像を表示する

Canvas を右クリック → UI → Image
Image コンポーネントの Source Image に Sprite を割り当て
Color で透明度や色を調整
アイコン、背景、ゲージなどに使う

Button でクリック処理をする

Canvas を右クリック → UI → Button
Button は子に Text を持ち、ボタンのラベルを表示する
Button コンポーネントの On Click () に、実行したいメソッドを登録する

スクリプトで登録する場合：

using UnityEngine.UI;

public class GameManager : MonoBehaviour
{
    [SerializeField] private Button startButton;

    void Start()
    {
        startButton.onClick.AddListener(OnStartClicked);
    }

    void OnStartClicked()
    {
        Debug.Log("スタートボタンが押されました");
    }
}

RectTransform で配置する

UI 要素は RectTransform を持ち、画面内での位置やサイズを設定します。

プロパティ	説明
Anchors	基準点（左上、中央など）
Pivot	オブジェクトの中心点
Pos X, Pos Y	位置
Width, Height	幅と高さ

画面の右上に固定する例：Anchors を右上に設定し、Pos X, Pos Y でオフセットを指定します。

完成コード例（スコア表示）

using UnityEngine;
using UnityEngine.UI;

public class ScoreManager : MonoBehaviour
{
    [SerializeField] private Text scoreText;
    private int score = 0;

    public void AddScore(int points)
    {
        score += points;
        scoreText.text = "スコア: " + score;
    }
}

他のスクリプトから FindObjectOfType<ScoreManager>().AddScore(10) のように呼び出せます。

重要ポイント

Canvas が UI の土台、Text / Image / Button が基本の UI 要素です。

Canvas … UI を配置する親オブジェクト
Text … 文字表示。スクリプトから .text で更新
Image … 画像表示。アイコンや背景に使う
Button … クリックで処理。On Click または onClick.AddListener
RectTransform … 画面内での位置・サイズを設定

発展アイデア

UI の基本が分かったら、次のステップです。

シーンの切り替え … ボタンでゲームシーンを読み込む
スコアとゲームオーバー … スコア表示とリトライボタン
スライダー … 体力ゲージの表示

UI は ゲームの情報を伝える ために欠かせません。次はシーンの切り替えを学びましょう。