在本文，笔者将简单絮叨絮叨如何做一个代码极简但功能完善的基于 UGUI 的摇杆组件。
前言：
笔者需要一个摇杆，找了几个别人写好的轮子，感觉不怎么好用，那就练练手写一个呗。
需求：
- 在一定范围内都能触发摇杆。
- 在触发区域按下后，摇杆 (方位盘+摇柄) 展示出来。
- 拖拽鼠标，摇杆跟随，且驱动方位指示器。
- 要支持设置摇杆可用的轴（仅激活 x/y 轴 OR 全部激活）。
- 要有摇杆底盘固定/动态一键切换的功能。（2019.11新增的需求）
分析：
-
根据需求，我们使用 UGUI搭建一个这样的UI架构：
- Joystick 用来监听 UGUI 光标事件，也就限制了摇杆范围。
- Backgroud 作为Handle 和 Direction的父节点（容器），使得 Handle 和 Direction 更方便运算和控制状态。
- Direction 切图切成了这样，所以将 Pivot 手动拖到了 BackGround 中心。如切图到位就不用设置。
-
UI搭好了，该如何驱动它们呢？
答： 很简单，只需要继承以下几个接口就好啦：- IPointerDownHandler - 当鼠标按下时，更新摇杆 (BackGround 游戏对象) 的位置
- IDragHandler - 当鼠标拖拽时，更新 Handle 位置（其实挺有意思的，拖拽到某一刻的世界坐标减去按下时的坐标就是 Handle 本地坐标）
- IPointerUpHandler - 当鼠标释放时，复位 BackGround 和 Handle。
-
摇柄动起来了，可是我们怎么驱动其他游戏对象运动呢？
答：在每一帧，通过OnValueChanged事件向注册了该事件的游戏对象分发摇杆相对于 BackGround 的偏移量以驱动这些游戏对象运动。
这个偏移量实际上也就是 Handle 在 BackGround 游戏对象中的局部坐标，如下图蓝色向量:
告诉你什么叫灵魂画手- BackGround位置由 红色向量表示。
- Handle 位置由绿色向量表示。
- Handle 偏移量由蓝色向量表示。
-
那怎么限制摇柄被拖拽的最远距离呢？
答： 上面已经分析了，蓝色向量就是摇杆 Handle 的局部坐标。我们把蓝色向量的长度限制住，然后赋值回去不就OK啦。
-
上图中有一个 黄色的方向指示器，怎么同步它呢 ？
答： 在本例做好 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 处理的那部分代码。因为其效率相对低，原由如下：
用在本例则太多不必要的射线检测
更新：
- 修复坐标转换时z轴未正确换算的问题。
- 不会被多个手指误触。
- 新增驱动小玩偶示例，使用三种方法控制其运动
- 整理目录，完善第一人称Demo，剥离指向器为可选组件，新增动态/静态摇杆功能。 - 更新 2019年11月28日
链接：
结语：
- 由于是使用 UGUI 做的，所以直接能在移动端/触控屏上使用。
- 触屏设备支持多个摇杆同时搞事情。
- Canvas 所有的Render Mode下均能正常使用。
- 转载请注明出处，谢谢！
希望对大家有所帮助，喜欢本文记得给个赞哟！谢谢~
