UnityでジョイスティックのようなUIを作成したい!
Unity
でモックを作成するときに仮想コントローラを作る機会がありました。仮想コントローラで少し大変なジョイスティックを実装した時にどのような感じで実装するかUIのみになりますが簡単に記述します。間違っている、もっといい方法があるかもしれないということを念頭に置いて参考にしてください( ´Ꙩωꙩ` )
以下画像のようにCanvas
内でゲームオブジェクトを作成します。CanvasのImageのJostickFrame
とButtonのJoystickButton
を追加します。
JoystickButton
ゲームオブジェクトにJoystick.cs
スクリプトとEvent Trigger
を追加します。Joystick.cs
の内容については以下に記述します。以下記述するスクリプトの今回の内容は、ゲームコントローラにあるようなジョイスティックのような挙動になるような制御になります。
using System.Collections; using System.Collections.Generic; using UnityEngine.Events; using UnityEngine.EventSystems; using UnityEngine; public class Joystick : MonoBehaviour, IPointerUpHandler, IdragHandler { private GameObject joystickButtonObject; private Vector2 initialJoystickButtonPosition; void Start() { joystickButtonObject = this.gameObject; initialJoystickButtonPotision = joystickButtonObject.transform.position; } void Update() { } // ボタンをリリース public void OnPointerUp(PointerEventData ped) { joystickButtonObject.transform.position = initialJoystickButtonPosition; } // OnPointerDown実行後に移動した時 public void OnDrag(PointerEventData ped) { // JoystickButtonが移動する前にtransformを取得 Vector2 beforeMovePosition = joystickButtonObject.transform.position; // JoystickButtonゲームオブジェクトの移動 joystickButtonObject.transform.position = new Vector2( joystickButtonObject.transform.position.x + ped.delta.x, joystickButtonObject.transform.position.y + ped.delta.y ); // 初期位置からの移動距離を算出 float moveX = joystickButtonObject.transform.position.x - initialJoystickButtonPosition.x; float moveY = joystickButtonObject.transform.position.y - initialJoystickButtonPosition.y; // 三平方の定理(a^2+b^2=c^2)で移動距離を算出 float moveDistance = Mathf.Sqrt(Mathf.Pow(moveX, 2) + Mathf.Pow(moveY, 2)); // 移動距離を超えている場合は移動前に戻す if (moveDistance >= MaxEnableDistance) { joystickButtonObject.transform.position = beforeMovePosition; } } }
ゲームのジョイスティックはJoystickButton
の移動反映は円形になります。そこで、中心点から反映内の直線距離を算出するために、三平方の定理を使うことにします。
これを使用するとうまいことジョイスティックみたいになります( ´Ꙩωꙩ` )b