# ミニゲーム①：Egg Race!

スマホの傾きセンサーとタッチで３Dパズルゲームを作ってみましょう。

# プロジェクト仕組みの理解

## ゲームの目的

スマホを傾いて、卵を転げて、巣まで届かせましょう！ただ、強くぶつかると、卵が割れてしまうので、優しくね！生まれたひよこちゃんが邪魔するので、ドアをうまく使って、移動制限させましょう！

## ゲームシーン

Scenesフォルダーの中にある「EggRace」を開いてください

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/6ANimage.png)

ヒエラルキーを見ると：

- Main Camera：ゲームのカメラで、上から真下見るようにしちます：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/OCuimage.png)

- Directional Light：光源
- Black：見せたくないステージの一部を黒いバーで隠すためのオブジェクト
- Stage：ステージ。いくつかのパーツで作られている： 
    - Static：動かないもの - このオブジェクトがナビゲーションメッシュが付いている 
        - Floor：床面
        - Walls：外側の４つの壁
        - Maze：内側の迷路の壁
        - Roof：屋根（コライダーのみ）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/jnAimage.png)

- - Goal：迷路のゴール - トリガー付き
    - Doors：スライドできるドア 
        - Horizontal：水平に移動できるドア
        - Vertical：垂直に移動できるドア

## プロジェクト整理

すでにいくつかのフォルダが準備された：

- Animations：ひょこのアニメーションコントローラー
- Materials：フェンス、ドア、ひょこなどのマテリアル
- Models：3Dモデル
- Prefab：コライダーなどが付いているプレハブ。スクリプトなし
- Script：スクリプト。カメラの高さを調整するスクリプトが準備された
- Textures：3Dモデルのテクスチャ
- UI：UI作成に必要なスプライト

## 初期設定

Androidスマホで実行できるため、プロジェクト設定でプラットホームを変えないといけない。「File ⇒ Build Profiles」を開き、「Windows」から「Android」へ変換し、「Switch Platform」を押しててください。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ArDimage.png)

# 卵の操作

これからスクリプトを作成し、卵の動き処理を実装しましょう。

## シーン設定

迷路の左上に Prefabs の中にある Egg を入れてください：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/PaEimage.png)

## キーボードによる卵の動き

スマホで遊ぶ前に、まずUnityで動作を確認したいので、キーボードを使い、重力の向きを変えて、卵が転がるようにしましょう。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/hNMimage.png)

重力を変えるには２つの方法がある：

#### プロジェクト設定で重力を変える

1回だけ重力を変え、後がずっと変わらないなら、プロジェクト設定で重力ベクトルを変えることができる。「Edit ⇒ Project Settings」を開き「Physics⇒Settings」（物理設定）を選ぶと

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/w6yimage.png)

「Gravity」（重力）という設定がある。デフォルト値としては、地球の重力になっている（真下のベクトルで、加速度は9.81）。今回は実行中に重力を変えるので、次の方法で変えましょう：

#### スクリプトで重力を変える

スクリプトでは、「`Physics.gravity`」の値を代入すれば、重力をいつでも帰ることができる。例えば：

```c#
// 地球の重力
Physics.gravity = new Vector3(0, -9.81f, 0);

// 月のの重力
Physics.gravity = new Vector3(0, -1.625f, 0);

// 木星の重力
Physics.gravity = new Vector3(0, -24.5f, 0);
```

### スクリプト

キーボードの WASD で重力ベクトルの向きを変えましょう W と S で Z軸の前後にし、A と D でＸ軸の左右にしましょう。

```c#
// 実行中に重力を変える
public class GravityController : MonoBehaviour
{
	// 重力の加速度（地球）
	const float Gravity = 9.81f;

	// 重力に与える倍率（強さの調整）
	[SerializeField] 
	private float gravityScale = 1.0f;

	private void Update()
	{
		// 重力のベクトル（Yはいつも下：-1）
		Vector3 vector = new Vector3(0, -1, 0);
		
		// WASDの入力（ -1 ～ 1 ）
		vector.x = Input.GetAxis("Horizontal"); // 左右（x軸）
		vector.z = Input.GetAxis("Vertical"); // 前後 (z軸）
	
		// 単位ベクトルにする
		vector.Normalize();
		
		// 最後に、重力の向きを変える
		Physics.gravity = vector * (Gravity * gravityScale);
	}
}
```

スクリプトを空のゲームオブジェクトに追加し、操作を確認してください：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/GKiimage.png)

## 加速度センサーによる卵の動き

加速度センサー（Accelerometer）はスマホの加速と減速を測定し、3Dベクトル（向きと強さ）として返す装置です。重力は地球の方向へ引っ張る力であり、真下の加速ベクトルととして現れる。

