![f2eb5418ee0fa968c21909fee3de3902.png](https://i-blog.csdnimg.cn/blog_migrate/6da9a682c628b0699f0f5cd6fb740620.jpeg)
【前序】
那么,首先各位2019新年快乐吧。跨年之际,一位学土木的业余游戏程序员,在这里为大家带来他的第一篇文章(并希望以后就把知乎当作自己博客算了)。知乎的App做的倒是挺不错的说,博客写在这里可以随时在手机上看到,而且突然发现自己竟然注册过(虽然也被推荐过去CSDN一类的专业IT站去写博客),嘛不过既然注册了知乎能用就用便是了,博客又不是非得写给谁看得,更多的是为自己写的就是了。而且其实我也不是专攻编程软件开发方面的,一方面是被分到了土木专业,更多的是有一个成为全栈独立游戏制作者的梦想(或者说努力挣扎的方向),比起那些专业的IT站或许知乎这里更适合分享各方面的知识。相信这里也有一些真正想学技术的人,嘛也不乏一些吃瓜的人,不过都欢迎评论就是了,大家一起笑着讨论知识便是
【2D虚拟手柄】
首先来说说2D虚拟手柄吧。就是你玩碧蓝航线的时候左下角的那个控制舰娘方向的手柄。也是你玩第五人格,手游吃鸡的时候左下角那个控制方向的手柄
2D虚拟手柄个人给予它的定义是:在手机游戏中,通过触摸并滑动,在以初始触摸点为中心参考,结合当前滑动的触摸点,以完成对于方向的控制的一种实现方式
它的原理基于实体手柄中的摇杆所设计
以下对于如何实现虚拟手柄进行泛型的大致方法总结,以及如何在unity3d中实现虚拟手柄进行详细的阐述
【定义与揭示】
以下对于【2D虚拟手柄】的一些相关概念进行个人的定义和解释,引入一些新的定义名词,以便更好的,详细的阐述【2d虚拟手柄】
----【锁定式】与【非锁定式】:这是两种【2d虚拟手柄】的常见分类形式,区别在于【2d虚拟手柄】是否被固定在一个位置并处于始终可见的状态(【锁定式】),还是在一定的范围内,当你摁下时以你的初始触摸点为中心生成手柄(【非锁定式】)
![6c4b9e4047b4353848a3c60ae91d181b.png](https://i-blog.csdnimg.cn/blog_migrate/b8bd82d347c909fc32128ded8e920e48.jpeg)
----【触摸点】:即用户手指触摸手机屏幕并滑动的过程中,手指的当前位置
----【参考中心】:通过与【触摸点】进行相应的运算,来完成【2d虚拟手柄】主要功能的一个重要的中心参考位置。无论何时【手柄圆】都应以【参考中心】为圆心。【锁定式】中的锁定也是【参考中心】的锁定,而【非锁定式】中,则以用户当前摁下时的初始触摸位置为参考中心来生成手柄
---- 【触点圆】:【2d虚拟手柄】中反应当前触摸位置的一个圆形,用于告知操作者当前的触摸相对位置。但【触点圆】的位置应被限制在【手柄圆】中,即当前若【触摸点】在【手柄圆】中,【触点圆】的位置就是【触摸点】的位置,若当前【触摸点】不在【手柄圆】中,【触点圆】的位置应是【触摸点】相对【参考中心】的向量与【手柄圆】边界相交的位置
----【手柄圆】:【2d虚拟手柄】中以【参考中心】为圆心,一定半径的一个大圆形。用于限制【触点圆】,也对于实现【2d虚拟手柄】的相关功能有一定的作用
----【启发域】:即【2d虚拟手柄】接受用户初始触摸输入的一个限制范围,由于不可能将整个触摸屏的范围都交由【2d虚拟手柄】来使用,因此【2d虚拟手柄】的触摸接收就需要设置一定的初始触摸接收范围。在捕捉到一个符合要求的【触摸点】后,将其传入【2d虚拟手柄】的接收方法中,并对其进行持续的“关注”,以其对应的当前【触摸点】结合【参考中心】进行相应的运算,以完成【2d虚拟手柄】相应功能的实现。在【锁定式】中【启发域】就是【手柄圆】,在【非锁定式】中【启发域】则是一个屏幕内的限制范围
【unity3d的实现】
那么终于到了万众期待的实现环节,且听我慢慢道来其结合【unity3d】引擎的实现方法
好吧其实代码早就写好了,也被用在了其他许多项目中了,只是一直没有好好总结一下,并整理出一个可用的Package罢了,下面也是进行了一些总结和更正
以下是对于【非锁定式】的实现,完成后其实插入一个Flag变量并区分一下OnPointerDown中的触摸位置,以及在抬起和摁下时一些方法就可用自然的完成【锁定式】了
首先先让我们看看场景中需要的对象和的层级关系
>【启发域】用一个Panel来实现并自然作为画布的子对象
>>【手柄圆】用一张Image并作为【启发域】Panel的子对象
>>>【触点圆】用一张Image并作为【手柄圆】Image的子对象
之后是要求RectTransform中的锚点为x y 均拉开且Left Right Top Bottom数据均为0,如下图中的Panel锚点设置
![036f068f3986cce4827d040327cce4e1.png](https://i-blog.csdnimg.cn/blog_migrate/509a8ebc9b9260640ee2721147e7dd6a.jpeg)
这里是要用到UnityEngine.EventSystems;中的一些接口,来完成对于【触摸点】的捕捉·,那么自然脚本就需要挂在【启发域】的那张Panel上,让我们创建一个名为Button_Handle的脚本并挂在Panel上吧
之后进入脚本环节
首先让我们先引入命名空间,并实现几个需要被使用到的接口
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Button_Handle : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IDragHandler, IBeginDragHandler
{
//接口
public void OnBeginDrag(PointerEventData eventData)//滑动开始
{
}
public void OnDrag(PointerEventData eventData)//滑动中
{
}
public void OnPointerDown(PointerEventData eventData)//触摸开始
{
}
public void OnPointerUp(PointerEventData eventData)//触摸结束
{
}
//Base
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
}
之后我们来声明以下需要被用到的变量,public变量通过场景中拖拽完成赋值。
这里public Camera mcma;//摄像机 获取了摄像机是由于eventData.position 是一个ScreenPoint 而不同分辨率下相同的相对位置的ScreenPoint是不同的,即800*600中屏幕的最右上角点是(800,600)而1920*1080中则是(1920,1080)。需要通过ViewPoint来进行统一,而unity中管理UI对象位置的RectTransform也是使用ViewPoint所以,需要利用摄像机的ScreenToViewportPoint方法进行转换
不过这里做一个更正,应使用Camera.main的方法来获取,而不是public Camera mcma;并在场景中拖拽,因为只是需要利用ScreenToViewportPoint方法罢了,画布也被设置为Screen Spack - Overlay 所以用Camera.main的方法来获取显然更好一些,所以之后的代码中都使用了Camera.main的方法
没有声明出【参考中心】是由于button_Img的中心,以及相对button_Img的ViewPoint坐标(0.5,0..5)代表就代表了【参考中心】的位置
//UI_Button 控制
public GameObject button_Img;//手柄圆
public GameObject button_Point;//触摸圆
public Camera mcma;//摄像机
bool isonCon = false;//是否正在控制
之后一步步按照【2d虚拟手柄】的设计输入操作步骤,和相应的实现功能来一步步完成这个【2d虚拟手柄】
首先,脚本被挂在Panel上,并实现相应的接口来完成输入,所以当被实现的接口方法被调用时,就已经保证了触摸点一定在【启发域】中了
那么当用户摁下时,我们希望显示【手柄圆】,抬起时则取消显示(【非锁定式】的特性)
public void OnPointerDown(PointerEventData eventData)//触摸开始
{
button_Img.SetActive(true);//显示
}
public void OnPointerUp(PointerEventData eventData)//触摸结束
{
button_Img.gameObject.SetActive(false);//取消显示
}
ok这样就好了
之后我们希望在用户摁下时的初始触摸位置为中心设置【手柄圆】的位置,并将【触点圆】置于【手柄圆】的中心,也就是初始触摸位置
我们在OnPointerDown中来完成这两步操作
public void OnPointerDown(PointerEventData eventData)//触摸开始
{
button_Img.SetActive(true);//显示
//根据初始点击点 设置【手柄圆】的位置
Vector3 viewPoint = Camera.main.ScreenToViewportPoint(new Vector3(eventData.pressPosition.x,eventData.pressPosition.y, 0));
setToViewPoint(viewPoint, gameObject, button_Img, true);
//根据初始点击点 设置【触点圆】的位置
setToViewPoint(new Vector2(0.5f, 0.5f), button_Img, button_Point, false);
}
这里我们声明了一个setToViewPoint的方法,根据传入的ViewPoint来调整第三参数中传入的GameObjecr的RectTransform的位置,并根据第四参数,一个布尔型来判断是否考虑第二参数的【转入偏移量】
下面来说说【转入偏移量】吧
首先我们再回忆一下现在场景物体的层级关系(你可以翻到前面去看看,这里不再过多赘述)
ok,脚本是被挂在Panel上的,【手柄圆】是Panel的子对象,如果你知道RectTransform的特性,那么你就应该知道,此时【手柄圆】Image的RectTransform坐标和Panel的坐标已经不一样了
Panel是画布的子对象,对于它来说ViewPoint的点(1,1)就是画布的最右上角(也是屏幕的最右上角)
而【手柄圆】的Image是Panel的子对象,对于它来说ViewPoint的点(1,1)就是Panel的最右上角
在实际使用中由于Panel实现的是【启发域】,你可以再读一读我对【启发域】的定义和解释,就知道画布的最右上角和Panel的最右上角是不一样的(见下图,常见的以左1/4屏幕作为【启发域】时)
![d6c731e6d365337fc13a25ff8bdabce4.png](https://i-blog.csdnimg.cn/blog_migrate/93aa6bc3768e65251a57c43291c23e49.jpeg)
而此时你使用ScreenToViewportPoint转换eventData.pressPosition的ScreenPoint数据后得到的ViewPoint数据是相对于画布中的ViewPoint数据,而不是相对于Panel的,即(1,1)点对应画布最右上角
而由于【手柄圆】的Image是【启发域】的那张Panel的子对象,所以你需要用对应Panel中的ViewPoint来设置【手柄圆】的Image的位置,所以需要考虑一个将高一级(画布中)的ViewPoint转入低一级(Panel中)的一个偏移转换问题
但在设置【触点圆】的Image时,【触点圆】一定需要被设置在【手柄圆】的中心,由于【触点圆】的Image是【手柄圆】的Image的子对象,所以显然ViewPoint数据应是(0.5,0.5)且不考虑偏移
之后的位置设置就是根据初始锚点的长宽,将锚点中心至于最终需要的位置坐标上
以下是setToViewPoint的代码
void setToViewPoint(Vector2 viewPoint, GameObject objbase, GameObject objset, bool model)
//根据base中view点 设置set RectTrans位置 model true:由点击触发考虑baseView偏移值(进行ViewPoint转入) false:不考虑baseView偏移值(硬性设置)
{
//获取RectTransform
RectTransform objset_rt = objset.GetComponent<RectTransform>();
//获取Img Anchor占比距离 Panel Anchor占比距离
float objset_x = objset_rt.anchorMax.x - objset_rt.anchorMin.x;
float objset_y = objset_rt.anchorMax.y - objset_rt.anchorMin.y;
Vector2 topanel_Point;//最终需要的坐标位置
if (model)
{
topanel_Point = changeInBase(viewPoint, objbase);//将高一级的ViewPoint转入低一级中
}
else
{
topanel_Point = viewPoint;
}
objset_rt.anchorMin = new Vector2(topanel_Point.x - objset_x / 2, topanel_Point.y - objset_y / 2);
objset_rt.anchorMax = new Vector2(topanel_Point.x + objset_x / 2, topanel_Point.y + objset_y / 2);
}
这里在model为true时使用了一个changeInBase的转换方法来完成将高一级的ViewPoint转入低一级中
以下是changeInBase的代码
Vector2 changeInBase(Vector2 viewPoint, GameObject objbase)//将高一级的ViewPoint 转入低一级
{
//获取RectTransform
RectTransform objbase_rt = objbase.GetComponent<RectTransform>();
float objbase_x = objbase_rt.anchorMax.x - objbase_rt.anchorMin.x;
float objbase_y = objbase_rt.anchorMax.y - objbase_rt.anchorMin.y;
//获取ViewPoint转换至objbase中的对应的View点
return new Vector2((viewPoint.x - objbase_rt.anchorMin.x) / objbase_x, (viewPoint.y - objbase_rt.anchorMin.y) / objbase_y);
}
转换原理是首先根据objbase的RectTransform最左下角锚点,将ViewPoint的原点先变换为objbase的最左下角,在将其位置坐标的x y分别对应除以objbase的RectTransfor的x y锚点长宽(相当于是根据objbase的锚点宽高进行了一定比例的收缩)
![156a30ec7a9c69861eccc810e50e970c.png](https://i-blog.csdnimg.cn/blog_migrate/b4ae0326c6234da406aff8fe2164bfd0.jpeg)
ok,那么现在我们还需要在用户滑动过程中设置【触点圆】Image的位置
我们在OnDrag所实现的方法中,完成用户触摸后滑动的相关控制
那么我们首先需要把ScreenToViewportPoint转换eventData.pressPosition的ScreenPoint数据后得到的ViewPoint数据再做两次转换,先转入【启发域】的Panel中,再转入【手柄圆】的Image中,以设置作为【手柄圆】Image子对象的【触点圆】Image的位置
而根据【触摸点】是否在【手柄圆】中,【触点圆】的设置分为两种(如果不记得了,你可以往前翻一翻,看看我之前对【触点圆】的定义和解释)
下面是onDrag中的代码
public void OnDrag(PointerEventData eventData)//滑动中
{
//获取ViewPoint
Vector3 viewPoint = Camera.main.ScreenToViewportPoint(new Vector3(eventData.position.x, eventData.position.y, 0));
Vector2 panelViewPoint = changeInBase(viewPoint, gameObject);
//
Vector2 button_base_ViewPoint = changeInBase(panelViewPoint, button_Img.gameObject);
Vector2 toMiddlePoint = new Vector2(button_base_ViewPoint.x - 0.5f, button_base_ViewPoint.y - 0.5f);
float disToMiddlePoint = Mathf.Sqrt(toMiddlePoint.x * toMiddlePoint.x + toMiddlePoint.y * toMiddlePoint.y);
if (disToMiddlePoint - 0.5 < 0.001)//在范围内
{
//按键设置
setToViewPoint(panelViewPoint, button_Img.gameObject, button_Point.gameObject, true);
}
else//不在范围内
{
//按键设置
Vector2 goToViewPoint = toMiddlePoint.normalized * 0.5f;
setToViewPoint(new Vector2(goToViewPoint.x + 0.5f, goToViewPoint.y + 0.5f), button_Img.gameObject, button_Point.gameObject, false);
}
}
好的至此,我们的【2d虚拟手柄】的基础操作接收部分算是完成了
那么我们再来插入一个 isLock的布尔型变量,并进行相关的设置,来完成【锁定式】的【2d虚拟手柄】的实现
以下是更改过后的相关代码
相关设置讲解见注释
public bool isLock = false;//是否是【锁定式】
bool isStartInHandlePoint = false;//触摸点一开始是否在【手柄圆】中
//接口
public void OnDrag(PointerEventData eventData)//滑动中
{
if (isLock&&!isStartInHandlePoint)//【锁定式】且初始触摸点不在【手柄圆】中,不进行onDrag
{
return;
}
//获取ViewPoint
Vector3 viewPoint = Camera.main.ScreenToViewportPoint(new Vector3(eventData.position.x, eventData.position.y, 0));
Vector2 panelViewPoint = changeInBase(viewPoint, gameObject);
//
Vector2 button_base_ViewPoint = changeInBase(panelViewPoint, button_Img.gameObject);
Vector2 toMiddlePoint = new Vector2(button_base_ViewPoint.x - 0.5f, button_base_ViewPoint.y - 0.5f);
float disToMiddlePoint = toMiddlePoint.magnitude;
if (disToMiddlePoint - 0.5 < 0.001)//在范围内
{
//按键设置
setToViewPoint(panelViewPoint, button_Img.gameObject, button_Point.gameObject, true);
}
else//不在范围内
{
//按键设置
Vector2 goToViewPoint = toMiddlePoint.normalized * 0.5f;
setToViewPoint(new Vector2(goToViewPoint.x + 0.5f, goToViewPoint.y + 0.5f), button_Img.gameObject, button_Point.gameObject, false);
}
}
public void OnPointerDown(PointerEventData eventData)//触摸开始
{
if (!isLock)//【非锁定式】
{
button_Img.SetActive(true);//显示
//根据初始点击点 设置【手柄圆】的位置
Vector3 viewPoint = Camera.main.ScreenToViewportPoint(new Vector3(eventData.pressPosition.x, eventData.pressPosition.y, 0));
setToViewPoint(viewPoint, gameObject, button_Img, true);
//根据初始点击点 设置【触点圆】的位置
setToViewPoint(new Vector2(0.5f, 0.5f), button_Img, button_Point, false);
}
else
//【锁定式】需要根据初始触摸点是否在【手柄圆】中设置flag告知onDrag是否需要触发,以及在范围内时立刻完成对于【触摸点】位置的设置
{
Vector3 viewPoint = Camera.main.ScreenToViewportPoint(new Vector3(eventData.position.x, eventData.position.y, 0));
Vector2 panelViewPoint = changeInBase(viewPoint, gameObject);
//
Vector2 button_base_ViewPoint = changeInBase(panelViewPoint, button_Img.gameObject);
Vector2 toMiddlePoint = new Vector2(button_base_ViewPoint.x - 0.5f, button_base_ViewPoint.y - 0.5f);
float disToMiddlePoint = toMiddlePoint.magnitude;
if (disToMiddlePoint - 0.5 < 0.001)//在范围内
{
isStartInHandlePoint = true;
//按键设置
setToViewPoint(panelViewPoint, button_Img.gameObject, button_Point.gameObject, true);
}
else
{
isStartInHandlePoint = false;
}
}
}
public void OnPointerUp(PointerEventData eventData)//触摸结束
{
if (isLock)//【锁定式】抬起时【触点圆】回归中心,而不是取消显示
{
setToViewPoint(new Vector2(0.5f, 0.5f), button_Img, button_Point, false);
return;
}
button_Img.gameObject.SetActive(false);//取消显示
}
void Start () {
if (isLock)//【锁定式】一开始就需要被设置在中心
{
setToViewPoint(new Vector2(0.5f, 0.5f), button_Img, button_Point, false);
}
else//【非锁定式】一开始保证不现实【手柄圆】
{
button_Img.SetActive(false);
}
}
下面是一个实际中使用的例子:
1.控制角色的移动:
这里是之前写好的使用了【非锁定式】的代码,所以没有呼应上面的【锁定式】代码的更正
onDrage代码更改为:
public void OnDrag(PointerEventData eventData)
{
//获取ViewPoint
Vector3 viewPoint = mcma.ScreenToViewportPoint(new Vector3(eventData.position.x, eventData.position.y, 0));
Vector2 panelViewPoint = changeInBase(viewPoint, gameObject);
//
Vector2 button_base_ViewPoint = changeInBase(panelViewPoint, button_Img.gameObject);
Vector2 toMiddlePoint = new Vector2(button_base_ViewPoint.x - 0.5f, button_base_ViewPoint.y - 0.5f);
float disToMiddlePoint = toMiddlePoint.magnitude;
if (disToMiddlePoint - 0.5 < 0.001)//在范围内 比例速度
{
//按键设置
setToViewPoint(panelViewPoint, button_Img.gameObject, button_Point.gameObject, true);
//速度设置
nowSpeed= maxSpeed * (disToMiddlePoint / 0.5f);
movetoPos = toMiddlePoint;
//float onConSpeed = maxSpeed * (disToMiddlePoint / 0.5f);
//setPlayerSpeed(toMiddlePoint, onConSpeed);
}
else//最大速度
{
//setPlayerSpeed(toMiddlePoint, maxSpeed);
//按键设置
Vector2 goToViewPoint = toMiddlePoint.normalized * 0.5f;
setToViewPoint(new Vector2(goToViewPoint.x+0.5f,goToViewPoint.y+0.5f), button_Img.gameObject, button_Point.gameObject, false);
//速度设置
nowSpeed = maxSpeed;
movetoPos = toMiddlePoint;
}
}
关于速度设置
这里根据触摸点是否在【手柄圆】中,还将速度的设置分为在【手柄圆】内的比例速度(按触摸点与【参考中心】的距离占【手柄圆】半径的百分比)和不在【手柄圆】内时的最大速度。
变量toMiddlePoint就是触摸点到【参考中心】的相对ViewPoint向量
变量disToMiddlePoint则是toMiddlePoint的向量模长
之后在开始滑动时设置一个flag变量为在控制,抬起时设置为不在控制并将角色速度归0(停下),不断更新nowSpeed速度和movetoPos方向并根据flag在Update中根据当前nowSpeed和movetoPos的来设定角色的速度
这里不在onDrag中设置速度的原因是由于滑动中停下时,onDrag就不会再调用了,会出现控制时速度设定的中断,因而需要转到Update中在检测到进行了滑动后每一帧都绝对的去设置速度
以下是其他相关的代码更改
public void OnPointerUp(PointerEventData eventData)
{
button_Img.gameObject.SetActive(false);
isonCon = false;
//ClearSpeed
onControlPlayer.velocity = new Vector3(0f, onControlPlayer.velocity.y, 0f);
}
Vector2 speedDir;
Vector3 baseSpeedDir;
Vector3 basesDir;
public Transform cmabaseTrans;
//受控Player
void setPlayerSpeed(Vector2 dir,float speed)
{
speedDir = dir.normalized * speed;
if (playerMod == PlayerMod.ThirdView_UnLock)
{
basesDir = new Vector3(speedDir.x, 0f, speedDir.y);
basesDir = cmabaseTrans.TransformVector(basesDir);
speedDir = new Vector2(basesDir.x, basesDir.z);
}
baseSpeedDir= new Vector3(speedDir.x, onControlPlayer.velocity.y, speedDir.y);
onControlPlayer.velocity = onControlPlayer.transform.TransformVector(baseSpeedDir);
}
// Use this for initialization
void Start()
{
}
Vector3 lookDir;
Quaternion now;
Quaternion lookto;
// Update is called once per frame
void Update()
{
if (isonCon)
{
if (playerMod == PlayerMod.ThirdView_UnLock)
{
cmabaseTrans.position = new Vector3(mcma.transform.position.x, mcma.transform.position.y - mcma.transform.localPosition.y, mcma.transform.position.z);
cmabaseTrans.LookAt(onControlPlayer.gameObject.transform);
Vector3 lookDir = basesDir;
Quaternion now = onControlPlayer.transform.Find("Body").rotation;
Quaternion lookto = Quaternion.LookRotation(lookDir, Vector3.up);
onControlPlayer.transform.Find("Body").rotation = Quaternion.RotateTowards(now, lookto,270* Time.deltaTime);
}
setPlayerSpeed(movetoPos, nowSpeed);
}
}
public void OnBeginDrag(PointerEventData eventData)
{
isonCon = true;
}
关于人物朝向的设置
这里还可以看到上面的代码Update中有一个
if(playerMod == PlayerMod.ThirdView_UnLock)
的判定,并根据这个判定(当前是【第三人称非锁定旋转型】的角色控制模式,就是第五人格的那种人物控制模式)还需要在检测【2d虚拟手柄】的输入控制时进行人物朝向的一些相关设定操作
这里关于【第三人称非锁定旋转型】以及包括这种控制模式的总共三种3D游戏角色控制模式,我将在接下来的“【unity3d模块总结】-3D游戏角色控制 ”一文中进行详细的归纳、阐述和总结。此处不再赘述。
ok,那么打错字的地方见谅,技术尚浅,不对的地方欢迎评论指正,欢迎评论交流
这里是Randy ---一位学土木的游戏程序员
再次祝各位新年快乐