🎮

【Unity】uGUIで使える『Joystick Pack』をもっと便利に拡張してみる

2019/08/13に公開

この記事は「Unity アセット真夏のアドベントカレンダー 2019 Summer!」10日目の記事です。

 はじめに今回はuGUIベースのバーチャルパッド(Joystick)を実現できる「Joystick Pack」の使い方と応用を紹介しようと思います。


Joystick Pack

 Joystick Packの紹介
 Joystickの種類4種類の挙動をするJoystickが用意されています

 Fixed Joystick位置が固定された基本的なJoystickです。


 Floating Joystick設定されたRectTransformの範囲内ならどこからでも使えるJoystickです。


 Dynamic JoystickFloating Joystickの機能に加え、動かした方向に基準が動いていくJoystickです。


 Variable Joystick上記3つのJoystickを動的に切り替えることができるJoyStickです。ユーザー設定に応じて切り替えるような使い方が出来そうです。(ScriptからはVariableJoystick.SetMode(JoystickType)で切替可能)

<img width="265" alt="スクリーンショット 2019-08-13 9.06.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55365/5d7cc80f-0bf2-dc20-2a85-fc10de5aa839.png">

 デザインの種類計24種類のデザインが予め用意されています。

 全方位用背景(6種類)

 ハンドル(6種類)

 横方向用背景(6種類)

 縦方向用背景(6種類)

 設定項目共通で動作に関する設定が出来ます。
<img width="263" alt="スクリーンショット 2019-08-13 9.19.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55365/e7cde7bb-b40c-0638-8d6e-f89199d27237.png">
Handle Range
ハンドルが動く範囲
背景画像の半径を1としたスケール

Dead Zone
ハンドルが動くまでの閾値
背景画像の半径を1としたスケール

Axis Options

Both: 全方位

Horizontal: 縦方向

Vertical: 横方向

Snap X

trueの場合、0か1を返す

Snap Y

trueの場合、0か1を返す


 使い方参照を取得してfloatかVector2として受け取る。
using UnityEngine;

public class Test : MonoBehaviour
{
    [SerializeField] Joystick joystick = null;
    void Start()
    {
        float horizontal = joystick.Horizontal;
        float vertical = joystick.Vertical;
        Vector2 direction = joystick.Direction;
    }
}

 応用①: 固定っぽいのに実際はどこからでも操作できるJoystick画面下部に表示されているが、実際にはタップした座標が基準になっています。
「アーチャー伝説」などで使われている方式です。特徴として、ユーザーに操作しやすい領域を示しつつも、実際の操作時は方向だけ意識すれば思ったとおりの操作ができます。

 実装全てのJoystickの親クラスになっているJoystickを継承して新たなクラスを作ります。
FixedFloatingJoystick.cs
using UnityEngine;
using UnityEngine.EventSystems;

public class FixedFloatingJoystick : Joystick
{
    Vector2 InitPos = Vector2.zero;
    protected override void Start()
    {
        InitPos = background.anchoredPosition;
        base.Start();
    }

    public override void OnPointerDown(PointerEventData eventData)
    {
        background.anchoredPosition = ScreenPointToAnchoredPosition(eventData.position);
        background.gameObject.SetActive(true);
        base.OnPointerDown(eventData);
    }

    public override void OnPointerUp(PointerEventData eventData)
    {
        background.anchoredPosition = InitPos;
        base.OnPointerUp(eventData);
    }
}

 応用②: Joystickの位置をRectTransformで設定しやすくするとても便利な「Joystick Pack」ですが、少しだけ不満がありました。それはJoystickの位置の調整が左下のアンカー基準でしか出来ないことです。(そういう実装になっているため)
<img width="264" alt="スクリーンショット 2019-08-13 9.44.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55365/7d527636-716d-bbda-788d-2976fbd8629b.png">
左下アンカーでどういう時に困るかというと、例えば下記のように画面下部中央に設置した場合です。左はiPhone XSに合わせたサイズですが、iPhone 4のCanvasサイズに変えると基準が中央からずれてしまうことが分かります。
対策として、継承先クラスで実行時にアンカー位置を修正する処理を入れてやりました。
    protected override void Start()
    {
        background.SetAnchorWithKeepingPosition(0, 0);
        base.Start();
    }
SetAnchorWithKeepingPositionは下記の記事で紹介している拡張メソッドです。これによって、エディタ上では任意のアンカーで位置の調整ができるようになりました。
uGUIで座標を変えずにPivotとAnchorの値を変えるための拡張メソッド(RectTransform) - Qiita

 応用③: 入力開始・終了のタイミングを通知する入力開始と終了のタイミングで処理を挟みたい場合があったので、通知機能を実装してみました。

 使い方Joystickが押されたタイミングと離されたタイミングで、以下の様に通知が飛んできます。
[SerializeField] NotifableJoystick joystick = null;
void Start()
{
    joystick.PressedDown.Subscribe(_ =>
    {
        Debug.Log("押された");
    }).AddTo(gameObject);

    joystick.PressedUp.Subscribe(_ =>
    {
        Debug.Log("離された");
    }).AddTo(gameObject);
}

 実装「UniRx」を使ってイベントを実装してみました。同様にJoyStickを継承して拡張しています。
NotifableJoystick.cs
using UnityEngine;
using UnityEngine.EventSystems;
using UniRx;
using System;

public class NotifableJoystick : Joystick
{
    public IObservable<Unit> PressedDown { get { return PressedDownSubject.AsObservable(); } }
    Subject<Unit> PressedDownSubject = new Subject<Unit>();
    public IObservable<bool> PressedUp { get { return PressedUpSubject.AsObservable(); } }
    Subject<bool> PressedUpSubject = new Subject<bool>();
    bool isPressing = false;
    public override void OnPointerDown(PointerEventData eventData)
    {
        PressedDownSubject.OnNext(Unit.Default);
        isPressing = true;
        base.OnPointerDown(eventData);
    }
    public override void OnPointerUp(PointerEventData eventData)
    {
        if (isPressing)
        {
            PressedUpSubject.OnNext(true);
            isPressing = false;
        }
        base.OnPointerUp(eventData);
    }
    protected override void HandleInput(float magnitude, Vector2 normalised, Vector2 radius, Camera cam)
    {
        base.HandleInput(magnitude, normalised, radius, cam);
        if (magnitude >= DeadZone && isPressing)
        {
            PressedUpSubject.OnNext(false);
            isPressing = false;
        }
    }
}

 最後に「Joystick Pack」はuGUIベースで使えて、しかも無料の素晴らしいアセットです。この記事がぜひ参考になると嬉しいです。
今回の記事で紹介したコードのライセンスは、特に記載がない限りCC0です。

 関連Unity アセット真夏のアドベントカレンダー 2019 Summer!
【Unity】uGUI でジョイスティック（バーチャルパッド）を使用できる「Joystick Pack」紹介（無料） - コガネブログ
Virtual Joystick Packの使い方