つまり、加速度センサーを使うことにより、重力ベクトルを測定できます。なお、スマホの加速度センサーの座標系は以下の通りです：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/RL1image.png)

ただし、今回のゲームでは、カメラで見た座標系は：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/dB7image.png)

なので、加速度センサーの ＺとＹ軸を交換しないといけない。

#### 加速度センサーを有効化

加速度センサーを使うために、まず有効化しないといけない。Unityは次の命令がある：

```c#
// 加速度センサーを使えるか？
if (Accelerometer.current != null)
{
    // 有効化する
    InputSystem.EnableDevice(Accelerometer.current);
}
```

#### 加速度センサーの値を読み込む

そして、実行中に、以下のように加速度センサーのベクトルを読む：

```c#
// 加速度センサーを使えるか？
if (Accelerometer.current != null)
{
	// 加速度センサーの向きを取得
	Vector3 acc = Accelerometer.current.acceleration.ReadValue();
}
```

### スクリプト

GravityController を更新し、スマホの加速度センサーを使える場合は、実際の重力データを利用しましょう：

```c#
// 実行中に重力を変える
public class GravityController : MonoBehaviour
{
	// 重力の加速度（地球）
	const float Gravity = 9.81f;

	// 重力に与える倍率（強さの調整）
	[SerializeField] 
	private float gravityScale = 1.0f;

	private void Start()
	{
		// 加速度センサーを使えるか？ → 有効化
		if (Accelerometer.current != null)
			InputSystem.EnableDevice(Accelerometer.current);
	}
	
	private void Update()
	{
		// 重力のベクトル（Yはいつも下：-1）
		Vector3 vector = new Vector3(0, -1, 0);
		
		// 加速度センサーを使えるか？
		if (Accelerometer.current != null)
		{
			// 加速度センサーの向きを取得
			Vector3 acc = Accelerometer.current.acceleration.ReadValue();

			// センサーの軸をゲームの軸へ変換
			vector.x = acc.x;  // X はそのまま
			vector.z = acc.y;  // ゲームの Z は、加速度センサーの Y である
 		}
		else
		{
			// WASDの入力
			vector.x = Input.GetAxis("Horizontal"); // 左右（x軸）
			vector.z = Input.GetAxis("Vertical"); // 前後 (z軸）
		}
	
		// 単位ベクトルにする
		vector.Normalize();
		
		// 最後に、重力の向きを変える
		Physics.gravity = vector * (Gravity * gravityScale);
	}
}
```

## 実機で確認

スマホとPCをUSBケーブルで接続し、Build Profiles を開いてください。「Run Device」で端末を選び、「Build And Run」でビルドし、実行を確認してください。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/BQnimage.png)

# 扉の操作

画面のタッチ機能を使い、指のスライドで、扉を動かしてみましょう。

## タッチ機能

加速度センサーと同様に、タッチ機能を使う前には、機能の有効化をしないといけない。Unityでは：

```c#
// タッチ機能を有効化
EnhancedTouchSupport.Enable();
```

その次に、タッチのイベントに登録しなければならない：

```c#
// 画面を触れ始めたとき
Touch.onFingerDown += 処理メソッド;

// 指は移動中のとき
Touch.onFingerMove += 処理メソッド;

// 指が画面から放したとき
Touch.onFingerUp += 処理メソッド;
```

また、処理するメソッドは、「Finger」という引数を受け取り、指の画面の位置などが渡される。例：

```c#
private void Start()
{
	// タッチ機能を有効化
	EnhancedTouchSupport.Enable();

	// イベントに登録
	Touch.onFingerDown += OnFingerDown;
}

// 画面をタッチし始めた
private void OnFingerDown(Finger finger)
{
	// 指の画面の位置を表示
	Debug.Log(finger.screenPosition);
}
```

## 水平扉をスライド

扉を指でスライドするのを次の考えで実現できる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/LPDimage.png)

初めて画面を触れるとき、指データを保管しておく。Unityがマルチタッチ（多数の指）に対応できるので、同じ指かどうかの確認が必要。そして、指が動くときに、移動量を計算し、その分を使って扉をスライドする。最後に、指を離したら、保管したデータを解放し、処理終了にする。

### スクリプト

DoorSlider のスクリプトを作成し、まず水平（Horizontal）の扉を移動しましょう：

