🎮 Unity6 を使った「1つのシーンで完結する2D脱出ゲーム講座」第4回です。
今回は 2段階拡大画面の実装 と、 クリックで扉や南京錠などのオブジェクトを切り替える汎用スクリプト を作成します。
これにより、後のステージ作りでもさまざまなギミックに流用できるようになります。
🎥 動作例動画
✅前回の記事はこちら👇
特定の場所をクリックしてさらに拡大画面へ
ヒエラルキー例：
Stage
├─ North（背景）
├─ VendingMachine（背景）
│ └─ Slot（透明画像）
├─ VendingSlotZoom（背景）
：
- 自販機の下部分に透明の Image を作成
- クリックすると取り出し口の拡大画面へ切り替わるように設定
BackgroundType に拡大背景を追加
public enum BackgroundType
{
//…既存の背景
GateZoom,
VendingSlot
}
BackgroundManager の修正（2段階ズーム対応）
現在のBackgroundManagerでは2段階拡大時に最初の背景に戻ることができないため、
スクリプトを変更する必要があります。
フィールド追加
private Stack backgroundHistory = new Stack();
ZoomTo()の修正
public void ZoomTo(BackgroundType zoomType)
{
// 今の背景を履歴に積む
backgroundHistory.Push(currentBackground);
SetBackground(zoomType);
backButton.SetActive(true);
}
GoBack()の修正
public void GoBack()
{
if (backgroundHistory.Count > 0)
{
BackgroundType backTo = backgroundHistory.Pop();
SetBackground(backTo);
// もう戻り先がないなら非表示
if (backgroundHistory.Count == 0)
backButton.SetActive(false);
}
}
扉オブジェクトの作成
ヒエラルキー例：
Stage
├─ North（背景）
├─ VendingMachine（背景）
├─ VendingSlotZoom（背景・閉じた扉）
│ └─ OpenImage
背景自体に閉じた扉がない場合も、CloseImage / OpenImage を追加すればOKです。
動かすオブジェクト（南京錠）の作成
ヒエラルキー例：
Stage
├─ GateZoom（背景）
｜ └─Key（空のオブジェクト）
｜ ├─Nomal（通常画像）
｜ └─Zoom（拡大画像）
背景になじませるための加工
南京錠の一部分だけ透明にしたい場合などは、
GIMPなどの画像編集ソフトで加工すると自然に馴染みます。
ToggleObject.cs（汎用切り替えスクリプト）
扉・南京錠・布団・カーテンなど、
「画像A ⇔ 画像B」を切り替える汎用スクリプトです。
using UnityEngine;
public class ToggleObject : MonoBehaviour
{
[SerializeField] private GameObject imageA;
[SerializeField] private GameObject imageB;
private bool isStateA = true;
// クリックで画像を切り替える
public void Toggle()
{
isStateA = !isStateA;
if (imageA != null)
imageA.SetActive(isStateA);
if (imageB != null)
imageB.SetActive(!isStateA);
}
インスペクター設定
- Gate や Key の親オブジェクトにアタッチ
- ImageA → 最初に表示する画像（閉じた扉・通常南京錠など）※無ければ空でもOK
- ImageB → 切り替え後の画像（開いた扉・拡大南京錠など）
さらに Button コンポーネント を追加し、Toggle() を呼び出すように設定します。
動作チェック
- クリックで扉や南京錠が 閉 → 開 / 開 → 閉 と切り替わる
- 南京錠や他のギミックも同じスクリプトで切り替え可能
- 2段階拡大から戻る際も正しく履歴通り戻れる
まとめ
今回実装した機能：
- 2段階拡大・戻る処理
- クリックで画像を切り替える汎用スクリプト（ToggleObject）
これにより、扉・箱・カーテン・引き出しなど、さまざまなギミックを簡単に追加できます。
✅次回は インターフェースを使って、背景切り替え時にオブジェクトをリセットする方法 を解説します。
コメント