FPS游戏的Joystick操纵杆如何实现?

作者： Mitty

关于Input组件，有款比较知名的插件叫Easy Touch，在许多的项目中都应用过，在Untiy的Standard Assets下也有一款官方的Input插件-CrossPlatformInput，我之前还没有使用过，所以参考了一些资料，将简单的使用教程记录一下。

关键词：

1.Input组件和Gesture手势

2.Unity Remote

3.Survival Shooter官方教程

4.Joystick操纵杆实现&拖动角色旋转

现在Unity都是分模块下载，Standard Assets需要我们单独去官网下载，并安装到Unity的路径下。

Unity的官方教程Survival Shooter便是采用Standard Assets下的CrossPlatformInput，实现Input输入部分的功能。

CrossPlatformInput比较基础，通常使用都需要进行扩展。

Unity官方的教程-Survival Shooter中便是采用CrossPlatformInput处理Input的部分，但比较精简。

导入CrossPlatformInput后，会在菜单栏上生成Mobile Input，打开并点击Enable，会弹出如下提示：

这里有提到使用Unity Remote App的形式来测试。

顺便一道的记录下来。

Unity Remote 使用步骤：

1.去Google Play上下载Unity Remote的APK安装包，并装在目标手机上。

2.将目标手机连接到电脑，并在Unity中做如下操作：

Edit-Project Settings-Edit-Device下选择Any Android Device（我这里是使用Android测试）。

3.在目标手机运行Unity Remote，并在Unity Editor中点击Play，我们就可以通过手机来进行远程的测试了，省去了重复安装APK包的麻烦，但他也有许多的限制，它仅仅是渲染的投射和一些基本的操作，作用并不大，但仅是看真机显示效果，还是可以的。

打开Survival Shooter项目中PlayerMovement.cs,可以看到如下两段代码：

玩家移动鼠标，通过射线检测来控制主角的360度旋转，!MOBILE_INPUT宏告诉我们，Survival Shooter并没有提供移动端的代码，这需要由我们自己来实现。

当选择Mobile Input-Enable后，实际上在Player Settings的Scripting Define Symbols下加入了MOBILE_INPUT的FLAG：

Survival Shooter移动版本Input，改造开始：

添加JoyStick摇杆。

在CrossPlatformInput下Prefabs目录的MobileSingleStickControl预设，直接拖到当前的场景中。(如果发现适配不对，检测Canvas下是否有绑定Canvas Scaler脚本。)

CrossPlatformInput已经提供了基本JoyStick实现，我们可以根据自己的需求调整适合的尺寸或是替换纹理。

右边的白色方块是对应Jump跳跃，通常我们用来实现射击等操作。我们可以Duplicate它来添加许多其它的按钮功能。

打开MobileSingleStickControl预设可以看到如下结构：

JumpButton和MobileJoystick分别有着不同的实现，JumpButton下绑定了ButtonHandler脚本，我们可以指定Name，用于标识当前按钮的功能，通过查看源码，可以它的触发逻辑也是通过CrossPlatformInputManager脚本统一管理的。

JumpButton按下和抬起事件处理：

我们放在Update下处理即可。

MobileJoystick是通过Joystick脚本实现。

但在实际的测试中发现，Joystick是操纵杆的范围是“矩形”的，如下图这样：

操纵杆会在限制在矩形的区域内。区域通过MovementRange参数来控制。

这种操纵杆方便支持那些仅需要“左右”或是“上下”移动的操作，但我们常见的操纵杆是限定在圆的范围内，这也是大多数游戏采用的操纵杆方式，所以我们需要对Joystick脚本进行扩展，在实现基于圆的范围之前，先看一下，原有限定在矩形范围内的实现，在JoyStick.cs下：

代码解析：

m_UseX:是否开启横向移动

m_UseY:是否开启纵向移动

float delta = (data.position.x - m_StartPos.x);

移动的增量

计算新的位置x相对于起始位置x的增量

delta = Mathf.Clamp (delta, -MovementRange, MovementRange);

通过Mathf.Clamp将delta限制在范围(-MovementRange,MovementRange)之间，比如-100,100

newPos.x = delta;

更新newPos位置

transform.position = new Vector3 (m_StartPos.x + newPos.x, m_StartPos.y + newPos.y, m_StartPos.z + newPos.z);