```c#
using UnityEngine.InputSystem.EnhancedTouch;
using Touch = UnityEngine.InputSystem.EnhancedTouch.Touch; // << ここ注意！

// 扉を移動（スライド）する
public class DoorSlider : MonoBehaviour
{
    // 水平の扉のグループ（親オブジェクト）
    [SerializeField] private Transform horizontalDoors;

    // 使った指
    private Finger useFinger = null;

    // 指の初期位置
    private Vector2 fingerStart;
    
    // 水平扉の初期位置（X軸のみ）
    private float doorStartX;
    
    private void Start()
    {
        // タッチ機能有効化
        EnhancedTouchSupport.Enable();

        // 各種のタッチイベント登録
        Touch.onFingerDown += OnFingerDown;
        Touch.onFingerMove += OnFingerMove;
        Touch.onFingerUp += OnFingerUp;
    }

    private void OnDestroy()
    {
        // 各種のタッチイベント登録解除
        Touch.onFingerDown -= OnFingerDown;
        Touch.onFingerMove -= OnFingerMove;
        Touch.onFingerUp -= OnFingerUp;
        
        // タッチ機能無効化
        EnhancedTouchSupport.Disable();
    }

    private void OnFingerDown(Finger finger)
    {
        // マルチタッチできるため、すでに指一本を使っていたら、2本目から無視する
        if (useFinger != null) return;

        // 指を保管
        useFinger = finger;
        
        // 初期位置も取っておく
        fingerStart = finger.screenPosition;
        doorStartX = horizontalDoors.position.x;
    }

    private void OnFingerMove(Finger finger)
    {
        // マルチタッチできるので、同じ指かどうかを確認
        if (useFinger != finger) return;
        
        // 指の移動量を計算（画面のピクセル単位）
        Vector2 delta = useFinger.screenPosition - fingerStart;
        
        // 様々な画面サイズがあるので、移動量正規化しましょう（最大値：１）
        delta.x /= Screen.width;
        delta.y /= Screen.height;
        
        // 現在の位置からを取得し、X軸だけを更新
        Vector3 hPos = horizontalDoors.position;
        hPos.x = doorStartX + delta.x;
        horizontalDoors.position = hPos;
    }
    
    private void OnFingerUp(Finger finger)
    {
        // 指を解放する
        if (useFinger == finger)
            useFinger = null;
    }
}
```

#### 正規化に関して

いろんなスマホがあり、それぞれの画面サイズが異なるので、同じ指の動きでも大幅に異なる移動量が発生する可能性がある。例えば：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/mwvimage.png)

スワイプの長さを画面サイズ（`Screen.width` と `Screen.height`）で割れば、必ず 0 と 1の間になり、どの画面サイズであっても、同じ数値になる。この計算が「正規化」という。

### Unityで確認

スクリプトを「Stage &gt; Doors」にアタッチし、「Horizontal Doors」に「Stage &gt; Doors &gt; Horizontal」を入れてください

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zo1image.png)

## タッチをシミュレーションする

タッチで扉を動くようにしたので、どれだけマウスを使っても、扉が全く動かない。そのため、Unityは<span style="color:rgb(186,55,42);">**マウスを使ってタッチを疑似する**</span>機能がある。もちろん、マウス１つしかないので、<span style="color:rgb(186,55,42);">**指１本のみで、マルチタッチが再現できない**</span>が、今回のゲームなら十分。

疑似タッチを有効化するのは Window &gt; Analysis &gt; Input Debugger を選択し、次のウィンドウを開く。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/lLfimage.png)

このウィンドウの「Options」を開く、「Simulate Touch Input From Mouse or Pen」を選択すれば、マウスでタッチを疑似する。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/mjeimage.png)

## 速度調整、移動制限を追加

これで、扉が移動できるようになったが、２つの問題が現れた。

1. 扉の動きが多少遅く感じる
2. 画面から消えるぐら、無限にスライドできる

この２つの問題を解決しましょう：

### 速度調整

スクリプトに調整できる「speed」変数を追加し、`OnFingerMove` で使いましょう。先頭に：

```c#
// スライドの速度
[SerializeField] private float speed;
```

`OnFingerMove` では：

```c#
// 現在の位置からを取得し、X軸だけを更新
Vector3 hPos = horizontalDoors.position;
hPos.x = doorStartX + delta.x * speed; // 速度を適用
horizontalDoors.position = hPos;
```

Unity で適切に速度を設定し、確認してください

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/lWSimage.png)

### 移動制限

Unityで最大Ｘと最小Ｘの位置を設定できるようにし、`OnFingerMove` で制限をかける。まず、スクリプトの先頭に：

```c#
// 最低 X 位置
[SerializeField] 
private float xMin;

// 最大 X 位置
[SerializeField] 
private float xMax;
```

そして、`OnFingerMove` では：

```c#
// 現在の位置からを取得し、X軸だけを更新
Vector3 hPos = horizontalDoors.position;
hPos.x = doorStartX + delta.x * speed;     // 速度を適用
hPos.x = Mathf.Clamp(hPos.x, xMin, xMax);　// 移動制限を適用
horizontalDoors.position = hPos;
```

