小学生でもできるUnityの超シンプルなルーレット

Unity
2023.08.07

Unityの世界へようこそ。

このコースでは、簡単なルーレットを作っていくよ。

このブログは小学生向けUnity教室
シキサイが運営しています。

詳しく見る

完成品はこれ


上の画像リンクをクリックして、実際にルーレットがどう動くかを確認してね。

2Dプロジェクトの作成

まずはUnityで新しく2Dプロジェクトをつくってね。

ルーレット画像の準備

次にルーレット用の画像を準備するよ。
先生が作ったルーレットの画像があるから、これをダウンロードして使ってね。

オリジナルのルーレットを作りたい人は、自分で作ってもいいよ。
ただし、文字を回転させられるペイントソフトが無いと作れないから、それを持っているか確認してね。

画像素材のインポート

ルーレットの画像をUnityのプロジェクトにインポートしよう。
アセットフォルダ内にドラッグアンドドロップして入れてね。

ゲーム内にルーレットを表示する

ゲーム内にルーレットを表示させよう。
アセット内からゲームウィンドウの中にルーレットの画像をドラッグアンドドロップをしよう。
そしてUnityの再生ボタンを押して、ゲーム上にルーレットの画像が表示されたらOK。

ルーレットを回してみる

じゃあ早速、ルーレットを回してみるよ。
ヒエラルキーウインドウからルーレットを選んで、
インスペクターでコンポーネントを追加を選んで、
C#のスクリプトを追加するよ。
スクリプト名はRouletteControllerにしよう。

そのスクリプトを開くと、こんなコードが書かれてるよね。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{

    void Start()
    {

    }

    void Update()
    {

    }
}

まずはフレームレートを60に固定しよう。
これはゲームがどのくらいの速さで動くかという設定だよ。
一般的なテレビゲームは大体60に設定されているから、ここでも60にしたよ。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {

    }
}

次にルーレットの回転速度の変数を作ろう。
減速するときに、小数になるから、型はfloat。
最初は止まっているので、0で初期化しようね。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {

    }
}

次は、ルーレットと回転させるコードを書くよ。

transform.Rotate(0, 0, rouletteSpeed);
コードの意味は、rouletteSpeedの値でルーレットを回転させると言うものだ。
これをUpdateの中に書くと毎秒60回（さっき決めたフレームレートの数だけ）実行されるよ。

じゃあ再生してみようか。
これだけじゃまだ動かないよね。
だってrouletteSpeedが0のままだから。

rouletteSpeedを10とかに書き換えると動くよ。
やってみて。
動いたでしょ。
でもこれじゃ意味がないから、0に戻そうか。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {
        transform.Rotate(0, 0, rouletteSpeed);
    }
}

次は、マウスをクリックすると回転が始まるようにするよ。

Input.GetMouseButtonDown(0)はマウスの左クリック。
ちなみに中の数字が1だと、右クリック。
2だとマウスホイールの押し込みだよ。

もし、クリックされたらrouletteSpeedを10にするよ。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            rouletteSpeed = 10;
        }

        transform.Rotate(0, 0, rouletteSpeed);
    }
}

再生して、クリックしてみよう。
ちゃんと回転したね。

ルーレットを止めよう


次はルーレットを止める機能を作るよ。

まずは簡単に、Updateの中に
rouletteSpeed *= 0.99f;
を追加しよう。
これは、ルーレットのスピードを今の0.99倍にするという意味だよ。
ｆが最後についているのは、小数だから。Unityではこう書かなきゃいけないって決まってるから、気をつけてね。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {

        if (Input.GetMouseButtonDown(0))
        {
            rouletteSpeed = 10;
        }

        transform.Rotate(0, 0, rouletteSpeed);

        rouletteSpeed *= 0.99f;
    }
}

じゃあ再生してみようか。
回転を始めたら、自動で止まるようになったね。

でも勝手に止まるとつまらないから、クリックしたら止まるように変えようか。

どんなコードを書くかというと、

1：クリックした時、ルーレットが止まっていたら、ルーレットを回転させる。
2：クリックした時、ルーレットが回転していたら、ルーレットを止める。

