FPS游戏-Joystick操纵杆实现

发表于2018-12-09
评论5 5.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

关键词:

 

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.Clampdelta限制在范围(-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和将要实现的拖拽旋转均是通过手势实现,

这里就需要判断哪个手指来影响哪个操作

 

比如我默认先按下手指AJoystick上,然后再按下手指B在可拖动的区域,那么手指B

就来控制拖拽旋转的处理

 

如果我手指AJoystick上,手指B也在Joystick上,则拖拽的逻辑不进行处理

 

如果我手指A在拖拽区域,手指B也在拖拽区域,使用手指A来处理拖拽

 

如果我当前只有一个手指在屏幕上操作,那点在哪个区域就执行哪部分的处理即可

 

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

 

但是TouchStruct值类型,不是引用类型,所以

 

想要判断具体是哪根手指发挥作用,需要通过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,后面会根据当前fingerIdTouch进行逻辑的计算。

 

如果按下的手指不满足条件,就继续等待其它手指,这时候可能按下第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.positionTouchStart之间的差值决定

逻辑是放在FixedUpdate固定时间更新

 

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

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

 

代码就一行:

 


transform.localRotation *= Quaternion.Euler (0f, 0.5f * (touch.position.x - TouchStart.x) * RotateSpeed, 0f);



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

 

核心只修改了两个类:

Joystick

PlayerMovement

以及场景中的JoystickPrefab

 

Demo已经打包,下载地址:

链接:https://share.weiyun.com/5d2GbVJ

 

感谢您的阅读,如文中有误,欢迎指正,共同提高

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台