[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<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 处理的那部分代码。因为其效率相对低,原由如下:


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

更新:

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

链接:

Unity UGUI Joystick

结语:

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

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

推荐阅读更多精彩内容

  • 近期在维护知乎专栏,简书更新比较不即使,偷懒没写markdown,只粘贴内容过来好了。 代码部分粘贴过来比较乱,知...
    董夕阅读 2,199评论 0 4
  • Canvas 渲染顺序遵循刷油漆规则(画家算法)依次由Render CameraDepth值、Sorting La...
    passiony阅读 5,545评论 0 7
  • Canvas 渲染顺序 遵循刷油漆规则(画家算法) 依次由Render CameraDepth值、Sorting ...
    沉麟阅读 129评论 0 0
  • Unity编辑器基础 1.请描述游戏动画有几种,以及其原理。 主要有关节动画、单一网格模型动画(关键帧动画)、骨骼...
    豆铮阅读 1,247评论 0 5
  • 游戏摇杆是一个比较常用的UI功能,通过摇杆的操作,获得UI界面输入的方向和力度。unity自身的UGUI 系统并没...
    superzhan阅读 255评论 0 0