FPS游戏-Joystick操纵杆实现
关键词：
1.Input组件和Gesture手势
2.Unity Remote
3.Survival Shooter官方教程
4.Joystick操纵杆实现&拖动角色旋转
关于Input组件，有款比较知名的插件叫Easy Touch，在许多的项目中都应用过，在Untiy的Standard Assets下也有一款官方的Input插件-CrossPlatformInput，我之前还没有使用过，所以参考了一些资料，将简单的使用教程记录一下
现在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安装包，并装在目标手机上
（我已经下载好了，微云网盘地址：链接：https://share.weiyun.com/5UBkdW3）
2.将目标手机连接到电脑，并在Unity中做如下操作：
Edit-Project Settings-Edit-Device下选择Any Android Device（我这里是使用Android测试）
3.在目标手机运行Unity Remote，并在Unity Editor中点击Play，我们就可以通过手机来进行远程的测试了，省去了重复安装APK包的麻烦，但他也有许多的限制，它仅仅是渲染的投射和一些基本的操作，作用并不大，但仅是看真机显示效果，还是可以的
打开Survival Shooter项目中PlayerMovement.cs,可以看到如下两段代码：
#if !MOBILE_INPUT // Create a layer mask for the floor layer. floorMask = LayerMask.GetMask ("Floor");//获取Floor层，用于下面Turning射线检测 #endif …… void Turning ()//主角跟随鼠标的方向进行转向，移动端要通过手势实现 ｛ #if !MOBILE_INPUT ..... #endif ｝
|
玩家移动鼠标，通过射线检测来控制主角的360度旋转，!MOBILE_INPUT宏告诉我们，
Survival Shooter并没有提供移动端的代码，这需要由我们自己来实现
当选择Mobile Input-Enable后，实际上在Player Settings的Scripting Define Symbols下加入了MOBILE_INPUT的FLAG：
Survival Shooter移动版本Input，改造开始：
1.添加JoyStick摇杆
在CrossPlatformInput下Prefabs目录的MobileSingleStickControl预设，直接拖到当前的场景中。(如果发现适配不对，检测Canvas下是否有绑定Canvas Scaler脚本)
CrossPlatformInput已经提供了基本JoyStick实现，我们可以根据自己的需求调整适合的尺寸或是替换纹理。
右边的白色方块是对应Jump跳跃，通常我们用来实现射击等操作。我们可以Duplicate它来添加许多其它的按钮功能。
打开MobileSingleStickControl预设可以看到如下结构：
JumpButton和MobileJoystick分别有着不同的实现，JumpButton下绑定了ButtonHandler脚本，我们可以指定Name，用于标识当前按钮的功能，通过查看源码，可以它的触发逻辑也是通过CrossPlatformInputManager脚本统一管理的。
JumpButton按下和抬起事件处理：
if(CrossPlatformInputManager.GetButtonDown("Jump")) ｛ Debug.Log("jump down"); ｝ if(CrossPlatformInputManager.GetButtonUp("Jump")) ｛ Debug.Log("jump up"); ｝ |
我们放在Update下处理即可。
MobileJoystick是通过Joystick脚本实现。
但在实际的测试中发现，Joystick是操纵杆的范围是“矩形”的，如下图这样：
操纵杆会在限制在矩形的区域内。区域通过MovementRange参数来控制。
这种操纵杆方便支持那些仅需要“左右”或是“上下”移动的操作，但我们常见的操纵杆是限定在圆的范围内，这也是大多数游戏采用的操纵杆方式，所以我们需要对Joystick脚本进行扩展，
在实现基于圆的范围之前，先看一下，原有限定在矩形范围内的实现，在JoyStick.cs下：
if (m_UseX) ｛ float delta = (data.position.x - m_StartPos.x); delta = Mathf.Clamp (delta, -MovementRange, MovementRange); newPos.x = delta; ｝
if (m_UseY) ｛ float delta = (data.position.y - m_StartPos.y); delta = Mathf.Clamp (delta, -MovementRange, MovementRange); newPos.y = delta; ｝
…… transform.position = new Vector3 (m_StartPos.x + newPos.x, m_StartPos.y + newPos.y, m_StartPos.z + newPos.z); |
代码解析：
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
实现代码：
if (Vector2.Distance (data.position, m_StartPos) >= MovementRange) ｛ newPos = newPos.normalized * MovementRange; ｝ |
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获得：
MovementRange *= m_Canvas.scaleFactor; |
下一步，实现右半边屏幕拖拽旋转角色
这里会涉及到几个点，因为上面JoyStick和将要实现的拖拽旋转均是通过手势实现，
这里就需要判断哪个手指来影响哪个操作
比如我默认先按下手指A在Joystick上，然后再按下手指B在可拖动的区域，那么手指B
就来控制拖拽旋转的处理
如果我手指A在Joystick上，手指B也在Joystick上，则拖拽的逻辑不进行处理
如果我手指A在拖拽区域，手指B也在拖拽区域，使用手指A来处理拖拽
如果我当前只有一个手指在屏幕上操作，那点在哪个区域就执行哪部分的处理即可
有点儿啰嗦，需要处理的情况就是要记录具体的手指Touch数据
但是Touch是Struct值类型，不是引用类型，所以
想要判断具体是哪根手指发挥作用，需要通过fingerId去记录，而不是定义一个变量去保存它。
关于要处理拖拽的操作，这里将屏幕的右半部分做为可拖拽的区域，那么第一步要做的就是
判断当前按下去的手指是否在拖拽区域内
判断点击屏幕是在拖拽区域内，可以使用屏幕坐标系或视口坐标系来计算
/// <summary> /// check whether target finger in drag area. /// </summary> /// <param name="position"></param> /// <returns></returns> public bool IsInDragArea (Vector2 position) ｛ return position.x >= Screen.width * 0.5f; ｝ |
如果满足条件，我们就记录当前手指的fingerId，后面会根据当前fingerId的Touch进行逻辑的计算。
如果按下的手指不满足条件，就继续等待其它手指，这时候可能按下第2个手指，第3个手指，直到满足条件，就不再判断，此时我们可以使用一个布尔或是其它的方式来禁止他每一次都判断
实现代码：
public int DragFingerId = -1;
public void CheckGesture () ｛ if (!DragEnable) ｛
for (int i = 0; i < Input.touchCount; ++i) ｛ if (CheckTouchAvaliable (Input.touches[i])) ｛ break; ｝ ｝ ｝ ｝
public bool CheckTouchAvaliable (Touch touch) ｛ if (touch.phase == TouchPhase.Began || touch.phase == TouchPhase.Stationary) ｛ if (IsInDragArea (touch.position)) ｛ DragFingerId = touch.fingerId; DragEnable = true; TouchStart = touch.position; return true; ｝ ｝ return false; ｝
|
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帧刷新的频率快，所以值是渐进的增大或是缩减的
代码就一行：
transform.localRotation *= Quaternion.Euler (0f, 0.5f * (touch.position.x - TouchStart.x) * RotateSpeed, 0f); |
RotateSpeed=1，可以自己调节以测试合适的speed
核心只修改了两个类：
Joystick
PlayerMovement
以及场景中的Joystick的Prefab
Demo已经打包，下载地址：
链接：https://share.weiyun.com/5d2GbVJ
感谢您的阅读，如文中有误，欢迎指正，共同提高