🙌

ゲーム開発で必須なUnity×C#×コンポーネント:基礎から抑える【UI】の重要ポイント

2025/01/15に公開

Unity×C#で作るゲームのUI:基礎から抑える重要ポイント

ゲーム開発で見落とせない要素のひとつが“UI(ユーザーインターフェース)”です。スコア表示やライフバー、メニュー画面、ボタン操作など、プレイヤーがゲームとやり取りをするための仕組みはUIによって実現されます。Unityには標準で便利なUIコンポーネントがそろっており、それらを効率よく組み合わせることで、わかりやすく魅力的なUIを作ることができます。本記事では、UIシステムの基本から、C#スクリプトを用いてUIを動的に制御する方法まで解説します。

ゲーム開発でUIに悩むポイント

表示が崩れてユーザーに伝わらない

ゲームをPCやスマホ、タブレットなど複数プラットフォームで展開すると、UIが画面サイズや解像度に応じて崩れがちです。例えばスマホ横画面で表示したらボタンが見切れてしまうなど、レイアウトトラブルが発生してしまいがち。

UIイベントの処理が複雑になりがち

「ボタンを押したらシーン移動」「メニューを開いたらBGMを下げる」「テキストにリアルタイムでスコアを反映」など、頻繁に行われる処理をどこで管理すべきか迷ってしまう。スクリプトが増えるほど、イベントの関連性が分かりづらくなるという問題もあります。

視認性やデザイン性の不足

文字サイズや色使いを適当に決めてしまうと、プレイヤーが情報を素早く読み取れなくなり、操作性も下がってしまいます。美しいグラフィックがあるゲームでも、UIのクオリティが低いと全体の印象が大きく損なわれてしまうわけです。

UnityのUIシステム:まずはCanvasとRectTransformを理解しよう

Canvasとは?

Canvasは、UI要素を描画するためのレイヤーのような存在です。画面上に配置されるUI(ボタンやテキストなど)は、すべてCanvasの子要素として描画されます。

  • Render Mode には以下の3種類がある
    • Screen Space - Overlay
      → 画面上にUIが直接描画される。最も基本的なモード
    • Screen Space - Camera
      → 指定したカメラの空間にUIを配置し、遠近感を持たせる場合に使用
    • World Space
      → シーン内のオブジェクトとしてUIを配置し、3D空間で扱いたいときに有効

RectTransformでUIの位置とサイズを管理

一般的なゲームオブジェクトのTransformと異なり、UIオブジェクトはRectTransformを使って位置やサイズを指定します。RectTransformにはアンカーやピボットといった概念があり、画面のどの位置に、どのようなスケールで表示するかを柔軟に設定できるのが特徴です。

  • アンカー(Anchor) : 親オブジェクト(Canvasなど)に対して、UI要素の位置をどこに固定するか
  • ピボット(Pivot) : UI要素の回転や拡大縮小の基準点
  • サイズ調整 : "Width" と "Height" で幅と高さを数値管理、あるいはアンカーに依存した相対的サイズを持たせる

アンカーを上手に設定すれば、解像度が変わってもUIの相対位置がずれにくくなるため、マルチプラットフォーム対応が格段に楽になります。

基本UIコンポーネントと便利機能

Text / TextMeshPro

文字表示に使われるコンポーネントです。Unityの標準 Text コンポーネントはシンプルですが、フォント描画がやや粗いこともあり、TextMeshPro が推奨される場合が多いです。TextMeshProは拡大・縮小しても文字が鮮明に表示され、アウトラインや影などリッチな装飾が可能となります。

テキストの動的更新

using UnityEngine;
using TMPro;

public class ScoreDisplay : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    private int score;

    void Update()
    {
        // ダミーでスコアをインクリメント
        score += 1;
        scoreText.text = "Score: " + score.ToString();
    }
}

scoreText.text に文字列を設定するだけで、リアルタイムにスコアを更新できます。

Image

UIの背景やアイコン表示などに使われるコンポーネントです。任意のスプライトを設定することで、ボタンやパネルの見た目をカスタマイズできます。たとえば、HealthバーのゲージなどもImageコンポーネントを応用することが多いです。

  • Fill Method(Filledタイプ)を使うと、円形のゲージや横方向に伸びるゲージなどが簡単に作れる
  • 色の変更や透明度の調整も可能

