【Unity6】2D脱出ゲームの作り方②｜UIボタンで背景を切り替える方法

🎮この記事では、Unity6を使って「1つのシーンで2D脱出ゲームを作る方法」を解説しています。
第2回では、UIボタン（矢印ボタン）を使って背景を切り替える仕組みを実装します。

🎥 動作例動画

✅前回の記事はこちら👇

Contents

UIボタンを作成しよう
- ボタンの作成手順
BackgroundManager.cs の修正
動作確認チェック
まとめ

UIボタンを作成しよう

ゲーム画面の中にボタンを追加し、クリックで背景を切り替えるようにします。

ヒエラルキー構成例👇

Canvas
　└─Background
　　　　├─Stage
　　　　└─ Arrows (空のオブジェクト)
　　　　　　├─Right
　　　　　　├─Left
　　　　　　└─Back

ボタンの作成手順

空のオブジェクト Arrows を作成
その中に UI → Image を追加
画像（ソース画像）に矢印アイコンを設定（無料アセットでもOK）
Buttonコンポーネントを追加
複製して左矢印ボタンを作成
　→ Z軸を反転し、位置を調整
さらに複製して下向きボタン（戻るボタン）を作成

⚠ Y軸で回転するとクリック判定がずれるため、Z軸回転を使用しましょう。

BackgroundManager.cs の修正

フィールドを追加

public GameObject rightButton;
public GameObject leftButton;
public GameObject backButton;

private BackgroundType currentBackground; //現在の背景を保持

SetBackgroundメソッドの更新

背景を切り替えた後に、現在の背景を変数に保存し、指定した矢印を表示させます

currentBackground = type;

if(type == BackgroundType.Title || type == BackgroundType.Clear)
{
　leftButton.SetActive(false);
　rightButton.SetActive(false);
　backButton.SetActive(false);
}

else if (type == BackgroundType.North ||　type == BackgroundType.South ||
　　　type == BackgroundType.East ||　type == BackgroundType.West)
{
　 leftButton.SetActive(true);
　 rightButton.SetActive(true);
　 backButton.SetActive(false);
}

else
{
　 leftButton.SetActive(false);
　 rightButton.SetActive(false);
　 backButton.SetActive(true);
}

ボタン押下時の処理を追加

▶ 右矢印ボタン

public void GoRight()
{
BackgroundType next = currentBackground switch
{
　BackgroundType.North => BackgroundType.East,
　BackgroundType.East => BackgroundType.South,
　BackgroundType.South => BackgroundType.West,
　BackgroundType.West => BackgroundType.North,
_ => BackgroundType.North
};
　SetBackground(next);
}

◀ 左矢印ボタン

public void GoLeft()
{
　BackgroundType prev = currentBackground switch
{
　BackgroundType.North => BackgroundType.West,
　BackgroundType.West => BackgroundType.South,
　BackgroundType.South => BackgroundType.East,
　BackgroundType.East => BackgroundType.North,
_ => BackgroundType.North
};
　SetBackground(prev);
}