【Unity】タイミングゲームの作り方

あのゲームのあの機能ってどうやって作るんだろう？を考えていきます。
効率のいい作り方などはわからないので、そういったものをお求めの方は回れ右。

今回は「ゲージが溜まったりカーソルが上下左右に行き来して、適切なところで止めると達成」といういろいろなゲームでよく見る機能ですね。タイミングゲームで調べたら出てきましたが正式名称なのかは知らない。

こういうやつ

Undertaleの戦闘時のものを雑に模写してドット絵を描きました。

この場合はちょうど真ん中あたりで止めたら成功、ということになりますかね。（戦闘は避けてたので実物は見たことなかった）

他のゲームだとゴルフなどスポーツ系のゲームでもよく使われますね。ゲージを最大までためたときに押すと最大パワーでボールを飛ばせたり。考え方としては一緒だと思います。

今回検証したUnityのバージョンは2021.3.7f1です。

Unityで作る場合、UI > Sliderでかんたんにベースとなるスライダーを用意することができます。

SliderはBackground、Fill Area、Handle Slide Areaで構成されています。この内、今回はFill Areaは使いません。
ここに画像を当てはめていきます。別にデフォルトのスライダーのままでもいいんですが、やっぱり絵素材はできるだけあったほうがテンションが上がるので、短時間でぱぱっと用意します。細かいことは気にしない。

Asepriteで作成しています。

“ベース”とします

こちらは”バー”とします。

まずはBackgroudにベース画像を当てはめます。

次はHandle Slide Area内のHandleオブジェクトのImageにバーの画像を当てはめます。あとは実際にsliderを動かしてみながらちょうどいい位置でバーが往復するように位置を調整します。（かんたんに合わせる方法があったら知りたい）

あとは空のオブジェクトを作って（SliderControllerとしました）、Add Componentでスクリプトを追加します。以下に中身のソースを記載します。

マウスをクリックしたとき、isClickedがfalse（クリック済みではない）ならストップするようにします。今回の場合は何度も試せるようにisClickedがtrueならスタートするようにしています。

また、真ん中あたりで止められたらコンソールにLogを出力しています。Undertaleではこのように設定した範囲でうまく止めることができたら攻撃成功となっているのかなと思います。

バーの値は0.01fずつ増やしています。最大までいったらmaxValueをtrueにしてその時はslider.valueを0.01fずつ減らします。増減する量が大きいとスピードが上がるので、止めるための難易度が上がります。この辺はちょうどいいところを設定できないと難しくなりすぎるので、どんな人が遊ぶゲームかを考えて作らなければなりません。

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

public class SliderMove : MonoBehaviour
{
    [SerializeField] Slider slider;
    private bool isClicked;
    private bool maxValue;

    // Start is called before the first frame update
    void Start()
    {
        slider.value = 0;
        maxValue = false;
        isClicked = false;
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0) && isClicked == false){
            Debug.Log("stop");
            isClicked = true;
        }
        else if (Input.GetMouseButtonDown(0) && isClicked == true)
        {
            Debug.Log("start");
            isClicked = false;
        }
        if (isClicked)
        {
            if (slider.value >= 4.5 && slider.value <= 5.5)
            {
                Debug.Log("Great!!");
            }
            return;
        }

        if (slider.value == 10)
        {
            maxValue = true;
        }
        if(slider.value == 0)
        {
            maxValue = false;
        }

        if (maxValue == true)
        {
            slider.value -= 0.1f;
        }

        if (maxValue == false)
        {
            slider.value += 0.1f;
        }
    }
}

最後にSliderオブジェクトを先程のSliderControllerのSlider Moveスクリプトにドラッグアンドドロップしたら完了です。