[Unity 3d] 使用UGUI做一个类似王者荣耀的摇杆

在本文，笔者将简单絮叨絮叨如何做一个代码极简但功能完善的基于 UGUI 的摇杆组件。

前言：

笔者需要一个摇杆，找了几个别人写好的轮子，感觉不怎么好用，那就练练手写一个呗。

需求：

1. 在一定范围内都能触发摇杆。
2. 在触发区域按下后，摇杆 (方位盘+摇柄) 展示出来。
3. 拖拽鼠标，摇杆跟随，且驱动方位指示器。
4. 要支持设置摇杆可用的轴（仅激活 x/y 轴 OR 全部激活）。
5. 要有摇杆底盘固定/动态一键切换的功能。（2019.11新增的需求）

分析：

1. 根据需求，我们使用 UGUI搭建一个这样的UI架构：

   
   
   
   • Joystick 用来监听 UGUI 光标事件，也就限制了摇杆范围。
   • Backgroud 作为Handle 和 Direction的父节点（容器），使得 Handle 和 Direction 更方便运算和控制状态。
   • Direction 切图切成了这样，所以将 Pivot 手动拖到了 BackGround 中心。如切图到位就不用设置。

2. UI搭好了，该如何驱动它们呢？
   答： 很简单，只需要继承以下几个接口就好啦：

   • IPointerDownHandler - 当鼠标按下时，更新摇杆 (BackGround 游戏对象) 的位置
   • IDragHandler - 当鼠标拖拽时，更新 Handle 位置（其实挺有意思的，拖拽到某一刻的世界坐标减去按下时的坐标就是 Handle 本地坐标）
   • IPointerUpHandler - 当鼠标释放时，复位 BackGround 和 Handle。

3. 摇柄动起来了，可是我们怎么驱动其他游戏对象运动呢？
   答：在每一帧，通过OnValueChanged事件向注册了该事件的游戏对象分发摇杆相对于 BackGround 的偏移量以驱动这些游戏对象运动。
   

   

   这个偏移量实际上也就是 Handle 在 BackGround 游戏对象中的局部坐标，如下图蓝色向量:

   
   
   

   告诉你什么叫灵魂画手
   • BackGround位置由 红色向量表示。
   • Handle 位置由绿色向量表示。
   • Handle 偏移量由蓝色向量表示。

4. 那怎么限制摇柄被拖拽的最远距离呢？
   答： 上面已经分析了，蓝色向量就是摇杆 Handle 的局部坐标。我们把蓝色向量的长度限制住，然后赋值回去不就OK啦。
   

   

5. 上图中有一个 黄色的方向指示器，怎么同步它呢 ？
   答： 在本例做好 Pivot 设置，然后设置 localEulerAngles 的 z 轴就好啦。
   如果指示器切图的中心与 BackGround 重合，Pivot 都不需要设置。
   

   

演示：

代码：

