Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】Joystick Pack でバーチャルスティックを実装する【Unity】

今回はアセットの紹介をしていきます。
紹介するのはJoystick Pack。
バーチャルスティック(バーチャルパッド)を簡単に実装できる無料アセットです。

f:id:Raspberly:20200907111119p:plain

Asset Store

 

Twitterでも話題!

 

 

 

どんなアセット?

スマホ向けゲームで多く実装されているバーチャルスティックを簡単に実装できるアセットです。

↓にあるのがバーチャルスティック、コントローラーがないスマホでも本格的なアクションゲームが作成できます。
バーチャルスティックとボタンを組み合わせてバーチャルパッドと呼ばれることもありますね。

f:id:Raspberly:20200907021448g:plain

以下Asset Storeページから引用

 ジョイスティックパックには、ドラッグアンドドロップでプロジェクトで簡単に使用できる複数の異なる仮想ジョイスティックが含まれています。
このパックには18のバックグラウンドと6つのハンドルスプライトが付属しており、多くのカスタマイズが可能です。

 

 

開発環境

Unity2020.1.4f1

Joystick Pack ver2.1

 

デモシーンの確認

アセットインポート完了時はこんな感じです。
ドキュメントに目を通しておきましょう。

f:id:Raspberly:20200904014718p:plain

 

デモシーンはExamplesの中にあります。

f:id:Raspberly:20200906221019p:plain

 

実行してみるとこんな感じ、スティックを倒すとボールがコロコロ転がります。

f:id:Raspberly:20200906005501g:plain

画面の左上には、モードやスティックの値が表示されています。

 

3つのモード

このJoystickには3つのモードが用意されています。
デモシーンでは左上から変更することができます。

f:id:Raspberly:20200906230134p:plain

Fixed

スティックは常に表示され、位置が固定されているモードです。

f:id:Raspberly:20200906005501g:plain

Floating

スティックはタップされるまで非表示。
タップされたらその場にスティックが表示されるモードです。ぷにコンみたいな感じ。

f:id:Raspberly:20200907005655g:plain

Dynamic

スティックはタップされるまで非表示。
タップされたらその場にスティックが表示され、ドラッグ時に追従するモードです。

f:id:Raspberly:20200907005752g:plain

 

FloatingとDynamicは、デフォルトだと画面左側のみ反応します。
これは、VariableJoystickコンポーネントがアタッチされているオブジェクトの大きさを変えることで調整できます。

 

 

主要コンポーネント

このアセットを使いこなすうえで重要なコンポーネントを紹介します。

Variable Joystick

f:id:Raspberly:20200907013302p:plain

このコンポーネントがJoystickの挙動を管理しています。

Handle Range

ハンドル(スティックの中央の点)が動く範囲です。デフォルトで1ですが、3にすると↓のようになります。

f:id:Raspberly:20200907013848g:plain

Dead Zone

スティックの値が指定した値以下の場合反応しなくなります。
つまり、0.5を指定した場合スティックを0.5以上方向けないと反応しません。

Axis Options

軸を限定します。Bothの場合X軸Y軸ともに動作します。

Snap

通常スティックは-1~1まで値が変動しますが、
有効になっている場合、-1か0か1で取得するようになります。

MoveThreshold

スティックが移動する時しきい値です。Dynamicモードでのみ使われます。

Joystick Type

上記の3つのモードを指定します。

Background & Handle

スティックの画像を指定します。画像素材は数種類用意されています。

f:id:Raspberly:20200907024149p:plain



 

 

実際に試してみる

開発中のゲームへの導入方法ですが、付属のPrefabをシーンに追加するだけです。
Canvasの下に追加してください。

f:id:Raspberly:20200907014954p:plain

スティックの値の取得は付属のスクリプトを参考にするといいでしょう。

public class JoystickPlayerExample : MonoBehaviour
{
    public float speed;
    public VariableJoystick variableJoystick;
    public Rigidbody rb;

    public void FixedUpdate()
    {
        Vector3 direction = Vector3.forward * variableJoystick.Vertical + Vector3.right * variableJoystick.Horizontal;
        rb.AddForce(direction * speed * Time.fixedDeltaTime, ForceMode.VelocityChange);
    }
}

 

 

下記の参考資料を見ながら、ユニティちゃんをスティックで操作するものを作ってみました。
スマホ向けのバーチャルスティックは初めてですが、15分ほどで簡単に作成できました。

f:id:Raspberly:20200907021448g:plain
スクリプトはこんな感じ、スティックの傾きに合わせて向きと移動、アニメーションを行っています。

using UnityEngine;

public class UnityChanController : MonoBehaviour
{
    [SerializeField] VariableJoystick m_VariableJoystick;
    [SerializeField] Animator m_Animator;
    [SerializeField] float m_Speed  = 1;
    private CharacterController m_Controller;
    private Vector3 m_Direction;
    
    void Start()
    {
        m_Controller = GetComponent<CharacterController>();
    }
    
    void Update()
    {

        if(m_Direction != new Vector3(0, 0, 0))
        {
            transform.localRotation = Quaternion.LookRotation(m_Direction);
        }
        m_Animator.SetFloat("isMoving", Mathf.Max(Mathf.Abs(m_Direction.x), Mathf.Abs(m_Direction.z)));

        m_Controller.Move(m_Direction * m_Speed * Time.deltaTime);
    }

    public void FixedUpdate ()
    {
        m_Direction = Vector3.forward * m_VariableJoystick.Vertical + Vector3.right * m_VariableJoystick.Horizontal;
    }
}

 

 

