Unity|マッチ3パズルゲームの作成。Part1.ピース生成・ボード作成

Unity2Dで「マッチ３のパズルゲーム」を作成していきます。完成形を作ると長くなるので、基本となる機能を作成していきます。

はじめに

今回作成するマッチ３のパズルゲームは、「隣り合うピースの入れ替え」、「３つ以上同じ色で揃えると消える」を基本軸で作成していきます。

Unityのヴァージョン

Unity 6000.6.5f1ヴァージョン、「Universal 2D」テンプレートで作成していきます。

利用する画像

下記の画像をピースとして利用していきます。Inkscapeで簡単に作成したものです。

下記がエクスポートした画像です。

ゲーム作成開始

ここからゲームを作成していきます。まずはカラーピースを並べたボードを作成します。

ピースの作成

Assetsフォルダ内にSpritesフォルダを作成して、上記のエクスポートした画像を入れます。画像を選択してimportSettingsの「PixelsPerUnit」を128に変更します。画像が分割されていない場合は、SpriteModeを「Multiple」に変更して分割します。

Assetsフォルダ内にPrefabsフォルダを作成。分割された画像をHierarchyにドラッグアンドドロップ、名前を変更してPrefabsフォルダに移動します(名前はredTileとなっていますが、redPieceでも何でも分かりやすのでOK)。

下記の様に全ての色の画像をプレハブ化します。

ボードの作成

次にピースを並べて初期ボードを作成します。Hierarchyで「CreateEmpty」を選択、空オブジェクトを追加して名前を「Board」に変更。同じ名前でスクリプトを作成してアタッチします。

「Board」スクリプトの中身を下記に変更します。

using UnityEngine;

public class Board : MonoBehaviour
{

    [SerializeField] private int width = 6;
    [SerializeField] private int height = 6;
    [SerializeField] private GameObject[] piecePrefabs;

    private void Start()
    {
        GenerateBoard();
    }

    void GenerateBoard()
    {
        for (int y = 0; y < height; y++)
        {
            for (int x = 0; x < width; x++)
            {
                int randomIndex = Random.Range(0, piecePrefabs.Length);
                GameObject piece = Instantiate
                    (piecePrefabs[randomIndex], new Vector3(x, y), Quaternion.identity);
            }
        }
    }
}

指定した幅、高さ（ボードのサイズ）の数だけランダムに選択したピースを並べます。

パラメータを下記の様にセットします。

実行すると下記の様なゲーム画面になります。始点が0,0なので右上にボードが作成されます。

カメラ調整

位置を調整するので、ピースの生成位置を調整するか、カメラの位置を変更します。今回はボードサイズに合わせてカメラの位置を変更。「Board」スクリプトに下記「SetCameraPos」を追加します。

    private void Start()
    {
        SetCameraPos();
        GenerateBoard();
    }

    void SetCameraPos()
    {
        var cam = Camera.main;
        float x = (float)(width - 1) / 2;
        float y = (float)(height - 1) / 2;

        cam.transform.position = new Vector3(x, y, cam.transform.position.z);
    }

ついでにカメラの背景の色も黒色に変更しておきます（MainCameraオブジェクトのCamera→Environmentから変更）。実行して下記の様に真ん中にボードが作成されたらOKです。配色はランダムになります。