unity手游摇杆/轮盘UI（第一章-实现UI和拖动）

    最近想把pc端的游戏项目转为Android手游项目，第一步就是脱离了pc端的鼠标键盘，变成触控屏幕输入，所以第一步是实现摇杆/轮盘​​​​​​​

Unity摇杆

一、素材准备

    在ps中制作了一个简易的游戏轮盘/摇杆，主要分为三部分

    -①摇杆背景，用于显示玩家可操控的范围

    -②摇杆按钮，用于显示玩家移动摇杆

    -③摇杆方向，用于显示玩家移动摇杆的方向显示，并且通过玩家移动范围的大小来影响方向的alpha，这样也能提示玩家输入的大小（这是后话了，用于后面操作游戏主角）

    导入到游戏文件，最终效果如图

   

二、主要实现

    手游中的输入是 input.touch，unity中会有一个数组存储，如，当有三根手指输入，此处存储的数组会变为【1， 1， 1， 0， 0， 0】，当松开第二根按下的手指，则会变成【1， 0， 1， 0， 0， 0】，具体的解释大家可以去看别的博主的文章

    使用一个布尔值canMoveIf记录当前轮盘按钮是否可以被操作（也就是是否在移动中），当没有在移动中，且触摸点的数量大于0，遍历touch数组，找到距离在可交互范围内的触摸点，跳出循环，然后将布尔值等于true

     Distance是计算距离的函数，MoveDicision是判断距离后修改摇杆状态的函数

    MoveDicision（）：我们可以通过获取touch的坐标，计算触摸点到摇杆背景（固定不动，移动的摇杆只需在触摸时重新获取坐标即可）坐标的距离，比较是否大于触发半径即可。（这里的半径是你想在多少范围内触发这个摇杆，并不是说一定要与摇杆背景相同，本菜菜是以摇杆半径为准）

    当摇杆按钮到达摇杆范围边界的时候，不应该随着手指移动而超出，应该被“挡”在边界。所以当距离大于r，可以计算出角度的sin和cos值

    得到这两个值后，分别乘以半径，就可以得到摇杆按钮的坐标了。

private void Move()
    {
        if (canMoveIf)
        {
            if (distance <= radiu)
            {
                JoyStick_con.transform.position = touchPosition;
            }
            else
            {
                sina = (touchPosition.y - JoyStickPosition.y) / distance;
                cosa = (touchPosition.x - JoyStickPosition.x) / distance;
                JoyStick_con.transform.position = new Vector3(radiu * cosa + JoyStickPosition.x, radiu * sina + JoyStickPosition.y, 0);
            }
        }
    }

    摇杆背景外边，会有一个提醒方向的指引。他的方向是指向触摸点的，但是这是图片，无法用某种函数，直接指向他。

    可以用此数学办法实现，计算出触摸点与摇杆背景圆心的差值（y坐标和x坐标），然后用反正切函数直接获取到他的弧度值，再转为角度值，最后转为四元数，即可利用rotation函数实现旋转了。

    此外，该方向会有一个随按钮移动距离而显隐的效果，也就是说越靠近中心越模糊，越靠近边界就越明显，通过计算distance与半径的比值，将它带入图片的alpha值，即可实现。

    private void OutImage()                  // 指引方向的函数
    {
        if (canMoveIf)                         
        {
            if (distance < radiu)                // 当距离小于半径，alpha值等于distance比半径
            { 
                alpha = distance / radiu; 
            }
            else                                 // 当大于，alpha为一
            {
                alpha = 1;
            }
            JoyStick_outimage.color = new Color(JoyStick_outimage.color.r, JoyStick_outimage.color.g, JoyStick_outimage.color.b, alpha);

            // 利用y值和x值的差值带入反正切函数，再转为角度值，将其转成四元数，带入rotation函数
            rotateValue = Mathf.Atan2(touchPosition.y - JoyStickPosition.y, touchPosition.x - JoyStickPosition.x) * Mathf.Rad2Deg;
            rotation = Quaternion.Euler(0, 0, rotateValue);

            JoyStick_out.transform.rotation = rotation;

        }
    }