Unity で適切に数値を設定し、確認してください

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/AGwimage.png)

## 垂直をスライド

同じ処理を使って、DoorSlider スクリプトに垂直の扉が Z 軸で移動できるようにしましょう。スクリプトの先頭に：

```c#
// 垂直の扉のグループ（親オブジェクト）
[SerializeField] 
private Transform verticalDoors;

// 最低 Z 位置
[SerializeField] 
private float zMin;

// 最大 Z 位置
[SerializeField] 
private float zMax;

//（他の[SerializeField]）

// 垂直扉の初期位置（Z軸のみ）
private float doorStartZ;
```

つぎ、`OnFingerDown` では、垂直扉の初期位置を取る

```c#
// 初期位置も取っておく
fingerStart = finger.screenPosition;
doorStartX = horizontalDoors.position.x;
doorStartZ = verticalDoors.position.z;
```

そして、`OnFingerMove` では：

```c#
// 現在の位置からを取得し、Z軸だけを更新
Vector3 vPos = verticalDoors.position;
vPos.z = doorStartZ + delta.y * speed;     // 速度を適用
vPos.z = Mathf.Clamp(vPos.z, zMin, zMax);　// 移動制限を適用
verticalDoors.position = vPos;
```

最後に Unity でパラメータを設定して、試してみてください：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/q8Zimage.png)

## 実機で確認

つぎ、端末を接続し、「Build And Run」でタッチと傾きを使用し、卵を巣まで動かしてみてください。

# 卵の「体力」

次、卵が強く衝突したら体力が減り、ゼロになったら卵が消える処理を追加しましょう。

## スクリプト

まず、単純な考え方で、「ぶつけたら、体力が減る」処理をにしましょう。

```c#
// 卵の体力
public class EggHP : MonoBehaviour
{
    // ぶつかるときに受けるダメージ
    [SerializeField] 
    private float hitDamage = 30;
    
    // 体力
    private float hp = 100;
    
    // 衝突の時
    private void OnCollisionEnter(Collision other)
    {
        // ぶつけたら、体力が減る
        hp -= hitDamage;

        // UIまだないため、Debug.Logで確認
        Debug.Log(hp);
      
        // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
        if (hp <= 0)
            Destroy(gameObject);
    }
}
```

スクリプトを<span style="color:rgb(186,55,42);">**卵のプレハブ**</span>にアタッチし、転がしてみましょう。

<details id="bkmrk-%E8%AA%A4%E3%81%A3%E3%81%A6%E3%80%81%E3%83%97%E3%83%AC%E3%83%8F%E3%83%96%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8F%E3%80%81%E3%82%B7%E3%83%BC%E3%83%B3%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0"><summary>誤って、プレハブではなく、シーンのゲームオブジェクトを編集した場合</summary>

##### 誤って、プレハブではなく、シーンのゲームオブジェクトを編集した場合

プレハブを編集すると、シーンのゲームオブジェクト（インスタンス）が変わるが、逆、ゲームオブジェクトをいじれば、プレハブが変わらない。

万が一、誤った操作でゲームオブジェクトを編集してしまった場合、２つの解決がある

**<span style="text-decoration:underline;">① ゲームオブジェクトで編集した分をプレハブに反映させる</span>**

シーンにあるゲームオブジェクトの編集分をプレハブに適用できる。もちろん、同じプレハブの元であるゲームオブジェクトも変わる。

編集した分を適用するのは「Overrides」で適用できる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/1Ysimage.png)

「Apply All」を押すと、変わった数値やコンポーネントをプレハブに反映される

**<span style="text-decoration:underline;">② ゲームオブジェクトをプレハブの状態に戻す</span>**

逆に、編集した分をなしにし、プレハブの状態に戻したいなら、「Revert All」を押してください

</details>### 問題１：すぐ消えてしまう！

ぶつかる時に体力が減るようにしたが、床面ともぶつかるので、転がるだけで死んでしまう！床面に新しい「Floor」タグを付けて、スクリプトで床を無視しましょう。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/4skimage.png)

```c#
// 衝突の時
private void OnCollisionEnter(Collision other)
{
    // 床面を無視する
    if (other.gameObject.CompareTag("Floor"))
        return;
    
    // ぶつけたら、体力が減る
    hp -= hitDamage;

    // UIまだないため、Debug.Logで確認
    Debug.Log(hp);
    
    // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
    if (hp <= 0)
        Destroy(gameObject);
}
```

これでまた確認してみてください。

### 問題２：優しくにしても、すぐ体力が減る