もちろん実機でも動作します。

f:id:Raspberly:20200907023601g:plain

 

 

 

 

 

 

デモの解説 (2021/08/30 追記)

上記のデモの作り方を解説します。

開発環境

Unity 2020.3.14f1

Joystick Pack ver2.1

SDユニティちゃん 3Dモデルデータ ver1.01

 

ステージの作成とキャラクターの配置

最初にステージを作成します。
床用のオブジェクトとしてPlaneを配置し、Cameraは見下ろす形に配置します。

f:id:Raspberly:20210830212837p:plain

 

プレイヤーキャラクターのユニティちゃんも配置します。
Assets/Optimize SDKohaku-Chanz/Prefab/UTC_Defaultをシーンに配置します。

f:id:Raspberly:20210830213001p:plain

f:id:Raspberly:20210830213104p:plain

 

 

ジョイスティックの配置

Canvasを作成し、Assets/Joystick Pack/Prefabs/Variable JoystickCanvasの子オブジェクトとして配置します。

f:id:Raspberly:20210830222325p:plain

f:id:Raspberly:20210830213323p:plain

 

ジョイスティックはデフォルトで真っ白なのでやや見えづらいです。
なので色を変えておきます。(お好み)

f:id:Raspberly:20210830213518p:plain

ついでに大きさやスティックの位置も整えておきましょう。

f:id:Raspberly:20210830213616p:plain

 

 

AnimatorControllerの作成

ユニティちゃんをアニメーションさせるためAnimatorControllerを作成します。
Projectビューで右クリックしCreate/Animator ControllerからAnimatorControllerを作成します。

f:id:Raspberly:20210830213808p:plain

名前を「UTC_Animator」に変えておきます。

f:id:Raspberly:20210830213901p:plain

 

この「UTC_Animator」をダブルクリックして、Animatorビューを開きます。

f:id:Raspberly:20210830214339p:plain

パラメータの作成

Animatorビュー左上のParamertersボタンを押して、+ボタンからFloatを選びFloat型のパラメータを作成します。

f:id:Raspberly:20210830214510p:plain

パラメータの名前は「isMoving」にします。(作り方までGIF参照)

f:id:Raspberly:20210830214758g:plain

BlendTreeの作成

BlendTreeを作成します。BlendTreeはパラメータを元にアニメーションを自然に切り替える機能です。

Animatorビューの何もない所で右クリックしCreate State/From New Blend TreeからBlendTreeを作成します。

f:id:Raspberly:20210830215014p:plain

作成したBlendTreeをダブルクリックします。

f:id:Raspberly:20210830215057p:plain

 

するとBlendTreeの編集画面が開けます。

f:id:Raspberly:20210830215238p:plain

InspectorビューからMotion Fieldを2つ追加します。(GIF参照)

f:id:Raspberly:20210830215456g:plain

 

モーションを設定するフィールドが2つできたので、
止まっているモーション「StandA@loop」と、
走っているモーション「run_front@loop」をそれぞれ設定します。

f:id:Raspberly:20210830222103p:plain

モーションは2つともユニティちゃんのアセットに含まれているものです。

 

AnimatorControllerの設定

作成した「UTC_Animator」をユニティちゃんのAnimatorにアサインします

f:id:Raspberly:20210830214056p:plain

 

 

Scriptの作成

ジョイスティックの入力を受け取り、アニメーションの再生とキャラクターの移動を行うScriptを作成します。

以下のUnityChanController.csを作成します。(ちょっと改良しています)

using UnityEngine;

[RequireComponent(typeof(CharacterController))] public class UnityChanController : MonoBehaviour { [SerializeField] VariableJoystick m_VariableJoystick; [SerializeField] Animator m_Animator; [SerializeField] float m_Speed = 1; private CharacterController m_Controller; private Vector3 m_Direction; void Start() { m_Controller = GetComponent<CharacterController>(); } void Update() { if(m_Direction != new Vector3(0, 0, 0)) { transform.localRotation = Quaternion.LookRotation(m_Direction); } m_Animator.SetFloat("isMoving", Mathf.Max(Mathf.Abs(m_Direction.x), Mathf.Abs(m_Direction.z))); m_Controller.Move(m_Direction * m_Speed * Time.deltaTime); } public void FixedUpdate () { m_Direction = Vector3.forward * m_VariableJoystick.Vertical + Vector3.right * m_VariableJoystick.Horizontal; } }

 

作成したUnityChanControllerをユニティちゃんオブジェクトにアタッチします。
同時にCharacter Controllerという移動を制御するコンポーネントも自動でアタッチされます。

f:id:Raspberly:20210830220514p:plain


参照の紐づけ

最後にUnityChanControllerのVariableJoystickに、Canvasの中に配置したVariableJoystickを、
AnimatorにユニティちゃんにアタッチされているAnimatorを紐づけて完成です。

f:id:Raspberly:20210830221237p:plain

Speedはデフォルトで1になっていますが、結構遅いので3とかにしておくといいかも。

 

 

完成

これで完成です。ゲームを起動するとジョイスティックの傾きに反応して移動とアニメーションが行われます。

f:id:Raspberly:20210830221438g:plain



 

まとめ

Joystick Packを使うことで簡単にバーチャルスティックを実装することができました。
スマホ向けアクションゲームを作る時などにご活用ください。

 

 

 

参考資料

light11.hatenadiary.com

tsubakit1.hateblo.jp

enjoy-freely.com

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。