在本文，笔者将做一个王者荣耀中那样的摇杆，基于UGUI仅需短短数行代码。

前言：

笔者需要一个摇杆，找了几个别人写好的轮子，感觉不怎么好用，比如很多都是说继承 ScrollRect ，结果发现也不怎么好用。GitHub 找到一个 simpleJoystick ，offset值一改，摇杆都不知道飘到哪去了！又看到一个说做类似王者的摇杆，但又依赖NGUI，关键是还不怎么好用，真的是没办法了，那就写一个呗。

需求：

1. 指定一个摇杆触发区域。
2. 在这个触发区域按下后，摇杆 (方位盘+摇柄) 出现在按下的位置
3. 拖拽鼠标，摇杆跟随。
4. 将摇杆的 水平/垂直 偏移通过事件发出去。

分析：

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

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

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

   • IPointerDownHandler - 当鼠标按下时，更新摇杆 (BackGround 游戏对象) 的位置
   • IDragHandler - 当鼠标拖拽时，更新摇柄 (Handle 游戏对象) 位置
   • IPointerUpHandler - 当鼠标释放时，复位 BackGround 和 Handle。

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

   

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

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

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

   

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

   

演示：

代码：

以下为完整代码,配合上图中的 UI 结构，到手即用。

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<Vector2> { }
        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 处理的那部分代码。因为它额外做了很多不必要的事情（见下面反编译的截图），相比之下效率低，笔者强烈不建议使用这些API 。

  
  

结语：

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

更新：

1. 修复坐标转换时z轴未正确换算的问题。
2. 新增驱动小玩偶示例
3. 代码托管到 GitHub：Unity UGUI Joystick

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