16 June 2015

FingerGestures是一个unity3D插件,用来处理用户动作,手势。 译自FingerGestures官方文档

目录



fingerGestures包结构


路径,相对Assets/Plugin/… 描述
FingerGestures/ 插件的根目录
FingerGestures/Prefabs 可以直接拖放到场景中的预设资源(prefabs)
FingerGestures/Scripts 核心脚本和组件
FingerGestures/Scripts/Gesture Recognizers 每个手势识别 的脚本
FingerGestures/Scripts/Finger Event Detectors 每个触摸事件检测器的脚本
FingerGestures/Scripts/Components 手势识别和触摸事件所需要添加的额外组件
FingerGestures/Toolbox FingerGestures 自带的工具箱脚本
FingerGestures/Samples.unitypackage 所有例子的子包
FingerGestures/PlayMaker Actions.unitypackage FingerGestures对PlayMaker扩展的插件
Editor/FingerGestures FingerGestures对编辑器的扩展

FingerGestures例子列表


  • Finger Event(鼠标或手指事件)
    FingerEventsPart1: 展示如何通过不同的检测器( FingerEventDetectors )去检测鼠标或者手指的上(down)、下(up),按下不移动(stationary,悬停(hover) 事件。
    FingerEventsPart2: 展示如何识别不同鼠标或者手指动作(FingerMotionDetector)。

  • Gestures(手势)
    BasicGestures: 识别单击(react to tap),双击(double tap),拖动(drag),长按(long——press),滑动(swipe)等基础手势。
    PinchAndTwist: 两个或多个手指同时在触摸屏上挤压(pinch)或扭转(twist)时,触发手势的事件。(PS:通常都是用来缩放或旋转)
    PointCloudGestures: 示范如何识别一个点云(point cloud)手势。(PS:通常是指用用户画的图案作为识别)

  • Toolbox(工具箱)
    Camera(放入摄像机的脚本):
    Toolbox-DragView: 展示使用TBDragView脚本,实现拖动视角。
    Toolbox-Orbit: 展示使用TBOrbit脚本,实现围绕目标旋转视角。
    Toolbox-Pan: 展示使用TBPan脚本,实现以自身为轴旋转视角。
    Toolbox-PinchZoom: 展示使用TBPinchZoom脚本,实现变焦。

    Object-Based(放入普通场景对象的脚本):
    Toolbox-Drag: 展示使用TBDrag脚本,实现简单的物体拖动
    Toolbox-Hover: 展示使用TBHoverChangeMaterialTBHoverChangeScale脚本,实现当鼠标或者手指悬停在物体上时候的响应。(PS:类似鼠标放到图标上,图标发亮的效果)
    Toolbox-PinchToScale 展示使用TBPinchToScale脚本,实现缩放物体
    Toolbox-TwistToRotate: 展示使用TBTwistToRotate脚本,实现旋转物体

设置场景


需要在场景中实例化一个FingerGesture组件才可使用。 FingerGesture在项目中的作用是管理用户输入和识别手势和鼠标或手指事件。
有两种添加方式,一是直接把Plugins\FingerGestures\Prefabs下的FingerGestures prefab文件拖入场景中。二是可以创建一个空物件,然后把FingerGestures组件添加进去。

1

使用Make Persistent标志可以让使FingerGestures 单例在跨场景后一直有效,所以只要保证它在第一个场景设置就足够。

教程:识别一个轻敲手势


该章节会学习到如何识别一个简单的单击动作,然后到特殊物件的单击动作识别,最后到识别一个三个手指的双击动作。

  • 初始化
    第一步,如上章节设置;
    第二步,创建一个GameObject 命名为Gestures ;
    第三步,给Gestures添加一个TapRecognizer组件,并保持默认设置,你可以在项目面板搜索到它或者直接打开Component > FingerGestures > Gestures > Tap menu item。

    1

    TapRecognizer 是其中一种手势识别器,它用于监控用户输入而且当一个有效的单击动作被识别时候工作。
    第四步,创建一个新的C# script 叫做 TapTutorial并添加到第二步创建的Gestures中。

  • 轻敲屏幕
    第一步,点击TapGestures组件上的Copy Event To Clipboard按钮,它会把TapGesture所需要的时间信号代码copy到黏贴板。
    第二步,粘贴到TapTutorial脚本里,如下:

public class TapTutorial : MonoBehaviour
{
    void OnTap( TapGesture gesture )
    {
        / your code here /
    }
} 

`OnTap`函数匹配定义在TapRecognizer 组件内的信息名属性,当识别器要识别一个轻敲手势,它会使用unity3d的`SendMessage API`先向Gestures物件内所有的脚本广播`OnTap`信息,只要TapTutorial绑定在该物件上,它的`OnTap`函数就会被调用到。  
出于性能考虑,通常使用.net标准的事件模型代替unity3d的SendMessage API。  
第三步,修改`OnTop`函数:

void OnTap( TapGesture gesture )
{
     Debug.Log( "Tap gesture detected at " + gesture.Position +
            ". It was sent by " + gesture.Recognizer.name );
}  

`gesture`参数包含着手势事件数据,在上面的代码,我们主要输出了位置和`TapRecognizer`内工作的事件。你还可以在`gesture`参数内获得更多属性,例如通过`gesture.Fingers`获得鼠标或手指相关的手势列表,还有可以通过`gesture.Selection`获得当前是哪个场景被轻敲 。  
第四步,可以测试,通过敲不同位置,可以看到debug信息输出。   

教程:手势识别器


在FingerGesture里,用户的手势都由GestureRecognizers组件来处理,它是顺序处理被识别匹配的用户动作的。

  • 找到GestureRecognizers
    每种手势都有自己的脚本,存放脚本的路径在Plugins\FingerGestures\Scripts\Gesture Recognizers

    1
    你也可以从 Component > FingerGestures > Gestures menu里面找到。
    1

  • 基本使用
    要识别一个特殊手势,你需要:
    1、添加对应的GestureRecognizer组件到场景中的目标物件。
    2、配置它的属性。
    3、监听它的手势事件和对应响应。

    作为手势事件通知的一部分,GestureRecognizer传递一个包含相关信息(位置,手指触屏点列表,选择的场景物件,相关的GestureRecognizer等)的事件参数。

    一个手势识别器有以下监听事件的方式:
    1、使用标准的.net 委托事件模型,每一个手势识别器都暴露一个.net事件接口。
    2、使用unity的SendMessage()函数 : 手势事件将会被广播到游戏对象里所有的组件。
    手势事件也可以指向当前相关的场景对象,这时候需要把手势识别器配置到 Raycaster组件中才能检测场景对象。

    这取决于你的选择。.net的事件模型较为高效,unity的SendMessage()较为方便。

  • 属性
    由同一基类派生出来的各种手势识别器共用一个通用配置和一些函数。例如,我们可以看到TapRecognizerSwipeRecognizer组件的配置放置在同一个对象里。
    1
    设置:
    你可以看到,两个组件共用了一部分配置:fingers setup,reset mode,event notification settings,references to additional components...
    同样,每个手势识别器都有自己独特的配置,例如滑动识别器要设置距离阀值、速度、和偏差。而多点触控可以设置最大持续时间等。

    事件信息广播:
    此处使用SendMessage()函数去通知其他系统。你可以使用Message Name属性去指定响应的函数名。
    通常,Message Target会设置你加入的手势识别器组件。但你也可以设置别的对象。

    组件:
    你可以收到手动指定添加组件。例如:添加一个ScreenRaycaster组件让手势识别器获知场景内对象碰撞。并把消息发送到相应的监听器。它允许识别器转发消息到正在有关联的场景对象。

教程:轻击手势识别器


1

  • 属性
    Required Taps :连续轻击的次数。
    Max Delay Between Taps :两次轻击间最大的时间间隔。(秒)
    Movement Tolerance:连续轻敲时候,和第一次轻击的位置相隔的偏差大小。
    Max Duration:最大可以识别的手指数。

  • 事件

void OnTap( TapGesture gesture )
{
    // 轻击的数量
    int taps = gesture.Taps;
}

教程:拖拽手势识别器


1

  • 属性
    Movement Tolerance:最小的拖动距离才触发识别器。
    Apply Same Direction Constraint:只能用于多点拖拽,打开后,如果所有点不是向同一个方向拖拽,识别器将不会识别。

  • 事件

void OnDrag( DragGesture gesture )
{
    // 当前识别器阶段 (Started/Updated/Ended)
    ContinuousGesturePhase phase = gesture.Phase;

<span class="c1">// 最后一帧的拖拽/移动数据

Vector2 deltaMove = gesture.DeltaMove;

<span class="c1">//完整的拖拽数据

Vector2 totalMove = gesture.TotalMove; }

教程:滑动手势识别器


1

  • 属性
    Min Distance: 必须滑动的最小距离。
    Max Distance:允许滑动的最大距离。
    Min Velocity:滑动时候最小速度。
    Max Deviation:允许的最大角度偏差。(度)

  • 事件

void OnSwipe( SwipeGesture gesture )
{
    // 完整的滑动数据
    Vector2 move = gesture.Move;

<span class="c1">// 滑动的速度

float velocity = gesture.Velocity;

<span class="c1">// 大概的滑动方向

FingerGestures.SwipeDirection direction = gesture.Direction; }

教程:长按手势识别器


1

  • 属性
    Press Duration:最少长按时间。
    Move Tolerance:长按过程中允许的最大移动偏差。

  • 事件

void OnLongPress( LongPressGesture gesture )
{
    // 长按持续时间
    float elapsed = gesture.ElapsedTime;
}

教程:缩放手势识别器


1

  • 属性
    Minimum DOT :允许的小向量点积。
    Minimum Distance:两个手指第一次触屏时候允许的最短路径。

  • 事件

void OnPinch( PinchGesture gesture )
{
    // 识别器当前状态(Started/Updated/Ended)
    ContinuousGesturePhase phase = gesture.Phase;

<span class="c1">// 当前两个手指的距离

float gap = gesture.Gap;

<span class="c1">// 当前与上一帧的变动值 

float delta = gesture.Delta; }

教程:旋转手势识别器


1

  • 属性
    Minimum DOT :允许的小向量点积。
    Minimum Rotation:必须的最小自旋角度。

  • 事件

void OnTwist( TwistGesture gesture )
{
    // 识别器当前状态 (Started/Updated/Ended)
    ContinuousGesturePhase phase = gesture.Phase;

<span class="c1">// 最近一次角度变化(度)

float delta = gesture.DeltaRotation;

<span class="c1">// 总的角度变化(度)  

float total = gesture.TotalRotation; }

  • 桌面仿真
    在桌面环境,你可以通过left-CTRL键加上鼠标转轮去调节角度。也可以在Mouse Input Provider配置别的按键。

教程:自定义手势识别器


自从FingerGestures 3.0之后,可以通过PointCloudRecognizer识别自定义手势。利用基于$P recognizer 是手势匹配算法实现。现在只支持单手指操作的识别,将来会支持多点自定义手势。
1
点云识别器会对比用户输入和已经设置好的手势模板,然后会返回最近接近的匹配结果,会返回匹配得分和差距值。
点云识别器是规模和方向固定不变的,这就意味着它可以识别画得比较大或者小的,也或者是反方向的(李若:从左到右变成从右到左)。

  • 点云识别器模板
    一个模板包括要识别的手势的数据。是通过一个编辑器编辑的。
    1
    创建一个模板需要以下步骤:
    1:在你的项目编码,右击-> create ->PonitCloud Gesture Template
    1
    一个新的模板就好添加到项目里面,可以自己重命名。
    2:选择模板然后在 Inspecrot 面板内点击 Edit。
    1
    3:然后开始画图案。
    1

  • 使用点云识别器
    第一步:
    1:保证场景对象已经设置好了finger gesture的属性。
    2:创建一个新的Gestures对象。
    3:添加一个PointCloudRecognizer组件。
    1
    以下属性需要特别注意。
    Max Match Distance:控制识别的精确的程度。数值越低,越精确。
    Sampling Distance: 连贯动作取样时候,两点间隔的最小距离。越小越精确,但是取样会更多。
    Gesture Templates List:我们指定的模板列表。

    第二步:
    添加刚刚创建的模板拖放到手势模板列表中。
    1

    第三步:
    1、创建一个c#文件,此处命名为PointCloudTutorial.cs
    2、在PointCloudRecognizer 下面创建一个手势对象。
    3、编辑c#文件:

public class PointCloudTutorial : MonoBehaviour
{
    void OnCustomGesture( PointCloudGesture gesture )
    {
        Debug.Log( "Recognized custom gesture: " + gesture.RecognizedTemplate.name +
            ", match score: " + gesture.MatchScore +
            ", match distance: " + gesture.MatchDistance );
    }
}

手势事件保护下面几个重要属性:    
`gesture.RecognizedTemplate`: 被认为是最佳匹配的手势模板。    
`gesture.MatchScore`:一个百分比的值,表示匹配的程度。   
`gesture.MatchDistance`:一个测量绝对值,表示匹配程度。   
你还可以使用其他手势的属性。 例如位置和选择对象等属性。    
  • 用代码创建模板
    你可以使用api字自己的编辑器扩展中在运行时候创建手势模板。

void Awake()
{
    PointCloudGestureTemplate triangle = ScriptableObject.CreateInstance<PointCloudGestureTemplate>();
    triangle.name = "Triangle Gesture Template";
    triangle.BeginPoints();
    triangle.AddPoint( 0, 1, 1 );
    triangle.AddPoint( 0, 2, 2 );
    triangle.AddPoint( 0, 3, 1 );
    triangle.AddPoint( 0, 1, 1 );
    triangle.EndPoints();

<span class="n">PointCloudGestureTemplate</span> <span class="n">square</span> <span class="p">=</span> <span class="n">ScriptableObject</span><span class="p">.</span><span class="n">CreateInstance</span><span class="p">&lt;</span><span class="n">PointCloudGestureTemplate</span><span class="p">&gt;();</span>
<span class="n">square</span><span class="p">.</span><span class="n">name</span> <span class="p">=</span> <span class="s">"Square Gesture Template"</span><span class="p">;</span>
<span class="n">square</span><span class="p">.</span><span class="nf">BeginPoints</span><span class="p">();</span>
<span class="n">square</span><span class="p">.</span><span class="nf">AddPoint</span><span class="p">(</span> <span class="m">0</span><span class="p">,</span> <span class="m">2</span><span class="p">,</span> <span class="m">1</span> <span class="p">);</span>
<span class="n">square</span><span class="p">.</span><span class="nf">AddPoint</span><span class="p">(</span> <span class="m">0</span><span class="p">,</span> <span class="m">2</span><span class="p">,</span> <span class="m">3</span> <span class="p">);</span>
<span class="n">square</span><span class="p">.</span><span class="nf">AddPoint</span><span class="p">(</span> <span class="m">0</span><span class="p">,</span> <span class="m">4</span><span class="p">,</span> <span class="m">3</span> <span class="p">);</span>
<span class="n">square</span><span class="p">.</span><span class="nf">AddPoint</span><span class="p">(</span> <span class="m">0</span><span class="p">,</span> <span class="m">4</span><span class="p">,</span> <span class="m">1</span> <span class="p">);</span>
<span class="n">square</span><span class="p">.</span><span class="nf">AddPoint</span><span class="p">(</span> <span class="m">0</span><span class="p">,</span> <span class="m">2</span><span class="p">,</span> <span class="m">1</span> <span class="p">);</span>
<span class="n">square</span><span class="p">.</span><span class="nf">EndPoints</span><span class="p">();</span>

<span class="n">PointCloudRegognizer</span> <span class="n">recognizer</span> <span class="p">=</span> <span class="n">gameObject</span><span class="p">.</span><span class="n">AddComponent</span><span class="p">&lt;</span><span class="n">PointCloudRegognizer</span><span class="p">&gt;();</span>
<span class="n">recognizer</span><span class="p">.</span><span class="nf">AddTemplate</span><span class="p">(</span> <span class="n">triangle</span> <span class="p">);</span>
<span class="n">recognizer</span><span class="p">.</span><span class="nf">AddTemplate</span><span class="p">(</span> <span class="n">square</span> <span class="p">);</span>

}

第一个参数`AddPoint `是一个笔画的顺序,该api暂时只支持单线笔画的手势。    
当`EndPoints() `调用时候,手势模板会被格式化,所有的点都会重新绘制成0到1范围的数。   

教程:识别手指事件


FingerGestures 可以识别向上,向下,悬停,移动,长按等单点输入手势。各种FingerEventDetector组件用于识别对应的手指事件,与 GestureRecognizers类似,都是通过广播信息去触发。

  • FingerEventDetector
    所有的手指事件识别器都派生与一个基础抽象类。通常,每个FingerEventDetector实例监控着所有手指事件信号。也可以配置Finger Index Filter属性,让其只跟踪特定的手指事件。
    和手势识别器一样,手指事件识别器传递一个事件数据对象,改该对象派生于FingerEvent类,包含以下属性:
属性 类型 描述
Name string 消息的名字
Detector FingerEventDetector 该次事件中的手指事件识别器
Finger FingerGestures.Finger 该次事件中的手指类
Position Vector2事件所发生的位置
Selection GameObject 被选中游戏对象 (依赖`ScreenRaycaster `组件)
Hit RaycastHit 光线投射碰撞,由`ScreenRaycaster`提供,在正常显示上非常有用

  • FingerUpDetector

void OnFingerUp( FingerUpEvent e )
{
    //手指已经持续的时间
    float elapsedTime = e.TimeHeldDown;
}    

  • FingerHoverDetector

void OnFingerHover( FingerHoverEvent e )
{
    // 检查状态,是进入还是离开.
    if( e.Phase == FingerHoverPhase.Enter )
    {
        Debug.Log( e.Finger + " entered object: " + e.Selection );
    }
   else if( e.Phase == FingerHoverPhase.Exit )
    {
       Debug.Log( e.Finger + " exited object: " + e.Selection );
    }
}  

  • FingerMotionDetector
    该识别器能够识别两种事件。
    1、OnFingerMove :当手指位置距离上一帧位置有发生变化。
    2、OnFingerStationary :当手指与上一帧位置一样。

void OnFingerMove( FingerMotionEvent e )
{
    float elapsed = e.ElapsedTime;

<span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Started</span> <span class="p">)</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" started moving at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span><span class="p">);</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Updated</span> <span class="p">)</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" moving at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Ended</span> <span class="p">)</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" stopped moving at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>

}

