2024-09-16 18:00:00

【Unity】スイカ風マージパズルゲームの作り方その2 ~ スポナーを作る ~【2024年最新】

Unityを使ってスイカ風のマージパズルゲームを作成する方法を解説します。

前回の記事はこちらです。

【Unity】スイカ風マージパズルゲームの作り方その1【2024年最新】 - なぎなぎブログ

前回は容器と駒（ボール）を作成しました。

今回は、駒を生成するスポナーの作成を行います。

スポナーの作成

スポナーは、駒を生成するためのオブジェクトです。

スポナーも駒と同じように画像をインポートして、ゲームオブジェクトを作成します。

スポナー画像のインポート

まずは、スポナーの画像をインポートします。

Spritesフォルダに画像を入れて、Pixels Per Unitを設定します。

今回画像は 512x512 で作成していたので、Pixels Per Unitは 512 に設定します。

スポナーのゲームオブジェクト作成

次に、スポナーのゲームオブジェクトを作成します。

Spritesフォルダにあるスポナー画像をHierarchyにドラッグ＆ドロップして、ゲームオブジェクトを作成します。

Spawnerは下記の設定しておきます

Spawner
- 名前を Spawner に変更
- Position を (0, 4.2, 0) に設定
- Scale を (2, 2, 1) に設定

スポナーのスクリプト作成

スクリプトファイルの作成

いよいよスクリプトを書いていくので、まずスクリプトを保管するためのフォルダを作成します。

Assets > Create > Folder を選択し、名前を Scripts として作成します。

作成したスクリプトフォルダにスポナーのスクリプトを作成します。

Hierarchy にある Spawner を選択し、Inspector にある Add Component を選択し、New Script を選択し「Spawner」という名前でスクリプトを作成します。

作成したスクリプトは Scripts フォルダに移動させておいてください。

作成すると次の図のような状態になります。

スポナーを動かすスクリプトの記述

スポナースクリプトを記述します。

using UnityEngine;

public class Spawner : MonoBehaviour
{
    // スポナーのY位置
    private const float SpawnerImagePositionY = 4.2f;
    
    // Start is called once before the first execution of Update after the MonoBehaviour is created
    void Start()
    {
        
    }
    
    // Update is called once per frame
    void Update()
    {
        UpdateSpawnerPosition();
    }
    
    private void UpdateSpawnerPosition()
    {
         
        // マウスの座標を取得
        var mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        var newPosition = new Vector2(mousePosition.x, SpawnerImagePositionY);
        // x の範囲がボックスのサイズ内にあるかどうか
        if (newPosition.x < -2.5f)
        {
            newPosition.x = -2.5f;
        }
        else if (newPosition.x > 2.5f)
        {
            newPosition.x = 2.5f;
        }
        transform.position = newPosition;
    }
}

クリックして駒を生成する

駒を生成するために、スポナーをクリックした時に駒を生成するようにします。

まずは駒を生成するためのスクリプトを作成します。

駒生成のスクリプトをアタッチするオブジェクトの作成

駒のスクリプトをアタッチするオブジェクトを作成します。

Hierarchy を右クリックし、Create Empty を選択し、名前を KomaFactoryObject に変更します。

Inspector の Add Component から New Script を選択し、名前を KomaFactory にしてスクリプトを作成します。

作成したスクリプトは Scripts フォルダに移動させておいてください。

![駒のスクリプトをアタッチするオブジェクト]/imgs/how-to-create-unity-merge-puzzle-2-4.png)

駒のスクリプトの作成

駒のスクリプトを作成します。

Inspectorからスクリプトを作成していましたが、今回は先にスクリプトを作ってからアタッチします。

Scriptsフォルダで右クリックをし、Create > MonoBehaviour Script を選択し、名前を Koma にしてスクリプトを作成します。

ProjectウィンドウからPrefabsフォルダを開き、駒のプレファブを一括選択して、Inspectorから Add Component を選択し、Komaスクリプトをアタッチします。

駒のスクリプトの記述

駒がぶつかったときの処理などは、後で追加していきます。一旦今は、駒の情報を持たせるためのプロパティだけを追加しておきます。

Assets/Scripts/Koma.cs に下記のように記述します。

using UnityEngine;

public class Koma : MonoBehaviour
{
    
    // 駒の種類
    public int Type { get; set; }
    
    // マージ済みフラグ
    public bool IsMerge { get; set; }
    
    // 進化可能かどうか
    public bool CanPromote { get; set; }
    

}

駒のスクリプトには、下記の情報を持たせるためのプロパティを追加しています。

駒の種類
マージ済みフラグ
進化可能かどうか

駒生成スクリプトの記述

Assets/Scripts/KomaFactory.cs に下記のように記述します。

using System;
using UnityEngine;

public class KomaFactory : MonoBehaviour
{
    
    // シーン内でシングルトンにする
    public static KomaFactory Instance { get; private set; }
    
    // 駒のPrefabのリスト
    [SerializeField] private Koma[] komaPrefabList;

    private void Awake()
    {
        if (Instance == null)
        {
            Instance = this;
        }
        else
        {
            Destroy(gameObject);
        }
    }
    
