Unity3d:一个简单的画圈圈手势判断

因为最近制作了一款儿童教育游戏,所以涉及到不少操作手势,其中比较有意思的是这样一个手势如图:



在游戏中这个画圈的手势往往位于一个可操作物体之上,并绕着中心顺时针旋转.这个物体可能是一个转盘,也可能是一个打蛋用搅拌器等等,意思是提示用户手指按照这个轨迹操作就可以得到正确的反馈,比如顺时针转动转盘实现开关…

在参考了unity商店的LogViewer插件以后(插件的开启手势正巧是在屏幕上画圈),我写了一个测试脚本如下:

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class TestGestureAround : MonoBehaviour {
public bool bIsClockWise;
public Camera camGestureTest;
public GameObject objRotateTarget;
public float fGestureRadius = 50;
public float fGestureRadiusFix = 10;
public float fRotateFactor = 500f;//旋转系数

private Vector3 _v3AroundCenterPoint;
private bool _bGesturing;
private Vector3 _v3LastStarPoint;
private float _fSampleDisThreshold;
private List<Vector3> _inputGesturePhases = new List<Vector3>();

private float _fTotalRotate;

System.Action OnRotateFinish;
// Use this for initialization
void Awake () {
_fSampleDisThreshold = fGestureRadius / 4f;//(2*PI/24),PI~=3
_v3AroundCenterPoint = camGestureTest.WorldToScreenPoint(objRotateTarget.transform.position);
_fTotalRotate = 0;
}

// Update is called once per frame
void Update () {
if (Input.GetMouseButtonDown(0))
{
_bGesturing = true;
_v3LastStarPoint = Input.mousePosition;
}
else if (Input.GetMouseButtonUp(0))
{
_bGesturing = false;
}

if (_bGesturing)
{
//支持一个大概的圆形区,空心处理的小一点,就用修正值了
if (Vector3.Distance(_v3AroundCenterPoint, Input.mousePosition) < fGestureRadius + fGestureRadiusFix &&
Vector3.Distance(_v3AroundCenterPoint, Input.mousePosition) > fGestureRadiusFix)
{
var deltaVec = Input.mousePosition - _v3LastStarPoint;
if (deltaVec.sqrMagnitude > _fSampleDisThreshold * _fSampleDisThreshold)//超过阈值,记录一下
{
_inputGesturePhases.Add(deltaVec);
if (_inputGesturePhases.Count > 1)
{
int curCount = _inputGesturePhases.Count;
float multiDot = Vector3.Dot(_inputGesturePhases[curCount - 1], _inputGesturePhases[curCount - 2]);
Vector3 multiCross = Vector3.Cross(_inputGesturePhases[curCount - 1], _inputGesturePhases[curCount - 2]);
if (multiDot <= 0)//画圆只能是锐角
{
_inputGesturePhases.Clear();
}
else if (multiCross.z == 0 || (multiCross.z > 0 && !bIsClockWise) || (multiCross.z < 0 && bIsClockWise))//叉积右手法则,顺时针后一条叉前一条,z应该是正,z是0表示平行
{
_inputGesturePhases.Clear();
}
else
{
//通过上面几个条件测试表示是正在画一个圆,可以转动物体了
float rotateZ = bIsClockWise ? -1 * fRotateFactor * Time.deltaTime : 1 * fRotateFactor * Time.deltaTime;
_fTotalRotate += rotateZ;
objRotateTarget.transform.Rotate(new Vector3(0, 0, rotateZ));
_v3LastStarPoint = Input.mousePosition;

if (Mathf.Abs(_fTotalRotate) > 360)
{
Debug.Log("Around callbakc here");
_fTotalRotate = 0;
}
}
}
}
}
else {
_inputGesturePhases.Clear();//乱画就清除路径,重新来过
}
}
}

}

想要看上面代码的效果,只需要新建一个带摄像机的空场景,建立一个cube,放在屏幕可见的位置,然后脚本挂在摄像机上并拖上参数(如图)运行:



运行以后试着在物体的周围逆时针画圈,物体就能开始转动啦.

因为是测试,所以代码中只有mouse的检测而没有涉及到Input.Touch的逻辑,如果要支持移动端操作,这方面我在正式代码中采用了LeanTouch插件,是免费而且开源的,有兴趣的话可以检索unity商店下载并自行替换.

现在来解释一下代码的大概思路:

1.当点击屏幕且未松开的情况下,只要手指移动一段距离,就把这个路径记录在list内.

2.当list中有两个元素以后,计算这两条路径的角度和角度的方向.

3.如果满足期望,就认为是在画圈的操作中,否则就认为用户没有按照期望来画圈,清空所有路径.

看了上面三条以后,可以知道代码的核心算法其实就是求向量的点积和叉积:

float multiDot = Vector3.Dot(_inputGesturePhases[curCount - 1], _inputGesturePhases[curCount - 2]);

Vector3 multiCross = Vector3.Cross(_inputGesturePhases[curCount - 1], _inputGesturePhases[curCount - 2]);

点积可以判断向量的角度,而叉积可以知道这个角度的方向,也就是说是顺时针方向的角还是逆时针方向的角.

当我们的操作通过了距离,角度,方向的种种判断之后,可以认为用户的操作是正确的,因此,代码中将目标物体旋转了一个小小的角度.当用户持续操作,我们创建的cube就可以旋转完整的360度了.

在实际的开发中,可能我们遇到的情况会比这个更复杂,比如无论正逆都可以接受,或者逻辑和表现剥离后加入各类回调,或者是范围的控制这些其实都好解决,只要在对应的if判断前后做出修改即可.