【Unity】モバイル向けバーチャルスティックを導入してみよう！

今回はUnityで使えるバーチャルスティックの作り方をお伝えしたいと思います。
私も最初作る方法がわからず悩んだ経験があるので同じような方の参考になれば幸いです。

 

はじめに

今回はバーチャルスティックを紹介したいと思います。
バーチャルスティックとはこんな感じのものです！

タッチするとスティックが現れてスライドすると入力が取得できるものです。

 

 

導入方法

では作り方を説明したいと思います。
まずは下記のファイルをインポートしてください。

ダウンロード

ダウンロードはこちら
[Unity]バーチャルスティック

 

インポートする

ダウンロードが完了したらzipを解凍してunitypackageをご自身のプロジェクトに取り込んでください。

unitypackageのインポート方法がわからない方はこちらをご確認ください

Unityプラグイン(unitypackage)のインストール方法

今回はダウンロードしたUnityプラグイン(unitypackageファイル)を インストールする際に必要な手順を紹介したいと思います。

tedenglish.site

2023.12.29

 

 

インポートされたフォルダ

まずインポートするとAssetsフォルダ以下に
下記のような「TedLab_VirtualStick」フォルダが追加されます。

 

 

 

 

 

バーチャルスティックのPrefab

バーチャルスティックは下記のPrefabをシーンのCanvas以下に配置すれば利用できるようになります。

Assets/TedLab_VirtualStick/Prefab/VirtualStick

 

 

バーチャルスティックをシーンに置いてみる

下記のようにシーンのCanvas以下にPrefabをドラッグ＆ドロップして配置します。

 

 

 

注意：Canvas設定を確認

ちなみにCanvasの設定は「ScreenSpace – Overlay」でなければ動作しないのでご注意ください。

 

 

 

バーチャルスティックをカスタマイズする

基本的にPrefabの中身を変更していただければ下記を変更することが可能です。

 

タッチ反応範囲・移動範囲を設定

Prefabを開いてください。

VirtualStickオブジェクトを選択し、下記画像の箇所で

1. タッチが反応する範囲を変更
2. バーチャルスティックの幅を変更

が可能です。

 

 

バーチャルスティックのデザインを変更する

次はVirtualStickBack, VirtualStickBarwを変更することでデザインを変更することも可能です。

主に

1. スティックのサイズ
2. スティックのデザイン画像の差し替え
3. スティックの色

などが下記で変更可能です。

ちなみにVirtualStickBarも同じ箇所で調整可能なので試してみてくださいね。

 

 

 

 

ゲーム部分への反映

ただこれだとバーチャルスティックの挙動が行われるだけでゲーム側に値を受け取ることができません。

反映する場合は

VirtualStickGUIスクリプトを参照し、InputValueを参照してください。
すると現在どのような値になっているか0~1の値でx,yの値で取得することができます！

 

 

 

 

スクリプト内容

こちらにスクリプトも貼っておきたいと思います。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

namespace TedLab
{
    public class VirtualStickGUI : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IDragHandler
    {
        public bool IsOperating{ get{ return m_operating; } }
        public Vector2 InputValue{ get{ return m_InputValue; } }

        [SerializeField] RectTransform refRectTransform = null;
        [SerializeField] Image joyStickBack = null;
        [SerializeField] Image joyStick = null;
        [SerializeField] float radius = 100f;
    
        Vector2 m_InputValue = Vector2.zero;
        Vector2 m_StartPosition = Vector2.zero;
        bool m_enable = true;
        bool m_operating = false;

	    void Start ()
        {
            joyStickBack.gameObject.SetActive(false);
            joyStick.gameObject.SetActive(false);
	    }

        public void OnPointerDown(PointerEventData data)
        {
            if(!m_enable){
                return;
            }
            m_operating = true;
            Vector2 pos = GetLocalPosition(data.position);
            joyStickBack.rectTransform.localPosition = pos;
            joyStick.rectTransform.localPosition = pos;
            m_StartPosition = pos;

            joyStickBack.gameObject.SetActive(true);
            joyStick.gameObject.SetActive(true);

            m_InputValue = Vector2.zero;
        }

        public void OnPointerUp(PointerEventData data)
        {
            if(!m_enable){
                return;
            }
            m_operating = false;
            joyStickBack.gameObject.SetActive(false);
            joyStick.gameObject.SetActive(false);

            m_InputValue = Vector2.zero;
        }

        public void OnDrag(PointerEventData data)
        {
            if(!m_enable){
                return;
            }

            Vector2 pos = GetLocalPosition(data.position);
            Vector2 vec = pos - m_StartPosition;
            float rad = Mathf.Atan2(vec.y, vec.x) * Mathf.Rad2Deg;
            float dist = vec.magnitude;

            if (dist <= radius)
            {
                joyStick.rectTransform.localPosition = pos;
            }
            else
            {
                joyStick.rectTransform.localPosition = new Vector2(m_StartPosition.x + radius * Mathf.Cos(rad * Mathf.Deg2Rad), m_StartPosition.y + radius * Mathf.Sin(rad * Mathf.Deg2Rad));
            }

            // 入力値(0~1)
            float param = Mathf.Min(dist, radius) / radius;
            vec.Normalize();
            m_InputValue = vec * param;
        }

        Vector2 GetLocalPosition(Vector2 screenPosition)
        {
            Vector2 result = Vector2.zero;
            RectTransformUtility.ScreenPointToLocalPointInRectangle(refRectTransform, screenPosition, null, out result);
            return result;
        }

        // 有効設定
        public void SetStickEnable(bool enable)
        {
            m_enable = enable;

            if(!m_enable)
            {
                joyStickBack.gameObject.SetActive(false);
                joyStick.gameObject.SetActive(false);
                m_InputValue = Vector2.zero;
            }
        }
    
    }
}

 

 

機能を利用したゲーム(PR)

下記のゲームではこのバーチャルスティックを利用して開発しました。
ご興味がありましたらぜひ見ていただけると幸いです。

 

「妖怪剣劇アクション 妖言 零之章」 公式サイト

ゲーム「Yougen - 妖怪剣劇アクション」の公式サイトです。

tedenglish.site

2022.11.06

鳥フライト 公式サイト

ゲームアプリ「鳥フライト」の公式サイトです。

tedenglish.site

2023.12.13

 

 

終わりに

いかがでしたでしょうか？

今回は以外と調べても見つからなかったバーチャルスティックの実装を紹介してみました。
同じようにバーチャルスティックの実装方法がわからず苦労されている方の参考になれば幸いです。

ではここまでお読みいただきありがとうございました。