Button

  • ユーザーからのクリックイベントを受け取る最も基本的なUI
  • OnClick() に登録したメソッドが呼ばれる
using UnityEngine;
using UnityEngine.UI;

public class ButtonHandler : MonoBehaviour
{
    public Button myButton;

    void Start()
    {
        myButton.onClick.AddListener(OnMyButtonClicked);
    }

    void OnMyButtonClicked()
    {
        Debug.Log("Button clicked!");
    }
}

Toggle

  • On/Offのスイッチのように機能し、onValueChanged イベントを通じて状態が変化したことを検知できます
  • チェックボックスや、サウンドOn/Offボタンなどで活用
using UnityEngine;
using UnityEngine.UI;

public class ToggleHandler : MonoBehaviour
{
    public Toggle myToggle;

    void Start()
    {
        // トグルが切り替わったときに OnToggleValueChanged を呼ぶ
        myToggle.onValueChanged.AddListener(OnToggleValueChanged);
    }

    void OnToggleValueChanged(bool isOn)
    {
        Debug.Log("Toggle is now: " + (isOn ? "ON" : "OFF"));
    }
}

Slider

  • 値の範囲を可変的に設定し、音量調整やキャラクターステータスの調整などに利用
  • onValueChanged を使ってスライダーの値が変わるたびに処理を呼び出せる
using UnityEngine;
using UnityEngine.UI;

public class SliderHandler : MonoBehaviour
{
    public Slider mySlider;

    void Start()
    {
        // スライダーの値が動いたときに OnSliderValueChanged を呼ぶ
        mySlider.onValueChanged.AddListener(OnSliderValueChanged);
    }

    void OnSliderValueChanged(float value)
    {
        Debug.Log("Slider value: " + value);
        // 例: 音量パラメータを反映する処理など
    }
}
  • 選択肢の中から1つを選ばせるUI要素
  • 解像度や難易度設定など、複数のオプションの中からプレイヤーが選ぶ場面で有用
  • onValueChanged で、選択中のインデックスが切り替わったタイミングで処理を呼び出す
using UnityEngine;
using UnityEngine.UI;

public class DropdownHandler : MonoBehaviour
{
    public Dropdown myDropdown;

    void Start()
    {
        // ドロップダウンの選択が変わったときに OnDropdownValueChanged を呼ぶ
        myDropdown.onValueChanged.AddListener(OnDropdownValueChanged);
    }

    void OnDropdownValueChanged(int index)
    {
        Debug.Log("Dropdown selected index: " + index);
        // 例: 選択されたオプションによってゲームの難易度を変更 など
    }
}
イベントの使い分け
  • Toggle.onValueChanged
    値が切り替わったときに呼び出される(bool isOn を受け取る)
  • Slider.onValueChanged
    スライダーが動いて値が変わったときに呼び出される(float value を受け取る)
  • Dropdown.onValueChanged
    選択肢のインデックスが変わったときに呼び出される(int index を受け取る)

このように、複数のUIコンポーネントを組み合わせることで、直感的かつ使いやすいインターフェースを実装できます。ボタン以外の要素でもイベントやプロパティの使い方はほぼ共通しているので、シーンに合わせて積極的に活用してみてください。

マルチプラットフォーム対応のレイアウト調整

Canvas Scaler

CanvasにアタッチされたCanvas Scalerコンポーネントを設定すると、異なる解像度や画面サイズにも対応しやすくなります。

  • UI Scale Mode
    • Constant Pixel Size : ピクセルベースでスケールを固定
    • Scale With Screen Size : 画面サイズに合わせてUIを拡大・縮小する
    • Constant Physical Size : DPIや物理寸法に合わせて調整する

モバイルゲームなら多くの場合、"Scale With Screen Size" を選び、Reference Resolution(基準解像度)を設定しておくと、さまざまな端末で見栄えが崩れにくくなります。

Layout Group

Horizontal/Vertical/Layout Groupコンポーネントを使えば、UI要素をリスト状に等間隔で並べたり、グリッド状に配置することができます。特に以下のシチュエーションで有用です。

  • スコアの項目をずらっと縦方向に並べたい
  • ショップアイテムをグリッドで整列したい
  • 複数のボタンを左右や上下に整然と配置したい

スクロールビュー(Scroll View)と組み合わせると、内容が増えても自動的にスクロールできるUIを構築できます。

C#でUIを制御するテクニック

UIイベントをスクリプトでまとめて管理する