更新位置，StartPos+newPos（起始位置＋增量）

m_UseY的部分和m_UseX部分是一样的。

我们需要修改的就是控制delta增量。

我们将JoyStick限制在一个圆的区域内，实际是限定在圆半径的长度，长度不能超出圆的半径。

向量本身是包含大小和方向的量，通过使用Vector2.Distance计算两点之间的距离。

当大于等于半径时，我们需要限制它继续向更远处进行移动。

这里如何在任意方向上限定在一个固定的长度内？

使用向量的规一化normalized。

实现代码：

data.position当前鼠标或是手势移动的位置；

m_StartPos JoyStick初始位置（不变）；

MovementRange半径限定的区别；

newPos移动的增量，移动中的位置由m_StartPos+newPos决定；

nwePos.normalized*MovementRange 限定在长度MovementRange以内。

效果如图：

但在实际的测试中发现，切换到不同的分辨率下，Joystick滑动的区域会不一致，因为MovementRange并未考虑到多分辨率适配，比如480*320的机型（举例方便说明），MovementRange设置为50，那么2倍的屏幕分辨率960*640，如果MovementRanget移动50就会显得很短，既然是2倍的分辨率大小，所以MovementRange设置为50*2=100，才符合一致的效果

所以我们需要将MovementRange乘上一个Factor缩放比，这个比值可以通过当前的Canvas获得：

下一步，实现右半边屏幕拖拽旋转角色。

这里会涉及到几个点，因为上面JoyStick和将要实现的拖拽旋转均是通过手势实现，这里就需要判断哪个手指来影响哪个操作。

比如我默认先按下手指A在Joystick上，然后再按下手指B在可拖动的区域，那么手指B就来控制拖拽旋转的处理；如果我手指A在Joystick上，手指B也在Joystick上，则拖拽的逻辑不进行处理；如果我手指A在拖拽区域，手指B也在拖拽区域，使用手指A来处理拖拽；如果我当前只有一个手指在屏幕上操作，那点在哪个区域就执行哪部分的处理即可。

有点儿啰嗦，需要处理的情况就是要记录具体的手指Touch数据。

但是Touch是Struct值类型，不是引用类型，所以想要判断具体是哪根手指发挥作用，需要通过fingerId去记录，而不是定义一个变量去保存它。

关于要处理拖拽的操作，这里将屏幕的右半部分做为可拖拽的区域，那么第一步要做的就是判断当前按下去的手指是否在拖拽区域内判断点击屏幕是在拖拽区域内，可以使用屏幕坐标系或视口坐标系来计算。

如果满足条件，我们就记录当前手指的fingerId，后面会根据当前fingerId的Touch进行逻辑的计算。

如果按下的手指不满足条件，就继续等待其它手指，这时候可能按下第2个手指，第3个手指，直到满足条件，就不再判断，此时我们可以使用一个布尔或是其它的方式来禁止他每一次都判断。

实现代码：

CheckGesture 放在Update中执行。

这里要使用touch.phase的状态进行判定。

touch的状态有以几种：

具体的生命周期如下：

通过滑动手势来控制角色的旋转，定义TouchStart向量，记录按下时的位置

touch.position表示当前手指的移动中的距离。

因为我们只需控制角色左右移动，所以只需要判断横向坐标X:

touch.position.x>TouchStart.x

说明向右滑动，角色向右旋转

touch.position.x <TouchStart.x

说明向左滑动，角色向左旋转

并且每一帧都要重置TouchStart的位置为touch.position，因为我们需要计算两者之间的差值并用来计算移动的速率。

游戏是45度俯视角，角色的旋转是绕着Y轴进行，如何让角色进行旋转，肯定是要使用到四元数Quaternion。

除此之外，还需要实现如何根据我手指移动的速率来控制角色旋转的速率，上面刚有提到。

这里就需要使用到上面touch.position和TouchStart之间的差值决定。逻辑是放在FixedUpdate固定时间更新。

所以每一帧的执行都会计算当前的TouchStart和touch.position之间的差值。

手指移动的速度没有FixedUpdate帧刷新的频率快，所以值是渐进的增大或是缩减的。

代码就一行：

RotateSpeed=1，可以自己调节以测试合适的speed。

核心只修改了两个类：

Joystick

PlayerMovement

以及场景中的Joystick的Prefab