void OnFingerStationary( FingerMotionEvent e ) { float elapsed = e.ElapsedTime;

<span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Started</span> <span class="p">)</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" started stationary state at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Updated</span> <span class="p">)</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" is still stationary at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Phase</span> <span class="p">==</span> <span class="n">FingerMotionPhase</span><span class="p">.</span><span class="n">Ended</span> <span class="p">)</span>
   <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="n">e</span><span class="p">.</span><span class="n">Finger</span> <span class="p">+</span> <span class="s">" stopped being stationary at "</span> <span class="p">+</span> <span class="n">e</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>

}

建议:使用.net代理事件


当使用unity的SendMessage()函数广播事件消息非常方便,但是效率低而且不够.NET代理事件灵活。
* Gesture Events
每个手势识别器都暴露一个公共的OnGesture.NET事件,可以匹配手势事件和手指事件。用法跟用SendMessage()一样。

[RequireComponent( typeof( TapGesture ) )]
public class TapTutorial : MonoBehaviour
{
    void Start()
    {
        // 在对象里面寻找轻击事件识别器
       TapRecognizer tap = GetComponent<TapRecognizer>();

    <span class="c1">// 订阅它的.NET事件

tap.OnGesture += MyTapEventHandler; }

<span class="k">void</span> <span class="nf">MyTapEventHandler</span><span class="p">(</span> <span class="n">TapGesture</span> <span class="n">gesture</span> <span class="p">)</span>
<span class="p">{</span>
    <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="s">"Tap detected at "</span> <span class="p">+</span> <span class="n">gesture</span><span class="p">.</span><span class="n">Position</span> <span class="p">);</span>
<span class="p">}</span>

}

