5.3 手势对象及其事件
上面工作完成了四个字母对象的创建，制作了每个字母静止不动的动画、缩放动画、左右旋转动画，并建立了动画间的关联。为了在游戏运行中，能够让这些动画播放，将用处理用户输入的FingerGestures插件，通过该插件的轻击手势识别器、滑动手势识别器和自定义手势识别器的应用，可以完成游戏过程中单击字母放大、按指定方向滑动字母、左右摇摆和识别手绘字母放大的效果。
任务要求
本次任务是一个难度较高的综合任务，将动画、FingerGestures插件以及音频等结合在一起来完成游戏的功能。首先是基于FingerGestures插件的单击、滑动、识别用户手势事件实现认识字母、认识方向和学习字母基本书写（动手画画看）的功能；然后通过脚本的添加，实现音频效果的播放。
图5-22和图5-23是鼠标在字母F上单击，字母F放大的效果，同时在屏幕上显示“字母F”，而且有同步语音，实现初步认识字母。图5-24和图5-25是鼠标在屏幕上从右往左滑动，字母B左右旋转的效果，同时在屏幕上显示“B在左面”，而且有同步语音，实现认识字母和方向。图5-26和图5-27是鼠标在屏幕上画出字母D的形状，字母D放大显示的效果，同时在屏幕上显示“字母D”，而且有同步语音，实现字母基本书写的学习。
图5-22 鼠标在字母F上单击
图5-23 鼠标单击字母F后放大的效果
图5-24 鼠标在字母B上从右往左滑动
图5-25 字母B左右旋转的效果
图5-26 鼠标绘制字母D的形状
图5-27 识别手势后字母D放大的效果
通过完成任务：
● 学习在Unity项目中如何添加插件。
● 熟练使用FingerGestures插件，实现单击、滑动等操作。
● 掌握用FingerGestures插件创建手势模板和识别用户手势的方法。
● 掌握Audio Source音频组件的使用方法，实现控制音频和播放音频操作。
（资源文件路径：Unity 3D/2D移动开发实战教程\第5章\实例1）
5.3.1 导入并创建FingerGestures对象
本任务将使用FingerGestures插件实现单击和滑动的操作，首先需要导入该插件，创建FingerGestures对象。在程序中主要使用了Tap、Swipe和Point Cloud三种事件，各个事件所应用的动作如表5-2所示。
表5-2 事件及相应动作
步骤1 导入FingerGestures插件
（1）要将FingerGestures插件导入至本项目内，则首先需要在Project面板的Assets文件夹下创建一个名字为Plugins的文件夹。
（2）在Plugins文件夹中右键单击，在弹出的菜单中选择Import Package→Custom Package命令。然后选择素材中的插件文件，单击确定按钮。
（3）在弹出的Import Unity Package对话框中单击Import按钮，完成插件的导入工作。
步骤2 创建FingerGestures对象
要使用此插件的功能，必须先创建一个FingerGestures对象。创建方式是从Project面板的Assets\Plugins\FingerGestures\Prefabs文件夹中将FingerGestures预制体直接拖曳至Hierarchy面板，完成创建，如图5-28所示。
图5-28 创建FingerGestures对象
5.3.2 创建Gestures对象
本游戏的手势控制检测可以发生在屏幕界面的任何一个地方，首先需要创建一个Gestures对象作为检测手势发生的主要对象。创建对象的方法是选择菜单栏的GameObject→Create Empty命令，新建一个空的对象，并将其命名为Gestures，如图5-29所示。
接着将Gestures对象的Position属性调整为和MainCamera的位置一样，如图5-30所示。
图5-29 创建Gestures对象
图5-30 设置Gestures对象属性
5.3.3 添加检测事件和碰撞器
步骤1 添加射线检测
在选中Gestures对象的情况下，只有为此对象加入射线检测Screen Raycaster，才能正确地检测各种手指事件的触发。我们可以通过依次在菜单栏中选择Component→FingerGestures→Components菜单选项来加入Screen Raycaster，如图5-31所示。
图5-31 添加Screen Raycaster
步骤2 添加检测事件
若要为Gestures对象加入检测事件，请先选中Gestures对象，再依次选择菜单栏中的Component→FingerGestures→Gestures命令，分别加入Tap Recognizer、Swipe Recognizer和Point Cloud Recognizer三个事件，如图5-32所示。这样就为识别单击、滑动、手势识别做好了准备。
图5-32 添加三个检测事件
步骤3 加入Box Collider 2D
只有为4个英文字母加入碰撞范围的检测，才能清楚定义出会对手指控制产生反应的区域，因此分别选择A、B、D和F对象，选择菜单栏的Component→Physics 2D→Box Collider 2D命令添加碰撞器，如图5-33所示。
图5-33 添加Box Collider2D碰撞器
5.3.4 编写初始脚本
步骤1 创建AdvancedGestureScript.cs脚本文件
在Assets文件夹中创建AdvancedGestureScript.cs脚本文件并打开，然后在其中定义成员变量。
【程序代码说明】
第5～8行：创建字母对象A、B、D、F。
第9行：定义存储声音剪辑的数组。
第10～13行：定义Animator类型的对象anim_A、anim_B、anim_C、anim_D。
第14行：定义一个字符串变量text，用于存储屏幕上的显示信息。
步骤2 建立脚本文件与Gestures对象的连接
保存该脚本文件，并把该文件拖曳至Hierarchy面板的Gestures对象上，建立对象与程序的连接，如图5-34所示。
图5-34 建立对象和程序的连接
步骤3 为字母对象赋值
选中Hierarchy面板的Gestures对象，在Inspector面板中找到Advanced Gestures Script组件并展开，将Hierarchy窗口的A、B、D和F对象拖曳至对应的字段中，按图5-35为各个对象赋值。
图5-35 为字母对象赋值
步骤4 添加Audio Source对象
（1）由于本项目需要使用声音文件（或音频文件），因此必须在Gestures对象上加入Audio Source组件。选择菜单栏中的Component→Audio→Audio Source命令，为Gestures对象添加组件，此组件可用来控制音频的播放，如图5-36所示。
（2）在Inspector面板会出现Audio Source组件，如图5-37所示。本游戏可以直接使用Audio的默认参数执行，各属性的含意如下。
● Audio Clip：用来指定要播放的音频文件。
● Mute：勾选该复选框程序将设置为静音。
● Play On Awake：勾选该复选框后，一执行程序就开始播放音频文件。
● Loop：勾选该复选框将开启循环播放。
● Volume：用于音量大小的控制。
图5-36 添加Audio Source组件
图5-37 Audio Source组件
步骤5 编写Start函数
打开AdvancedGestureScript.cs脚本文件，对其中的Start函数进行修改。Start函数的主要作用是设置游戏一开始时各个变量的初始值，使用GetComponent<Animator>方法获取各个英文字母的动画，具体代码如下。
【程序代码说明】
第3行：获取A对象上的Animator组件。
第4行：获取B对象上的Animator组件。
第5行：获取D对象上的Animator组件。
第6行：获取F对象上的Animator组件。
步骤6 添加OnGUI函数
此函数是用来制作显示文字的Label，将通过Unity内建的GUI组件来实现。在查看程序代码之前先来认识一下GUI组件，GUI组件是Unity内建用来设计“用户界面（UI）”的对象，因此若需要在界面中显示文字标签（Label）、按钮（Button）、工具栏（Toolbar）、文本输入框（TextField）等都可以直接通过GUI内建的方法来产生。
以绘制一个按钮（Button）为例，可通过GUI.Button()方法来产生按钮，而一般按钮都为矩形，因此要通过矩形绘制方法Rect来设置按钮的坐标、大小与文字。以下面这段标准程序语法为例：
GUI.Button（new Rect（10,10,50,30），"Click"））
其中：
● GUI.Button：代表产生一个GUI按钮。
● Rect：代表创建按钮的矩形区域。
●（10,10）：代表按钮左上角的X和Y坐标。
● "Click"：代表按钮上的文字。
本游戏因为只是显示文字，并不具有按钮的功能，因此调用GUI里面的Label来显示文字。为了在显示不同长度字符串时整个Label都能处于界面的中央，因此根据不同的字符串长度（text.Length），定义设置了Label的坐标会随着屏幕的尺寸而变动，而Label的大小则都定义为300×300pixels。为了显示清晰，设置了显示文字的大小和颜色。程序代码如下：
步骤7 运行程序进行测试
运行程序后查看屏幕上的字母对象和“请滑向形状，或点点看、画画形状”文本，效果如图5-38所示。但是单击字母、在屏幕上滑动等操作都没有响应，下面章节会具体介绍如何处理这些事件。
图5-38 运行效果
5.3.5 Tap事件处理
FingerGestures插件的Tap事件（单击事件）的默认处理函数是OnTap。此函数常用来处理在界面中单击时所要执行的操作。我们需要单击英文字母触发以下三个操作。
（1）放大显示此英文字母。
（2）播放该字母的读音。
（3）文字框内显示此字母的文字。
步骤1 添加OnTap函数
打开AdvancedGestureScript.cs脚本文件，添加OnTap函数来检测单击四个英文字母所要触发的事件。
【程序代码说明】
第4～10行：首先通过gesture.Selection获取当前被单击的对象，判断如果被单击的对象是A，将播放对象A的缩放动画；将音频数组Clip[0]的音频文件内容赋值给Audio Source对象，使用Play()方法播放声音；并指定显示的文字内容为“字母A”。
第11～17行：实现对字母B单击的效果。
第18～24行：实现对字母D单击的效果。
第25～31行：实现对字母F单击的效果。
步骤2 给音频数组赋值
在Inspector面板中为Clip音频数组赋值，方便使用程序播放不同的音频文件，数组的大小可以通过Size的值来决定，如图5-39所示。OnTap函数只用到数组中的部分内容，这里将数组的Size设置为8，其他音频后续使用。
图5-39 为音频数组赋值
步骤3 运行程序进行测试
鼠标在字母F上单击，字母F会显示放大效果，同时在屏幕上显示“字母F”文字，而且有同步语音，实现初步认识字母的目的。其他情况类似。
5.3.6 Swipe事件处理
FingerGestures插件的Swipe事件（滑动事件）的默认处理函数是OnSwipe。此函数可用来处理在界面中滑动时所要执行的操作。检测到滑动事件时会先判断当前手指挥动的方向（上、下、左、右），再根据挥动的方向触发以下三个操作。
（1）播放该方向英文字母的旋转动画。
（2）播放当前滑动方向的音频文件。
（3）文字框内显示滑动方向的文字。
步骤1 添加OnSwipe函数
打开AdvancedGestureScript.cs脚本文件，添加OnSwipe函数来处理滑动时所要执行的操作。
【程序代码说明】
第4～9行：实现检测到往上滑动时程序所做动作。使用gesture.Direction获取当前滑动的方向，若滑动方向是往上（SwipeDirection.Up），则使用SetTrigger方法来触发A的旋转动画；接着将音频文件Clip[4]赋值给Audio Source组件播放声音；并显示文字为“A在上面”。
第10～14行：实现检测到往左滑动时，对字母B所做操作。
第16～21行：实现检测到往右滑动时，对字母F所做操作。
第22～27行：实现检测到往下滑动时，对字母D所做操作。
步骤2 运行程序进行测试
鼠标在屏幕上从右往左滑动，显示字母B左右旋转效果，同时在屏幕上显示“B在左面”文字，而且有同步语音，实现认识字母和方向的目的。其他情况类似。
5.3.7 Point Cloud事件处理
为了实现能够学习字母书写的目的，通过自定义手势模板功能，先创建手势的模板图形，当游戏运行时，可以在屏幕上进行画一画，所绘制图形与手势模板进行比对，达到学习字母书写的目的。
本次任务将实现自定义手势模板功能，这个功能可以让使用者直接在屏幕中画出几何形状，通过触发装置，使得所对应的形状出现放大效果。通过本次任务，掌握手势模板的使用方法。
步骤1 定义GestureTemplate
为实现本次任务，需要先定义GestureTemplate的内容，使用者在屏幕中画出的形状将会和这一步骤所定义的Template进行比较，需要设置的Template包括A、B、D和F。
（1）首先在Assets文件夹下新建一个文件夹，命名为PointCloud Gesture Template，所有制作的Template可以全部放置在这个文件夹中，方便管理。
（2）在新建的文件夹内单击鼠标右键，选择Create→PointCloud Gesture Template命令，创建一个手势模板并命名为A，如图5-40所示。
图5-40 创建A手势模板
（3）选中刚刚创建好的A模板，可以看到Inspector面板内出现了Edit按钮，如图5-41所示。单击Edit按钮，会打开图形绘制窗口。
图5-41 Edit按钮
（4）直接在窗口内绘制一个A，完成后单击Apply按钮保存设置，如图5-42所示。注意在绘制手势模板内容时，因为软件要求一笔画成，所以在实际使用时会发现与正常笔画是不统一的，为了能够正常操作，运行软件时，还得按照手势模板的绘制过程在屏幕上画，才能比对成功，这也是软件的一个欠缺。
图5-42 绘制A模板并保存
（5）接着按照同样的方式创建B、D和F的模板，如图5-43所示。
图5-43 绘制B、D、F的模板
（6）完成模板的绘制后，选中Gestures对象，在Inspector面板中打开Point Cloud Recognizer组件，将Gesture Template List设为4，代表当前有四个模板需要设置，接着将Element0到Element3分别拉入刚刚创建的四个模板，顺序不限，如图5-44所示。
图5-44 将创建好的四个模板加入Point Cloud Recognizer
步骤2 添加OnCustomGesture函数
此函数的功能主要用于判断在界面中自行动手绘制图形时，若检测到画出的图形与事先设置的Template相似，则执行以下三个操作。
（1）播放该形状字母的缩放动画。
（2）播放当前对应形状字母的音频文件。
（3）文字框内显示对应字母的形状。
具体代码如下。
【程序代码说明】
第4～9行：检测到A形状时，对字母A执行操作。使用RecognizedTemplate.name获取当前检测到的Template名称，如果是字母A，启动字母A的缩放动画，并把Clip[0]的音频文件赋值给AudioSource来播放，并显示文字内容为“字母A”。
第10～15行：检测到B形状时，对字母B执行操作。
第16～21行：检测到D形状时，对字母D执行操作。
第22～27行：检测到F形状时，对字母F执行操作。
步骤3 运行程序进行测试
鼠标在屏幕上画出字母D的形状，字母D放大显示效果，同时在屏幕上显示“字母D”，而且有同步语音，实现字母基本书写的学习。其他情况类似。
至此就完成了英语启蒙教育小游戏最主要的一个场景的制作，保存场景，命名为“英语启蒙教育小游戏”，对项目进行保存。