ゲーム中に複数のUI要素があり、それぞれバラバラにイベント処理をしていると混乱しがち。そこでUI管理用クラスを用意して、イベント処理を一括管理する手法がよくとられます。

using UnityEngine;
using UnityEngine.UI;

public class UIManager : MonoBehaviour
{
    public Text scoreText;
    public Button retryButton;

    void Start()
    {
        retryButton.onClick.AddListener(OnRetry);
    }

    public void UpdateScore(int newScore)
    {
        scoreText.text = "Score: " + newScore.ToString();
    }

    void OnRetry()
    {
        // シーンをリロードするなど
        UnityEngine.SceneManagement.SceneManager.LoadScene(0);
    }
}

ゲームのロジック側はUIManagerに対して「UpdateScore(得点)」を呼ぶだけ、みたいにしておくと、UI関連の変更があってもゲームロジックに影響が波及しにくくなります。

アニメーションやフェード演出

UI要素には、CanvasGroupコンポーネントを使うと、Alpha値を変更してフェードイン・フェードアウト演出が簡単に実装できます。また、Animatorを組み合わせてボタンを点滅させたり、イージングライブラリで滑らかにウィンドウを開閉したりと、多彩なアニメーション表現が可能です。

using UnityEngine;

public class UIFader : MonoBehaviour
{
    public CanvasGroup canvasGroup;
    public float fadeSpeed = 2f;
    private bool isFadingIn;

    void Update()
    {
        float targetAlpha = isFadingIn ? 1f : 0f;
        canvasGroup.alpha = Mathf.MoveTowards(canvasGroup.alpha, targetAlpha, Time.deltaTime * fadeSpeed);
    }

    public void FadeInUI()
    {
        isFadingIn = true;
    }

    public void FadeOutUI()
    {
        isFadingIn = false;
    }
}

まとめ:UIを制する者はゲームを制す

  • CanvasとRectTransform
    • すべてのUIはCanvas配下にあり、RectTransformで位置やサイズを決める
  • 基本コンポーネント(Text、Image、Buttonなど)
    • TextMeshProで文字を高品質に表示
    • クリックイベントやSliderの値変更などを活用して操作性を向上
  • レスポンシブ対応
    • Canvas Scaler + Layout Groupを使えば、マルチプラットフォームでUI崩れを防げる
  • C#スクリプトとの連携
    • UIManagerで一括管理するなど、イベント処理を整理すると開発がスムーズ
  • 演出強化
    • CanvasGroupやAnimatorでフェードやアニメーションを付ければ、UIが映える

ゲームにおけるUIは、プレイヤーが常に目にする情報源です。UI次第で操作のわかりやすさや没入感が大きく変わります。本記事の内容を踏まえつつ、自分の作品に合ったUI表現を探求してみてください。

この記事を読んでもっと実践したいと感じたあなたへ

Unity開発を効率よく進めるためには、実践的なスキルと仲間との交流が欠かせません。
そんな方におすすめのステップが、下記の3つです。

1. 有料教材「どこでもUnity教室」でゲーム制作を短期マスター

  • 5日でシンプルなFPS完成:初心者向けに要点を押さえたカリキュラム
  • C#や最新のInputSystem、FPS実装まで網羅:つまずきやすいポイントを先回りで解説
  • 購入特典:Discord招待+サンプルプロジェクトDLで、疑問や実装例を即確認

Unity初心者でも最短5日で3D FPSが完成!今すぐ始める入門チュートリアルはこちら

https://zenn.dev/ryuryu_game/books/fd28de9d8e963a

2. 無料コミュニティで、疑問をすぐに解消&モチベーションUP

  • 初心者~中級者までOK:学習進度に合わせて質問や情報共有
  • 質問サポートが充実:わからないことを仲間や講師に即相談
  • 学習仲間と切磋琢磨:一緒に学ぶから続けやすい

Discordサーバー参加はこちら

https://discord.gg/5FwuKCacNy

3. 実績豊富な“ゲーム開発所RYURYU”があなたをトータルサポート

  • コナラ総販売200件超:さまざまなUnity開発の依頼を対応
  • VR/AR/AIなど最新技術にも精通:幅広いノウハウを活かして開発支援
  • ゲームクリエイター甲子園や東京ゲームショウなど出展実績多数

ご相談・お問い合わせはこちら

https://coconala.com/users/1772507

Discussion