有时候你需要停止监听事件。你可以用以下办法:

tap.OnGesture -= MyTapEventHandler; 

注意停止监听事件时候相关对象的生命周期,有可能会导致内存泄露,这是.NET代理事件的陷阱。

另外一种方法是,FingerGestures单例暴露一个全局的OnGestureEvent钩子,可以监听到任何手势事件。

void Start()
{
    FingerGestures.OnGestureEvent += FingerGestures_OnGestureEvent;
}

void FingerGestures_OnGestureEvent( Gesture gesture ) { Debug.Log( gesture.Recognizer.name + " fired its gesture event" );

<span class="k">if</span><span class="p">(</span> <span class="n">gesture</span> <span class="k">is</span> <span class="n">TapGesture</span> <span class="p">)</span>
   <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span> <span class="s">"Tapped: "</span> <span class="p">+</span> <span class="p">((</span><span class="n">TapGesture</span><span class="p">)</span><span class="n">gesture</span><span class="p">).</span><span class="n">Taps</span> <span class="p">);</span>

}

  • Finger Event
    跟上面类似用法。

FingerUpDetector.OnFingerUp( FingerUpEvent e )
FingerDownDetector.OnFingerDown( FingerDownEvent e )
FingerHoverDetector.OnFingerHover( FingerHoverEvent e )
FingerMotionDetector.OnFingerMove( FingerMotionEvent e )
FingerMotionDetector.OnFingerStationary( FingerMotionEvent e )
FingerGestures.OnFingerEvent( FingerEvent e ) 

原文:http://dp0304.com/unity3d/2013/07/28/fingergestures/



blog comments powered by Disqus