たしか、これで床で転がしても体力が減らないが、優しく壁を触れても、体力が30を減る！衝突の強さに合わせて体力が減る処理を追加しましょう。このため `Collision` の `impulse` を使用できる。`impulse` を確認するため、一旦 `OnCollisionEnter` を以下のように変えてください：

```c#
// 衝突の時
private void OnCollisionEnter(Collision other)
{
    // 床面を無視する
    if (other.gameObject.CompareTag("Floor"))
        return;
    
    // ぶつけたら、体力が減る
    hp -= hitDamage;

    // 一時的に impulse を表示
    // impulseはベクトル（強さと向き）なので、ベクトルの長さを求める
    float hitForce = other.impulse.magnitude;
    Debug.Log($"衝突の強さ：{hitForce}");
    
    // UIまだないため、Debug.Logで確認
    //Debug.Log(hp);
    
    // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
    //if (hp <= 0)
    //    Destroy(gameObject);
}
```

で実行するとこのように表示される（転がり方による）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/tRKimage.png)

これを使って、スクリプトを直しましょう。最小値と最大値の強さを Unityで設定し、

- 最小値以下なら：ゼロダメージ
- 最大値以上んら：最大ダメージ
- その間は：線形的に補間

ならば、以下のようにスクリプトを直す：

```c#
// 卵の体力
public class EggHP : MonoBehaviour
{
    // ぶつかるときに受けるダメージ
    [SerializeField] 
    private float hitDamage = 30;
    
    // 最低の衝突の強さ
    [SerializeField] 
    private float minImpulse = 4;
    
    // 最大の衝突の強さ
    [SerializeField] 
    private float maxImpulse = 20;
    
    // 体力
    private float hp = 100;
    
    // 衝突の時
    private void OnCollisionEnter(Collision other)
    {
        // 床面を無視する
        if (other.gameObject.CompareTag("Floor"))
            return;
        
        // impulseはベクトル（強さと向き）なので、ベクトルの長さを求める
        float hitForce = other.impulse.magnitude;
        
        // 最低と最大の間に正規化する
        float hitNorm = (hitForce - minImpulse) / (maxImpulse - minImpulse);
        hitNorm = Mathf.Clamp01(hitNorm); // 絶対に0と1の間にする
        
        // ぶつけたら、体力が減る
        hp -= hitDamage * hitNorm;

        // UIまだないため、Debug.Logで確認
        Debug.Log($"衝突の強さ：{hitForce}, 残りの体力：{hp}");

        // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
        if (hp <= 0)
            Destroy(gameObject);
    }
}
```

これで試して、体力の減り方を見てください。

# UIを作成

体力を可視化するため、新しい Canvas を作成し、必要な素材を追加しましょう。Canvasが画面サイズに合わせて自動的にリサイズするように設定しましょう：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/LEiimage.png)

## ゲージの作り方

#### 「スライス（Sliced）」スプライトについて

次の事例について考えてください：セリフ用の枠を作成したいが、文字の数は固定ではなく、長い文章もあるし、短い文章もありえるので、枠のサイズも固定できない。文章に合わせようとして、枠を強制的にリサイズすると…

<table id="bkmrk-" style="border-collapse:collapse;width:100%;height:202.383px;border-width:0px;"><colgroup><col style="width:31.7046%;"></col><col style="width:68.2955%;"></col></colgroup><tbody><tr style="height:202.383px;"><td style="height:202.383px;border-width:0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/UoZimage.png)

</td><td style="height:202.383px;border-width:0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zZ8image.png)

</td></tr></tbody></table>

…スプライトが変に伸びてしまい、おかしくみえます。これを解決するにな、スプライトを「スライス」し、伸びると伸びない領域を指定できます。スプライトエディタでは：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Hy0image.png)

「Border」を指定し、伸ばしてはいけない角と伸ばしても良い中央部分を定義できる。Imageコンポーネントで「Image Type：Sliced」にすると、問題なく、きれいに枠をリサイズできる：

<table id="bkmrk--3" style="border-collapse:collapse;width:100%;border-width:0px;"><colgroup><col style="width:40.0499%;"></col><col style="width:59.9501%;"></col></colgroup><tbody><tr><td style="border-width:0px;vertical-align:middle;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/uoeimage.png)

</td><td style="border-width:0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/HVpimage.png)

</td></tr></tbody></table>

#### UIマスクについて

単純に、「マスク」は、UIの一部を隠すためのコンポーネントである。例えば、ポーションのチャージを可視化したく、以下のように設計した：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/4uRimage.png)

この場合は、ポーションの「溜まり具合」はビンの形に合わせる必要があるので、マスクが最適です。具体的に：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/iZEimage.png)

ばらば、最後のポーションＵＩは、各層（レイヤー）のサンドイッチになる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ulrimage.png)