そのためには今、ルーレットが止まっているか、回転しているか、分からないといけないね。
だから、それを判別するための変数、isRouletteStopを作るよ。
止まっているか、止まっていないかの2通りだから、変数の型はboolを使おう。
boolは、0か1か、○か×か、オンかオフか、YesかNoか、2通りの状態しか取らないものに使うよ。
最初は止まっているから、trueで初期化。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;
    bool isRouletteStop=true;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {

        if (Input.GetMouseButtonDown(0))
        {
            rouletteSpeed = 10;
        }

        transform.Rotate(0, 0, rouletteSpeed);
    }
}

そして、
クリックした時、ルーレットが止まっていたら、ルーレットを回転させ、ルーレットが回転していたら、言い換えると、ルーレットが止まっていなかったら、ルーレットを止める。
これをやるために、if文の中にもう一つif文を書いて、そこで条件分岐をさせるよ。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;
    bool isRouletteStop = true;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (isRouletteStop == true)
            {
                rouletteSpeed = 10;
                isRouletteStop = false;
            }
            else if (isRouletteStop == false)
            {
                rouletteSpeed = 0;

            }
        }

        transform.Rotate(0, 0, rouletteSpeed);
    }
}

後は、回転を始めさせたらisRouletteStopをfalseにすることを忘れずにね。

じゃあ再生してみようか。

これで基本的なルーレットは完成したね。

クリックしてから、少しずつ減速して止める

クリックしてすぐに止まると、狙った場所で止めるのが簡単だから、止まるまでのタイムラグを作りたいね。
こういうのを「スベリ」というよ。

スベリを実現するには、減速状態を表すisDeceleratingという変数を作って、クリックされたらrouletteSpeedを0にする代わりに、isDeceleratingをONにするようなコードに書き換えよう。
初期状態では、ルーレットは完全に止まっていて、減速中ではないから、isDeceleratingはfalseで初期化してね。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;
    bool isRouletteStop = true;
    bool isDecelerating = false;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (isRouletteStop == true)
            {
                rouletteSpeed = 10;
                isRouletteStop = false;
            }
            else if (isRouletteStop == false)
            {
                isDecelerating = true;
            }
        }

        transform.Rotate(0, 0, rouletteSpeed);
    }
}

そして、isDeceleratingがtrueだったら、ルーレットスピードを少しずつ下げるコードを追加しよう。

0.99倍だと、滑りすぎるので、今回は0.95倍くらいにしておこうか。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;
    bool isRouletteStop=true;　
    bool isDecelerating=false;　

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {

        if (Input.GetMouseButtonDown(0))
        {
　　　　　　if(isRouletteStop==true)
            {
                rouletteSpeed = 10;
                isRouletteStop=false;
            }
            if(isRouletteStop==false)
            {
                isDecelerating=true;
            }
        }

        transform.Rotate(0, 0, rouletteSpeed);

        if (isDecelerating==true)
        {
　　　　　　rouletteSpeed *= 0.99f;
        }
    }
}

ルーレットにスベリを追加できたね。
最後に、ルーレットが完全に止まったら、またクリックで回転させられるようにしよう。
rouletteSpeedが0になったら、isRouletteStopをtrueにすればいいよね。
減速状態もrouletteSpeedが0になったら終了だから、isDeceleratingもfalseにしないといけないよ。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RouletteController : MonoBehaviour
{
    float rouletteSpeed = 0;
    bool isRouletteStop = true;
    bool isDecelerating = false;

    void Start()
    {
        Application.targetFrameRate = 60;
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (isRouletteStop == true)
            {
                rouletteSpeed = 10;
                isRouletteStop = false;
            }
            else if (isRouletteStop == false)
            {
                isDecelerating = true;
            }
        }

        transform.Rotate(0, 0, rouletteSpeed);

        if (isDecelerating == true)
        {
            rouletteSpeed *= 0.95f;
            if (rouletteSpeed <= 0.01)
            {
                rouletteSpeed = 0;
            }
            if (rouletteSpeed == 0)
            {
                isRouletteStop = true;
                isDecelerating = false;
            }
        }
    }
}

rouletteSpeedに0.95を掛け算し続けても、永遠に0にはならないから、0.01以下になったら、ルーレットの速度を0にするコードも追加したよ。

これでルーレットは完成だ。
おめでとう。

1章はおしまい。
頑張ったね。お疲れさま。