    // 駒を生成する
    public Koma CreateKoma(Vector2 position, int komaType)
    {
        if (komaType < 0 || komaType >= komaPrefabList.Length)
        {
            throw new ArgumentOutOfRangeException(nameof(komaType), komaType, "komaType is out of range");
        }
        
        // 駒を生成
        var koma = Instantiate(komaPrefabList[komaType]);
        koma.transform.position = position;
        // 角度をランダムにする
        koma.transform.rotation = Quaternion.Euler(0, 0, UnityEngine.Random.Range(0, 360));
        // 駒の種類を設定
        koma.Type = komaType;
        // 進化可能かどうかを設定
        koma.CanPromote = komaType + 1 < komaPrefabList.Length;
        
        return koma;
    }
    
    // ランダムな位置に駒を生成する
    public Koma CreateRandomKoma(Vector2 position, int maxKomaType)
    {
        var komaType = UnityEngine.Random.Range(0, maxKomaType);
        return CreateKoma(position, komaType);
    }

}

KomaFactoryクラスは、シーン内でシングルトンになるようにしています。

CreateKomaメソッドは、引数で渡された位置に、指定された種類の駒を生成します。

CreateRandomKomaメソッドは、引数で渡された位置に、ランダムな種類の駒を生成します。

これで、例えば別のスクリプトから、 KomaFactory.Instance.CreateRandomKoma(new Vector2(0,0), 3); のように記述することで、任意の位置に駒を生成することができます。

駒はPrefabを使って生成するので、komaPrefabListに生成対象となるPrefabを設定しておきます。

Inspectorから、KomaFactoryObjectを選択し、Inspectorにある Koma Factory (Script) の Koma Prefab List に、駒のPrefabを設定します。

スポナーでクリックした時に駒を生成するように修正

クリックした時に駒落とすようにスクリプトを修正します

Assets/Scripts/Spawner.cs に下記のように記述します。

using System.Collections;
using UnityEngine;

public class Spawner : MonoBehaviour
{
    // スポナーのY位置
    private const float SpawnerImagePositionY = 4.2f;
    
    // 現在持っている駒のY位置
    private const float CurrentKomaPositionY = 3.6f;
    
    // スポナーが現在持っている駒
    private Koma _currentKoma;
    
    void Start()
    {
        // 起動時に最初に持っている駒を生成
        var koma = KomaFactory.Instance.CreateRandomKoma(new Vector2(transform.position.x, CurrentKomaPositionY), 4);
        // 現在持っている駒に設定
        _currentKoma = koma;
        // 重力を0に設定
        _currentKoma.GetComponent<Rigidbody2D>().gravityScale = 0;
    }
    
    void Update()
    {
        UpdateSpawnerPosition();
        
        if (Input.GetMouseButtonDown(0) && _currentKoma)
        {
            // 現在持っている駒を落とす
            DropKoma();
            
            // 次落とす駒を生成
            StartCoroutine(GenerateNextKoma(4));
        }
    }
    
    private void UpdateSpawnerPosition()
    {
         
        // マウスの座標を取得
        var mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        var newPosition = new Vector2(mousePosition.x, SpawnerImagePositionY);
        // x の範囲がボックスのサイズ内にあるかどうか
        if (newPosition.x < -2.5f)
        {
            newPosition.x = -2.5f;
        }
        else if (newPosition.x > 2.5f)
        {
            newPosition.x = 2.5f;
        }
        // スポナーの位置を更新
        transform.position = newPosition;
        // スポナーが持っている駒の位置を更新
        if (_currentKoma)
        {
            _currentKoma.transform.position = new Vector2(newPosition.x, CurrentKomaPositionY);
        }
    }
    
    
    private void DropKoma()
    {
        if (!_currentKoma) return;
        // 重力を元に戻して落とす
        _currentKoma.GetComponent<Rigidbody2D>().gravityScale = 1;
        // 落とすとスポナーは駒を持たない状態になるので、スポナーが持っている駒をnullに設定
        _currentKoma = null;
    }
    
    private IEnumerator GenerateNextKoma(int maxKomaType)
    {
        // 1秒待つ
        yield return new WaitForSeconds(1.0f);
        // 駒を生成
        var koma = KomaFactory.Instance.CreateRandomKoma(new Vector2(transform.position.x, CurrentKomaPositionY), maxKomaType);
        // 重力を0に設定
        koma.GetComponent<Rigidbody2D>().gravityScale = 0;
        // 現在スポナーが持っている駒に設定
        _currentKoma = koma;
        
    }
}

ここまでのスクリプトを記述することで、クリックすると駒が落ちるようになります。

レイヤー位置の設定

うまい感じに動いていますが、スポナーと駒が重なっているときに、駒が手前に表示されるようにレイヤー位置を設定します。

下記のようにそれぞれのオブジェクトのレイヤー位置を設定します。

Box->Field
- Order in Layer: -50
Spawner
- Order in Layer: -20
Prefabs->各駒
- Order in Layer: -10

これできれいに表示されるようになりました。

まとめ

今回は、スポナーを作成し、クリックした時に駒を生成するようにしました。

次回は、駒がぶつかった時の処理を追加していきます。

【Unity】スイカ風マージパズルゲームの作り方 その2 ~ スポナーを作る ~【2024年最新】

目次