Unity:よく見る円を動かすコントローラ―の作り方。メモ

UIでよく見る中心にある丸を円の中で動かすことによってPlayerを移動させたりするやつの作り方。

わかりにくいけど左下の黒丸の中の城丸を動かすことによって黄色いキャラを移動させる。

まずは Canvas を作って Screen Space - Camera にして Render Camera にカメラを当てる。

そのあと Canvas に子オブジェクトとして Image を配置

Image の Sprite にそれっぽい円形をあてて、色とか適当にする。

コントローラ―を置きたい位置に Image を置く。

円の枠以外を透過したものだったりするとそれっぽく見えるかも。

さらに Image の子オブジェクトとして Button を配置して円になるような画像を Sprite に入れて、Height と Width を等しくする。（親のImageより小さく）

この Button の RectTransform の位置を全て 0 にしておく。

Text はいらないので削除。
スクリプトにあてる準備として Button の Component に EventTrigger を追加して、PointerDown と PointerUp をAddNewEventType にて追加しておく。

あとはスクリプトを作ってあてていく。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Stick : MonoBehaviour
{
    public Button Button;

    public bool IsPush;

    private Vector3 MousePosition;

    private Vector3 MousePositionInWorld;

    private Vector3 ButtonPosition;

    public GameObject Player;

    float MoveSpeed = 0.1f;
    // Start is called before the first frame update
    void Start()
    {
        ButtonPosition = Button.transform.position;
        Debug.Log(Button.transform.position);
        Debug.Log(Button.transform.localPosition);
    }

    // Update is called once per frame
    void Update()
    {
        ButtonPosition = transform.parent.position;
        if (IsPush)
        {

            MousePosition = Input.mousePosition;
            MousePositionInWorld = Camera.main.ScreenToWorldPoint(MousePosition);
            float f = GetRad(ButtonPosition, MousePositionInWorld);
            float dis = Vector2.Distance(ButtonPosition, MousePositionInWorld);

            if (dis <= 0.7f)
            {
                Button.transform.position = new Vector3(ButtonPosition.x + Mathf.Cos(f) * dis, ButtonPosition.y + Mathf.Sin(f) * dis, 0);
                Player.transform.position = new Vector3(Player.transform.position.x + Mathf.Cos(f) * dis * MoveSpeed, Player.transform.position.y + Mathf.Sin(f) * dis * MoveSpeed, 0);
            }
            else
            {
                Button.transform.position = new Vector3(ButtonPosition.x + Mathf.Cos(f) * 0.7f, ButtonPosition.y + Mathf.Sin(f) * 0.7f, 0);
                Player.transform.position = new Vector3(Player.transform.position.x + Mathf.Cos(f) * MoveSpeed, Player.transform.position.y + Mathf.Sin(f) * MoveSpeed, 0);
            }
            Debug.Log(MousePosition);
            Debug.Log(MousePositionInWorld);
            Debug.Log(dis);
        }
        else
        {
            Button.transform.position = ButtonPosition;
        }
    }

    public void LateUpdate()
    {
        
    }

    public void PushUp()
    {
        IsPush = false;
    }

    public void PushDown()
    {
        IsPush = true;
    }

    public float GetRad(Vector3 start, Vector3 end)
    {
        Vector3 sa = end - start;
        float rad = Mathf.Atan2(sa.y, sa.x);
        return rad;
    }
}

このスクリプトを Button の Component に追加。
Button は自身をあてる。
Player は GameObject ならなんでもいいので適当に Canvas の外に作ったもの。

最後に MainCamera の Component として下のスクリプトを追加して、Player を当てる。

using UnityEngine;
using Manager;

[RequireComponent(typeof(Camera))]
public class FollowCam : MonoBehaviour
{
    public GameObject player;
    private void Awake()
    {

    }
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        if (player == null)
        {
            player = GameObject.FindGameObjectWithTag("Player");
        }
    }

    private void LateUpdate()
    {
        transform.position = new Vector3(player.transform.position.x, player.transform.position.y, transform.position.z);
    }
}

意外と簡単に作れる。

Player の MoveSpeed はお好み。

Sin Cos 神。