至此，简单的摇杆交互已经实现了，完整代码如下：

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

public class JoyStickController : MonoBehaviour
{
    public GameObject JoyStick;
    public GameObject JoyStick_back;
    public GameObject JoyStick_con;
    public GameObject JoyStick_out;
    public Image JoyStick_outimage;

    public float radiu = 120;             // 半径

    Touch touch;      
    Vector3 touchPosition;               // 记录触摸点的坐标

    Vector3 JoyStickPosition;            // 记录摇杆坐标

    float distance;                      // 记录触摸点到摇杆的距离，用于比较是否在想要触发的范围内

    float sina;
    float cosa;

    float rotateValue;
    Quaternion rotation;

    bool canMoveIf = false;        // 记录是否已在操作摇杆

    float alpha = 0;

    int j = 0;

    private void Awake()
    {
        JoyStickPosition = JoyStick.transform.position;
    }
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        if (Input.touchCount > 0)                   // 当屏幕上检测到触摸输入
        {
            if(!canMoveIf)                          // 当摇杆没有被操作，进入for循环查找在摇杆内符合操作的触摸点
            {
                for (int i = 0; i < Input.touchCount; i++)
                {
                    Distance();

                    MoveDicision(touch);

                    if(canMoveIf)
                    {
                        j = i;
                        break;                    // 找到后，修改摇杆操作的布尔值，然后跳出for循环
                    }
                }
            }

            touch = Input.GetTouch(j);
            Distance();

            Move();                              // 移动摇杆的函数
            OutImage();                          // 显示摇杆方向的函数
        }
        else                                       // 当松开，摇杆按钮移动到原点 | 不能被移动 | alpha为0，也就是透明
        {
            JoyStick_con.transform.position = JoyStickPosition;
            canMoveIf = false;
            alpha = 0;
            JoyStick_outimage.color = new Color(JoyStick_outimage.color.r, JoyStick_outimage.color.g, JoyStick_outimage.color.b, alpha);
        }
    }

    private void Distance()
    {
        touchPosition = touch.position;
        distance = Vector3.Distance(touchPosition, JoyStickPosition);
    }

    private void MoveDicision(Touch touch)
    {
        if (touch.phase == TouchPhase.Began)
        {
            if (distance <= radiu)
            {
                canMoveIf = true;
            }
        }
    }

    private void Move()
    {
        if (canMoveIf)
        {
            if (distance <= radiu)
            {
                JoyStick_con.transform.position = touchPosition;
            }
            else
            {
                sina = (touchPosition.y - JoyStickPosition.y) / distance;
                cosa = (touchPosition.x - JoyStickPosition.x) / distance;
                JoyStick_con.transform.position = new Vector3(radiu * cosa + JoyStickPosition.x, radiu * sina + JoyStickPosition.y, 0);
            }
        }
    }

    private void OutImage()                  // 指引方向的函数
    {
        if (canMoveIf)                         
        {
            if (distance < radiu)                // 当距离小于半径，alpha值等于distance比半径
            { 
                alpha = distance / radiu; 
            }
            else                                 // 当大于，alpha为一
            {
                alpha = 1;
            }
            JoyStick_outimage.color = new Color(JoyStick_outimage.color.r, JoyStick_outimage.color.g, JoyStick_outimage.color.b, alpha);

            // 利用y值和x值的差值带入反正切函数，再转为角度值，将其转成四元数，带入rotation函数
            rotateValue = Mathf.Atan2(touchPosition.y - JoyStickPosition.y, touchPosition.x - JoyStickPosition.x) * Mathf.Rad2Deg;
            rotation = Quaternion.Euler(0, 0, rotateValue);

            JoyStick_out.transform.rotation = rotation;

        }
    }
}