創作世界のいろいろ〜AdobeとかC#とか

絵を描く人がC#とか3Dとか動画編集とかやる為の備忘録

【Unity】UIのButtonで滑らかに360度移動の操作をする

※有料のAssetを使います。

 

アセットストアからUltimateJoyStickを購入します。

11$(1500円程度)ですので無料にこだわる方でなければ是非DLしてみてほしいアセットです。

assetstore.unity.com

 

Import後、アセットを制作された会社名(Tank & Healer Studio)のフォルダが追加されます。

この中のPrefabsフォルダにあるものがJoyStickです。いくつかあるのはデザインの違い(だけだと思う)のですが、今回は、一番下のUltimate Joystickをヒエラルキーに追加します。

追加したPrefabをクリックすると、一番下にUltimateJoystickのスクリプトがアタッチされていて、画像のように4項目に分かれた設定リストがあります。

Positioningでは位置を調整できます。

この左下にあるのがUltimateJoystick

SettingsではJoystickの挙動の微調整ができるみたいです。

VisualOptionsは触ってないのでわかりませんが見た目(色味)の調整ですよね。

一番下のScriptReferenceに、JoystickNameを入力する欄があるので、ここに任意の名前をつけてください。

公式Youtube動画に倣って「Movement」とします。これで基本設定完了です。

 

その後、動かしたいオブジェクトに新規作成したスクリプトをアタッチします。

スクリプトの内容は以下をそのままコピペでOKです。

usingの追加も必要ありません。

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

public class StarIconManager : MonoBehaviour
{
    RectTransform mytransform;

    [SerializeField]
    float movespeed = 300f;

    // Start is called before the first frame update
    void Start()
    {
        mytransform = GetComponent<RectTransform>();
    }

    // Update is called once per frame
    void Update()
    {
        mytransform.Rotate(0, 0, 0.1f);

        /*通常の移動(キーボードWASDキーでの移動コード)
         *mytransform.position = mytransform.position + new Vector3(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"), 0) * movespeed * Time.deltaTime * -1;
        */
        mytransform.position = mytransform.position + new Vector3(UltimateJoystick.GetHorizontalAxis("Movement"), UltimateJoystick.GetVerticalAxis("Movement"), 0) * movespeed * Time.deltaTime;
    }
}

これだけでOK。再生ボタンを押すと、、

Joystickで動くようになりました。

 

利点は、360度タップしたまま方向転換できること。

また、通常のWASDの移動と同じように使えるので、サンプルのように回転させながらとか、他の挙動も一緒に実装できるのでとっても使いやすいです。

他にもカメラの向きを変えるアセットや、良くある円形のメニューアセットもあるのでそれらを使ってUIを少しいじるとかなりクオリティの高いゲームができそう。

スターフォックスみたいな操作も可能になります。