<table class="align-center" id="bkmrk--7" style="border-collapse:collapse;width:64.2857%;border-width:0px;"><colgroup><col style="width:25.7916%;"></col><col style="width:74.2084%;"></col></colgroup><tbody><tr><td style="border-width:0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/aTlimage.png)

</td><td style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/5HWimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/5HWimage.png)

</td></tr></tbody></table>

### ゲージの仕組み

いろんな画面サイズを対応しないといけないので、体力ゲージが伸びたら、短くなったりするので、スライス画像を使用し、ゲージの形に合わせるため、マスクを使いましょう。また。ゲージのすぐ隣に卵の絵も追加しましょう。

<table id="bkmrk--8" style="border-collapse:collapse;width:95.8333%;border-width:0px;height:141px;"><colgroup><col style="width:19.6277%;"></col><col style="width:80.3744%;"></col></colgroup><tbody><tr><td style="vertical-align:middle;border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ba1image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/ba1image.png)

</td><td style="border-width:0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/t9Fimage.png)</td></tr></tbody></table>

<table id="bkmrk--9" style="border-collapse:collapse;width:100%;border-width:0px;"><colgroup><col style="width:16.6667%;"></col><col style="width:16.6667%;"></col><col style="width:16.6667%;"></col><col style="width:16.6667%;"></col><col style="width:16.6667%;"></col><col style="width:16.6667%;"></col></colgroup><tbody><tr><td colspan="2" style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/M0simage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/M0simage.png)</td><td colspan="2" style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/7rNimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/7rNimage.png)</td><td colspan="2" style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/V1Himage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/V1Himage.png)</td></tr><tr><td style="border-width:0px;">  
</td><td colspan="2" style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/I8Dimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/I8Dimage.png)</td><td colspan="2" style="border-width:0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/aY0image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/aY0image.png)

</td><td style="border-width:0px;">  
</td></tr></tbody></table>

## UIマネージャー

つぎ、UI管理スクリプトを作成しましょう。ゲーム内でUI１つしかないので、シングレトンとして実現できる。ここで、体力ゲージを更新しましょう

```c#
// UI 管理するクラス（シングレトン）
public class UIManager : MonoBehaviour
{
    // シングレトンのインスタンス
    public static UIManager Instance { get; private set; }

    // 体力のゲージ
    [SerializeField] 
    private Image hpGauge;
    
    // 起動のとき
    private void Awake()
    {
        // シングレトンあれば、廃止
        if (Instance != null)
            Destroy(Instance.gameObject);
        
        // シングレトンインスタンスを設定
        Instance = this;
    }
    
    // 体力を更新
    // value：0から１までの正規化された体力
    public void UpdateEggHP(float value)
    {        
        // ゲージの溜まり具合を更新
        hpGauge.fillAmount = value;
    }
}
```

Unityで参照の設定を忘れずに～

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/rfoimage.png)

#### EggHP のスクリプト編集

体力が減ったら、UIManager を呼び出し、ゲージを更新しましょう。

```c#
private void Start()
{
    // ゲージをリセット
    UIManager.Instance.UpdateEggHP(1.0f);
}

// 衝突の時
private void OnCollisionEnter(Collision other)
{
    // （省略）

    // ぶつけたら、体力が減る
    hp -= hitDamage * hitNorm;        
    
    // UIまだないため、Debug.Logで確認
    // Debug.Log($"衝突の強さ：{hitForce}, 残りの体力：{hp}");
    
    // UIを更新
    UIManager.Instance.UpdateEggHP(hp / 100);
    
    // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
    if (hp <= 0)
        Destroy(gameObject);
}
```

### 卵の絵を更新

つぎ、体力が減れば減るほど、卵が割れていくように、画像を更新してみましょう。考えとしては、以下の図のようになる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/u4pimage.png)

```c#
// 卵の画像
[SerializeField] 
private Image eggDisplay;

// 各種の卵のスプライト (0% → 100% の順番）
[SerializeField] 
private Sprite [] eggSprites;

// (省略)

// 体力を更新
// value：0から１までの正規化された体力
public void UpdateEggHP(float value)
{
    hpGauge.fillAmount = value;
    
    // valueが 0～0.999 の間を保証する (1.0f にしない理由を考えましょう） 
    value = Mathf.Clamp(value, 0, 0.999f);
    
    // 配列の指数を求める
    int index = Mathf.FloorToInt(eggSprites.Length * value);
    
    // スプライトを変える
    eggDisplay.sprite = eggSprites[index];
}
```

そして、Unityでは参照を設定。スプライトの順番は大事なので、注意してください。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Fjcimage.png)

# 次々の卵を生成

