今回はアセットの紹介をしていきます。
紹介するのはJoystick Pack。
バーチャルスティック(バーチャルパッド)を簡単に実装できる無料アセットです。
Twitterでも話題！
全てのunityスマホ向けゲーム開発者に教えてあげたい！アセットストアの【Joystick Pack】https://t.co/IEV9DpMtF2はマジで神！画面上のジョイスティックを簡単に実装できるだけでなく、ジョイスティックの画像をoffにすると、スワイプのみでキャラが動いているように見せられる！もちろん無料！#Unity
— KUNITA GAME FACTORY (@KunitaGameF) 2020年8月26日
どんなアセット？
スマホ向けゲームで多く実装されているバーチャルスティックを簡単に実装できるアセットです。
↓にあるのがバーチャルスティック、コントローラーがないスマホでも本格的なアクションゲームが作成できます。
バーチャルスティックとボタンを組み合わせてバーチャルパッドと呼ばれることもありますね。
以下Asset Storeページから引用
ジョイスティックパックには、ドラッグアンドドロップでプロジェクトで簡単に使用できる複数の異なる仮想ジョイスティックが含まれています。
開発環境
Unity2020.1.4f1
Joystick Pack ver2.1
デモシーンの確認
アセットインポート完了時はこんな感じです。
ドキュメントに目を通しておきましょう。
デモシーンはExamplesの中にあります。
実行してみるとこんな感じ、スティックを倒すとボールがコロコロ転がります。
画面の左上には、モードやスティックの値が表示されています。
3つのモード
このJoystickには3つのモードが用意されています。
デモシーンでは左上から変更することができます。
Fixed
スティックは常に表示され、位置が固定されているモードです。
Floating
スティックはタップされるまで非表示。
タップされたらその場にスティックが表示されるモードです。ぷにコンみたいな感じ。
Dynamic
スティックはタップされるまで非表示。
タップされたらその場にスティックが表示され、ドラッグ時に追従するモードです。
FloatingとDynamicは、デフォルトだと画面左側のみ反応します。
これは、VariableJoystickコンポーネントがアタッチされているオブジェクトの大きさを変えることで調整できます。
主要コンポーネント
このアセットを使いこなすうえで重要なコンポーネントを紹介します。
Variable Joystick
このコンポーネントがJoystickの挙動を管理しています。
Handle Range
ハンドル(スティックの中央の点)が動く範囲です。デフォルトで1ですが、3にすると↓のようになります。
Dead Zone
スティックの値が指定した値以下の場合反応しなくなります。
つまり、0.5を指定した場合スティックを0.5以上方向けないと反応しません。
Axis Options
軸を限定します。Bothの場合X軸Y軸ともに動作します。
Snap
通常スティックは-1~1まで値が変動しますが、
有効になっている場合、-1か0か1で取得するようになります。
MoveThreshold
スティックが移動する時しきい値です。Dynamicモードでのみ使われます。
Joystick Type
上記の3つのモードを指定します。
Background & Handle
スティックの画像を指定します。画像素材は数種類用意されています。
実際に試してみる
開発中のゲームへの導入方法ですが、付属のPrefabをシーンに追加するだけです。
Canvasの下に追加してください。
スティックの値の取得は付属のスクリプトを参考にするといいでしょう。
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分ほどで簡単に作成できました。
スクリプトはこんな感じ、スティックの傾きに合わせて向きと移動、アニメーションを行っています。
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; } }
もちろん実機でも動作します。
デモの解説 (2021/08/30 追記)
上記のデモの作り方を解説します。
開発環境
Unity 2020.3.14f1
Joystick Pack ver2.1
SDユニティちゃん 3Dモデルデータ ver1.01
ステージの作成とキャラクターの配置
最初にステージを作成します。
床用のオブジェクトとしてPlaneを配置し、Cameraは見下ろす形に配置します。
プレイヤーキャラクターのユニティちゃんも配置します。
Assets/Optimize SDKohaku-Chanz/Prefab/UTC_Defaultをシーンに配置します。
ジョイスティックの配置
Canvasを作成し、Assets/Joystick Pack/Prefabs/Variable JoystickをCanvasの子オブジェクトとして配置します。
ジョイスティックはデフォルトで真っ白なのでやや見えづらいです。
なので色を変えておきます。(お好み)
ついでに大きさやスティックの位置も整えておきましょう。
AnimatorControllerの作成
ユニティちゃんをアニメーションさせるためAnimatorControllerを作成します。
Projectビューで右クリックしCreate/Animator ControllerからAnimatorControllerを作成します。
名前を「UTC_Animator」に変えておきます。
この「UTC_Animator」をダブルクリックして、Animatorビューを開きます。
パラメータの作成
Animatorビュー左上のParamertersボタンを押して、+ボタンからFloatを選びFloat型のパラメータを作成します。
パラメータの名前は「isMoving」にします。(作り方までGIF参照)
BlendTreeの作成
BlendTreeを作成します。BlendTreeはパラメータを元にアニメーションを自然に切り替える機能です。
Animatorビューの何もない所で右クリックしCreate State/From New Blend TreeからBlendTreeを作成します。
作成したBlendTreeをダブルクリックします。
するとBlendTreeの編集画面が開けます。
InspectorビューからMotion Fieldを2つ追加します。(GIF参照)
モーションを設定するフィールドが2つできたので、
止まっているモーション「StandA@loop」と、
走っているモーション「run_front@loop」をそれぞれ設定します。
モーションは2つともユニティちゃんのアセットに含まれているものです。
AnimatorControllerの設定
作成した「UTC_Animator」をユニティちゃんのAnimatorにアサインします
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という移動を制御するコンポーネントも自動でアタッチされます。
参照の紐づけ
最後にUnityChanControllerのVariableJoystickに、Canvasの中に配置したVariableJoystickを、
AnimatorにユニティちゃんにアタッチされているAnimatorを紐づけて完成です。
Speedはデフォルトで1になっていますが、結構遅いので3とかにしておくといいかも。
完成
これで完成です。ゲームを起動するとジョイスティックの傾きに反応して移動とアニメーションが行われます。
まとめ
Joystick Packを使うことで簡単にバーチャルスティックを実装することができました。
スマホ向けアクションゲームを作る時などにご活用ください。
参考資料
他のアセットの紹介記事はこちら↓
他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。