以下代码已经不是最新的了,请挪步文末 Github 获取工程体验更佳！

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.Events;
namespace zFrame.UI
{
    public class Joystick : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
    {
        public float maxRadius = 100; //Handle 移动最大半径
        public JoystickEvent OnValueChanged = new JoystickEvent(); //事件
        [System.Serializable] public class JoystickEvent : UnityEvent { }
        private RectTransform backGround, handle,direction; //摇杆背景、摇杆手柄、方向指引
        private Vector2 joysticValue = Vector2.zero;
        public bool IsDraging { get; private set; }
        private void Awake()
        {
            backGround = transform.Find("BackGround") as RectTransform;
            handle = transform.Find("BackGround/Handle") as RectTransform;
            direction = transform.Find("BackGround/Direction") as RectTransform;
            direction.gameObject.SetActive(false);
        }
        void Update()
        {
            if (IsDraging) //摇杆拖拽进行时驱动事件
            {
                joysticValue.x = handle.anchoredPosition.x / maxRadius;
                joysticValue.y = handle.anchoredPosition.y / maxRadius;
                OnValueChanged.Invoke(joysticValue);
            }
        }
        //按下时同步摇杆位置
        void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
        {
            Vector3 backGroundPos = new Vector3() // As it is too long for trinocular operation so I create Vector3 like this.
            {
                x = eventData.position.x,
                y = eventData.position.y,
                z = (null == eventData.pressEventCamera) ? backGround.position.z :
                eventData.pressEventCamera.WorldToScreenPoint(backGround.position).z //无奈，这个坐标转换不得不做啊,就算来来回回的折腾。
            };
             backGround.position = (null == eventData.pressEventCamera)?backGroundPos : eventData.pressEventCamera.ScreenToWorldPoint(backGroundPos);
            //Vector3 vector;
            //if (RectTransformUtility.ScreenPointToWorldPointInRectangle(transform as RectTransform, eventData.position, eventData.pressEventCamera, out vector))
            //{
            //    backGround.position = vector;
            //}
            IsDraging = true;
        }
        // 当鼠标拖拽时
        void IDragHandler.OnDrag(PointerEventData eventData)
        {
            Vector2 backGroundPos = (null == eventData.pressEventCamera) ?
                backGround.position : eventData.pressEventCamera.WorldToScreenPoint(backGround.position);
            Vector2 direction = eventData.position - backGroundPos; //得到方位盘中心指向光标的向量
            float distance = Vector3.Magnitude(direction); //获取向量的长度
            float radius = Mathf.Clamp(distance, 0, maxRadius); //锁定 Handle 半径
            handle.localPosition = direction.normalized * radius; //更新 Handle 位置
            UpdateDirectionArrow(direction);

            //Vector2 vector;
            //if (RectTransformUtility.ScreenPointToLocalPointInRectangle(backGround, eventData.position, eventData.pressEventCamera, out vector))
            //{
                //float distance = Vector3.Magnitude(vector); //获取向量的长度
                //float radius = Mathf.Clamp(distance, 0, maxRadius); //锁定 Handle 半径
                //handle.localPosition = vector.normalized * radius; //更新 Handle 位置
                //UpdateDirectionArrow(vector);
            //}
        }
        //更新指向器的朝向
        private void UpdateDirectionArrow(Vector2 position)
        {
            if (position.x!=0||position.y!=0)
            {
                direction.gameObject.SetActive(true);
                direction.localEulerAngles= new Vector3 (0,0,Vector2.Angle(Vector2.right,position)*(position.y>0?1:-1));
            }
        }
        // 当鼠标停止拖拽时
        void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
        {
            direction.gameObject.SetActive(false);
            backGround.localPosition = Vector3.zero;
            handle.localPosition = Vector3.zero;
            IsDraging = false;
        }
    }
}

• 需要注意的是 RectTransform.positon/localPositon 是受 Pivot 影响的。所以本例中的 BackGround 、Handle 的 Pivot 均为 （0.5，0.5）.
• 因为 Canvas 有 3 个渲染模式，所以为了适配这三个模式，在非 Overlay 模式下，必须进行坐标转换。

• 借助 RectTransformUtility.ScreenPointToLocalPoint(WorldPoint)InRectangle(...) 可以做到不需要我们自己写坐标转换,但注释掉了利用Utility 处理的那部分代码。因为其效率相对低，原由如下：

  
  
  

  用在本例则太多不必要的射线检测

更新：

1. 修复坐标转换时z轴未正确换算的问题。
2. 不会被多个手指误触。
3. 新增驱动小玩偶示例，使用三种方法控制其运动
4. 整理目录，完善第一人称Demo，剥离指向器为可选组件，新增动态/静态摇杆功能。 - 更新 2019年11月28日

链接：

Unity UGUI Joystick

结语：

• 由于是使用 UGUI 做的，所以直接能在移动端/触控屏上使用。
• 触屏设备支持多个摇杆同时搞事情。
• Canvas 所有的Render Mode下均能正常使用。
• 转载请注明出处，谢谢！

希望对大家有所帮助，喜欢本文记得给个赞哟！谢谢~