初心者用　UnityでUI画面を作ってみよう！

Unity放置インフレ系クリッカーゲームの作り方講座を学習しながらゲームを作るブログです。

UIってなに？

ゲームを遊ぶときに、スコアが見えたりボタンがあったりすると便利だよね。その「見た目で操作する部分（ボタン・文字・画像など）」を UI（ユーザーインターフェース）と呼びます。今日は、「クリッカーゲーム」を例にして、UI画面を作るところまでを一緒にやっていくよ。

Imagesフォルダーに用意した画像を入れてシーンに配置していきます。

背景画像を用意しよう

UI画面をきれいに見せるためには、まず背景が大切！

背景は「Canva」を使って作りました。

素材を押して、図形や検索で配置したいイラストを探してクリックすると画像が貼られます。
配置したい場所に移動させて完成したら、右上の共有ボタンを押してダウンロードします。

キャラクターとスクリプトの作成

ざっくりとですが画面配置ができましたので、次ににわとり(Chicken)オブジェクトを作成していきます。

Assets/Images/ からにわとり用の画像 Chicken をシーンに直接ドラッグアンドドロップします。

にわとりらしい動きを付けたかったので、「餌箱」→「ダクト」を往復するようにするには
「スプリクト」が必要で、コードを書けないのでchatGTPにお願いしようと思います。

「Unityで２Dゲームを作ります。まずはにわとりが「餌箱」から「ダクト」を往復するためのスプリクトをコメント付きで書いてください。」とチャットに入力します。

了解しました🐔 では、にわとり（キャラクター）が「餌箱」から「ダクト」まで往復移動する基本スクリプトを作りましょう。スクリプト名はわかりやすく、📜 ChickenMove.cs とします。

にわとりを選択した状態で、「コンポーネントを追加」から新しいスプリクトをクリックして
スプリクト名を入力して「新しいスプリクト」をクリックします。
「作成を追加」を押すとインスペクターにスプリクトがあるはずです。

作ったスプリクトは「Assetsフォルダー」にあるので「Scriptsフォルダー」に移動しておきましょう。

にわとり用スプリクトです。

using UnityEngine;

/// <summary>
/// にわとりが「餌箱」と「ダクト」を自動で往復移動するスクリプト。
/// 餌箱とダクトの位置をインスペクターで設定してください。
/// </summary>
public class ChickenMove : MonoBehaviour
{
    [Header("移動設定")]
    [Tooltip("にわとりの移動速度（1〜5くらいが目安）")]
    public float speed = 2f;

    [Header("目的地の設定")]
    [Tooltip("餌箱の位置（Transform）")]
    public Transform feedBoxPoint;
    [Tooltip("ダクトの位置（Transform）")]
    public Transform ductPoint;

    // 現在の目的地
    private Transform targetPoint;

    // 左右反転用
    private SpriteRenderer spriteRenderer;

    private void Start()
    {
        // 最初は餌箱に向かう
        targetPoint = feedBoxPoint;

        // SpriteRendererを取得（左右反転用）
        spriteRenderer = GetComponent<SpriteRenderer>();
    }

    private void Update()
    {
        if (targetPoint == null) return;

        // ターゲットに向かって移動
        transform.position = Vector2.MoveTowards(
            transform.position,
            targetPoint.position,
            speed * Time.deltaTime
        );

        // 移動方向によって左右反転
        if (spriteRenderer != null)
        {
            if (targetPoint.position.x > transform.position.x)
                spriteRenderer.flipX = false; // 右向き
            else
                spriteRenderer.flipX = true;  // 左向き
        }

        // 目的地に到達したらターゲットを切り替える
        if (Vector2.Distance(transform.position, targetPoint.position) < 0.05f)
        {
            if (targetPoint == feedBoxPoint)
                targetPoint = ductPoint;
            else
                targetPoint = feedBoxPoint;
        }
    }

    // エディタ上で位置を確認できるようにGizmosを描画
    private void OnDrawGizmos()
    {
        Gizmos.color = Color.yellow;
        if (feedBoxPoint != null)
            Gizmos.DrawSphere(feedBoxPoint.position, 0.1f);
        if (ductPoint != null)
            Gizmos.DrawSphere(ductPoint.position, 0.1f);

        Gizmos.color = Color.green;
        if (feedBoxPoint != null && ductPoint != null)
            Gizmos.DrawLine(feedBoxPoint.position, ductPoint.position);
    }
}

🧩 設定方法（Unityエディタでの手順）