卵を無事に巣まで届けたら、ひょこが生まれ、ランダムに歩くようにしましょう。

## 卵を検知する「EggDetector」

まず、卵が巣に届く検知スクリプトを作成しましょう。卵かどか「Egg」というタグで識別すると：

```c#
// 卵を検知する
public class EggDetector : MonoBehaviour
{
    // 検知したら発生するイベント
    public event System.Action<GameObject> Detected;

    private void OnTriggerEnter(Collider other)
    {
        if (other.CompareTag("Egg"))
            Detected?.Invoke(other.gameObject);
    }
}
```

もちろん、卵のプレハブに「Egg」タグを追加しなければならない。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/WY3image.png)

そして、巣にスクリプトをアタッチしてください（すでにトリガー付き）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/8Mrimage.png)

## GameManager で生成

次、ゲームマネージャークラスを作成し、卵が巣に届いたら卵を消し、新しい卵を生成しましょう。まず、ゲームマネージャークラスを作成

### スクリプト

```c#
public class GameManager : MonoBehaviour
{
    // 卵のプレハブ
    [SerializeField] 
    private GameObject eggPrefab;

    // 卵の開始位置
    [SerializeField] 
    private Transform eggStart;
    
    // 卵のゴール（巣）
    [SerializeField] 
    private EggDetector goal;

    // 新しい卵を生成
    private void CreateEgg()
    {
        // プレハブから卵を生成し、開始位置にする
        var egg = Instantiate(eggPrefab);
        egg.transform.position = eggStart.position;
    }
    
    // 卵が巣に届いたときのイベントを受け取る
    private void OnEggDetected(GameObject egg)
    {
        // 卵を廃止し、次のを生成
        Destroy(egg);
        CreateEgg();
    }
    
    private void Start()
    {
        // 開始の卵を生成
        CreateEgg();

        // イベントに登録
        goal.Detected += OnEggDetected;
    }

    private void OnDestroy()
    {
        // イベント登録解除
        goal.Detected -= OnEggDetected;
    }
}
```

#### Unityの設定

今まで使ってきた卵をシーンから削除し、GameManager で卵のプレハブを設定してください。なお、卵の初期位置を空のゲームオブジェクトで指定してください：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/YnNimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/92Ximage.png)

実行し、確認してください。

### 卵体力の対応も

無事に巣まで届くだけではなく、体力ゼロになった場合でも新しい卵を出しましょう。まず EggHP ではイベントを追加し…

```c#
// 卵の体力
public class EggHP : MonoBehaviour
{
    // 卵が割れたときに発生するイベント
    public event System.Action<EggHP> Destroyed; 

    // (省略)

    // 衝突の時
    private void OnCollisionEnter(Collision other)
    {
        // (省略)

        // 体力ゼロ以下の場合、ゲームオブジェクトを廃止し、イベント発生
        if (hp <= 0)
        {
            Destroy(gameObject);
            Destroyed?.Invoke(this);
        }
    }
}
```

そして、GameManager では：

```c#
// 新しい卵を生成
private void CreateEgg()
{
    // プレハブから卵を生成し、開始位置にする
    var egg = Instantiate(eggPrefab);
    egg.transform.position = eggStart.position;
    
    // 廃止イベントに登録
    EggHP eggHp = egg.GetComponent<EggHP>();
    eggHp.Destroyed += OnEggDestroyed;
}

// 卵が割れたときのイベントを受け取る
private void OnEggDestroyed(EggHP eggHp)
{
    // イベント登録解除し、新しいのを生成
    eggHp.Destroyed -= OnEggDestroyed;
    CreateEgg();
}

// 卵が巣に届いたときのイベントを受け取る
private void OnEggDetected(GameObject egg)
{
    // 廃止イベント登録解除する
    EggHP eggHp = egg.GetComponent<EggHP>();
    eggHp.Destroyed -= OnEggDestroyed;

    // 卵を廃止し、次のを生成
    Destroy(egg);
    CreateEgg();
}
```

# ひょこ生まれ！

ゲームマネージャーを編集し、卵が無事に巣まで届いたら、ひょこが生まれ、ランダムの目的地まで歩くようにしましょう。

## ランダムに歩く

アイディアとして、ひょこが現在位置からある半径いないのランダム位置を選択する。ただし、その位置がナビゲーションメッシュの中にあること保証できないので、ランダム位置を選択し、そこから最も近いナビゲーションメッシュの位置を求める：

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/XApimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/XApimage.png)

このため、Unity の２つの機能を使用

