5.3 手势对象及其事件_Unity 3D/2D移动开发实战教程-QQ阅读女生幻言网

书名：Unity 3D/2D移动开发实战教程
作者名：朱淑琴
本章字数：4699字
更新时间：2025-02-25 13:59:02

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所示。