手机游戏摇杆控制人物移动解决方案

手机游戏摇杆控制人物移动解决方案

https://zhuanlan.zhihu.com/p/358614239

完成之后的演示

一、摇杆的UI搭建

Panel里主要是一个摇杆的背景（圆环）和摇杆头（红色的圆）

二、摇杆在背景的圆圈范围内移动

2.1. 先实现摇杆跟随手指移动

摇杆是使用UGUI实现的，所以这里的实现思路主要是将手指按下时候的屏幕坐标转换为对应尺寸的UGUI的画布坐标就行了。

下面是我自己实现的转换方法，因为屏幕坐标的原点在左下角，所以先将其转换为以屏幕中心为原点的坐标，然后根据当前的画布尺寸进行缩放即可得到适配所有分辨率的UI坐标。

 public static Vector2 ScreenToAnchorPos(Vector3 screenPos, Vector2 canvasSize)
 {
   
 Vector2 screenPos2;
 screenPos2.x = screenPos.x - (Screen.width / 2f);
 screenPos2.y = screenPos.y - (Screen.height / 2f);
 Vector2 anchorPos;
 anchorPos.x = (screenPos2.x / Screen.width) * canvasSize.x;
 anchorPos.y = (screenPos2.y / Screen.height) * canvasSize.y;
 
 return anchorPos;
 }

然后在每一帧将手指按下的位置转换为UGUI的坐标，再赋值给摇杆

 if (_down)
 _stickRect.anchoredPosition = PufferToolkit.ScreenToAnchorPos(Input.mousePosition,CanvasSize);

2.2. 将摇杆限制在圆环内

首先定义一个圆环的半径，计算现在摇杆的位置到圆环中心的距离，如果大于半径就将它重置到刚好到半径的位置，将摇杆的位置看作一个向量，刚好到圆环边缘的位置就可以通过把向量归一化之后乘以半径得到。

• 代码如下

 if (dis > Radius)
 {
   
 _stickRect.anchoredPosition = _stickRect.anchoredPosition.normalized * Radius;
 }

2.3.将摇杆的输入的方向输出

这里我使用委托的方式实现，当其他脚本注册了这里的委托就会收到摇杆的输入事件

• 定义一个委托，在Update中调用，手指按下时输出方向，抬起时输出0

 private Action<Vector2> _onJoyStickInput;
 if (_down)
 {
   
 _stickRect.anchoredPosition = PufferToolkit.ScreenToAnchorPos(Input.mousePosition,CanvasSize);
 Vector2 dir = _stickRect.anchoredPosition -