<table id="bkmrk-%E3%83%BB%E5%8D%98%E4%BD%8D%E5%86%86%E3%81%AE%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E4%BD%8D%E7%BD%AE-vector2-" style="border-collapse:collapse;width:100%;height:92.7px;border-width:0px;"><colgroup><col style="width:22.1429%;"></col><col style="width:77.8571%;"></col></colgroup><tbody><tr style="height:65.95px;"><td style="height:65.95px;border-width:0px;">・単位円以内の

 ランダム位置

</td><td style="height:65.95px;border-width:0px;">```c#
Vector2 point = Random.insideUnitCircle;
```

</td></tr><tr style="height:26.75px;"><td style="height:26.75px;border-width:0px;">・ナビゲーションメッシュ

 に一番近い点を探す

</td><td style="height:26.75px;border-width:0px;">```c#
// position        ：定めた位置
// hit             ：探索の結果
// distance        ：探索の最大距離
// NavMesh.AllAreas：探索したいナビゲーションメッシュの種類（AllAreas = すべてのメッシュ）
NavMesh.SamplePosition(position, out var hit, distance, NavMesh.AllAreas);
```

</td></tr></tbody></table>

### スクリプト

以下のスクリプトを<span style="color:rgb(186,55,42);">**ひょこのプレハブ**</span>に付けてください：

```c#
// ランダムに歩く
public class RandomWalk : MonoBehaviour
{
    // 円の半径
    [SerializeField] 
    private float radius;

    // ナビゲーションエージェント
    private NavMeshAgent agent;
    
    // 目的地を設定
    private void SetDestination()
    {
        // ランダム位置
        Vector2 point = Random.insideUnitCircle * radius;
        
        // 3Dにする
        Vector3 target = new Vector3(point.x, 0, point.y);
        
        // ナビゲーションメッシュに一番近い点にする
        NavMesh.SamplePosition(target, out var hit, 100, NavMesh.AllAreas);
        
        // 目的地にする
        agent.SetDestination(hit.position);
    }
    
    private void Start()
    {
        // コンポーネントを取得
        agent = GetComponent<NavMeshAgent>();
        SetDestination();
    }
}
```

確認のため、ひょこ1羽を手で追加し、動きを見てみましょう

#### 次々の位置を設定

これで1回動くが、着いたら止まるので、次々に新しい位置を設定しましょう。考えとしては「しばらくに動ていなければ、新しい目的地にする」。この作戦で、閉じた扉で動かなくなった場合でも、別の位置に移動ができる。実現するには：

1. 前回の Update と今の Update の位置の差分を求める
2. 差分（移動量）が大きければ、まだ動いている → なにもしない
3. 差分（移動量）が小さければ、止まっている → タイマー開始
4. タイマーが切れたら → 別の目的地にする

```c#
// ランダムに歩く
public class RandomWalk : MonoBehaviour
{
    // 円の半径
    [SerializeField] 
    private float radius;

    // ナビゲーションエージェント
    private NavMeshAgent agent;
    
    // 最後の位置
    private Vector3 lastPosition;
    
    // 止まっている時間
    private float stopTimer;
    
    // SetDestination()が変わらない
    
    private void Start()
    {
        // コンポーネントを取得
        agent = GetComponent<NavMeshAgent>();
        SetDestination();
        
        // 現在の位置を保管
        lastPosition = transform.position;
    }

    private void Update()
    {
        // 現在の位置
        Vector3 nowPosition = transform.position;
        
        // 差分を計算
        float distance = Vector3.Distance(nowPosition, lastPosition);

        // 最後の位置を上書きする
        lastPosition = nowPosition;

        // 少しでも移動していれば、問題ない
        if (distance > 0.01f)
        {
            stopTimer = 0; // タイマーをリセット
            return;        // 終了
        }
        
        // タイマーを更新
        stopTimer += Time.deltaTime;
        
        // 0.5秒以上動いていなければ、新しい位置を求める
        const float waitTime = 0.5f;
        if (stopTimer > waitTime)
        {
            stopTimer = 0;
            SetDestination();
        }
    }
}
```

## GameManager の更新

テスト用のひょこをシーンから削除し、卵が巣まで行ったら、ひょこが生まれるようにしましょう。

```c#
public class GameManager : MonoBehaviour
{
    // ひょこのプレハブ
    [SerializeField] 
    private GameObject chickPrefab;

    // (省略)

    // 卵が巣に届いたときのイベントを受け取る
    private void OnEggDetected(GameObject egg)
    {
        // 廃止イベント登録解除する
        EggHP eggHp = egg.GetComponent<EggHP>();
        eggHp.Destroyed -= OnEggDestroyed;

        // 卵の位置でひょこを生成する
        GameObject copy = Instantiate(chickPrefab);
        copy.transform.position = egg.transform.position;

        // 卵を廃止し、次のを生成
        Destroy(egg);
        CreateEgg();
    }
}
```