Unity|簡単なスロットマシンを作成。Part1.リールを作成

今回はUnity2Dで「1ラインのシンプルなスロットマシン」を作成してみます。まずはリールを作成して動くところまで実装していきます。

はじめに
1. 画像の準備
実装開始
1. リール枠の作成
2. リールを3つにする

はじめに

Unityのバージョンは2022.3.14f1です。

「ボタンを押すとリールが回転」、「自動でリールがストップ」、「絵柄が揃うとポイント獲得」。という感じの簡単な仕組みのスロットマシンを作成してみます。

画像の準備

画像は好きなもので問題ないです。今回は「ぴぽや倉庫」さんの「アイコン画像」を利用していきます。「アイコン.zip」をダウンロード後、展開します。

「24×24」のフォルダ内にある画像をランダムに組み合わせて下記のような画像を作成。余白を持たせるためにサイズは32×32に変更。画像をつなげて一番上と一番下の画像を同じものにします。

実装開始

まずは作成した画像を取り込み、Inspectorでドット絵の設定を適用します。

画像をHierarchyにドラッグアンドドロップします。

下記スクリプトを作成します。スペースキーを押したら画像が動くようになります。（画像を一定周期で少しずらしています。）

using System.Collections;
using UnityEngine;

public class Reel : MonoBehaviour
{
    [SerializeField] private float ResetPosition;

    private float ReelSpeed;
    private Vector2 StartPosition;
    private float reelStep = 0.25f;
    private bool reelStart = false;

    private void Awake()
    {
        StartPosition = new Vector2(transform.position.x, 3.5f);
        ReelSpeed = 0.05f;
    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space) && !reelStart)
        {
            reelStart = true;
            StartCoroutine("RellRotate");
        }
    }

    private IEnumerator RellRotate()
    {

        for (int i = 0; i < 200; i++)
        {
            if (transform.position.y <= ResetPosition)
                transform.position = StartPosition;

            transform.position = new Vector2(transform.position.x, transform.position.y - reelStep);

            yield return new WaitForSeconds(ReelSpeed);
        }
        reelStart = false;

    }
}

イメージとしては下記の背景を動かしているものに近いです。

2Dゲームの背景画像を簡単に右から左へ動かす【Unityゲーム制作】

Unityで背景画像を簡単に動かしてみます。同じ画像を2枚並べてスクリプトで画像の位置を動かし、背景が動いている風にします。

今回は、一番上の画像と一番下の画像を同じにすることでぐるぐる回るのを実現しています。同じ画像を２枚並べて動かす方法もあります。

スクリプトをアタッチして、パラメータをセットします。

試しに実行してみます。スペースキーを押して下記のように動けばOKです。

リール枠の作成

「2DObject」→「Sprites」→「Square」を追加します。

名前をReelFrameにして位置とレイヤー順序を変更。AddComponentから「SpriteMask」を追加します。

Reelオブジェクトの「Sprite Renderer」の「Mask Interaction」を「Visible Inside Mask」に変更します。

下記のような感じにリールの枠外が表示されなくなります。

画像マスキングの基本は下記で書いています。

画像をマスキングして表示したり隠したりする-SpriteMask-【Unityメモ】

今回はUnityの2Dゲームで画像をマスキングして、表示したり隠したりしてみます。はじめにUnityのバージョンは2021.3.14f1です。SpriteMaskを利用して画像を表示したり隠したりしてみます。実装開始まずはスプライト（画像）...

リールを3つにする

リールを3つにしていきます。まずは枠のスケールを変更。

リールをコピーして横に並べます。

「CreateEmpty」で空オブジェクトを追加、名前をGameManagerとします。

Reelのスクリプトは下記に変更します。リールの回転数をセットできるようにしています。

using System.Collections;
using UnityEngine;

public class Reel : MonoBehaviour
{
    [SerializeField] private float ResetPosition;

    private float ReelSpeed;
    private Vector2 StartPosition;
    private float reelStep = 0.25f;

    private void Awake()
    {
        ReelSpeed = 0.05f;
        StartPosition = new Vector2(transform.position.x, 3.5f);
    }

    public void RellStart(int num)
    {
        StartCoroutine(RellRotate(num));

    }
    private IEnumerator RellRotate(int num)
    {

        for (int i = 0; i < num; i++)
        {
            if (transform.position.y <= ResetPosition)
                transform.position = StartPosition;

            transform.position = new Vector2(transform.position.x, transform.position.y - reelStep);

            yield return new WaitForSeconds(ReelSpeed);
        }
    }
}

GameManagerのスクリプトを下記のように仮で作成。リール回転数は仮で固定します。

using UnityEngine;

public class GameManager : MonoBehaviour
{
    [SerializeField] private Reel[] reels;
    

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            reels[0].RellStart(40);
            reels[1].RellStart(48);
            reels[2].RellStart(52);
        }
    }
}

GameManagerにスクリプトをアタッチして、パラメータをセット。