Codaybook

サーバサイドエンジニアが必死に作成した!発見した!を綴るブログ



UnityでジョイスティックのようなUIを作成したい!

Unityでモックを作成するときに仮想コントローラを作る機会がありました。仮想コントローラで少し大変なジョイスティックを実装した時にどのような感じで実装するかUIのみになりますが簡単に記述します。間違っている、もっといい方法があるかもしれないということを念頭に置いて参考にしてください( ´Ꙩωꙩ` )

以下画像のようにCanvas内でゲームオブジェクトを作成します。CanvasのImageのJostickFrameとButtonのJoystickButtonを追加します。

f:id:nisei275:20170720155450p:plain

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