Unity × EasyAR 实战教程 - 第2章：使用 UGUI 改进项目

本章要点：

1. 添加按钮的基本方法
2. 给按钮添加动画效果

1. 添加按钮的基本方法

在这一章里，我们会使用 UGUI 系统改进现有的 UI ，具体来说，就是用基于游戏对象的按钮来控制 unitychan 切换动作。在添加基本的按钮之前，我们先来调整一下 Unity 编辑器的视图。

1.1. 设置 Game 视图的 AspectRatio

AspectRatio 是指屏幕的宽高比。在 Game 视图中默认的宽高比是 FreeAspect ，在上一章的测试中，我们使用的就是这个宽高比，它会自动填满 Mac 的屏幕。

为了模拟场景在移动设备上的显示情况，我们需要调整 Game 视图的宽高比。我使用的移动端设备是小米5S手机，屏幕分辨率是1080×1920，宽高比为9:16。

点击 FreeAspect ，我们可以看到，在下拉菜单中并没有合适的宽高比：

设置Game视图的显示尺寸-01

那么，我们需要新建一个宽高比——单击菜单最下面的“＋”：

设置Game视图的显示尺寸-02

在设置参数时，将 Type 设置为 Fixed Resolution（固定分辨率），然后，直接输入移动端的屏幕分辨率即可。在新的宽高比之下，再次测试这个场景，应该会看到：

设置Game视图显示尺寸后再次测试

接下来，我们就开始正式进入 UGUI 的话题。说实话，UGUI 的功能非常强大，涉及到的内容也很多，我在教程中也只是点到为止。如果希望深入学习 UGUI 的话，推荐大家看一下这个视频教学（蛮牛教育的免费课程）：
http://edu.manew.com/course/183

1.2. 搜集合适的UI素材

我们可以从这个网站（某大神的力作）搜集一些简单的UI素材：
Android Material Icon Generator
http://jaqen.me/mdpub/

本系列教程将会用到的图片

我把素材放进了这个文件夹：Assets / UnityChanAR / Textures / Buttons 。导入之后，还要设置图片的 TextureType ：

1. 选中图片，查看 Inspector 视图（会显示 ImportSettings ）
2. 将 TextureType 设置为 Sprite (2D and UI)
3. 点击下方的 Apply 按钮，使设置生效

设置图片的TextureType

在上述操作中涉及的新概念可以参考以下文档：

• Import Settings
  https://docs.unity3d.com/Manual/ImportSettings.html
• Sprites
  https://docs.unity3d.com/Manual/Sprites.html

1.3. 在场景中添加按钮

我们既可以直接在场景中添加按钮，也可以通过组件的叠加来实现按钮的功能。为了更好地说明 Unity 编辑器的特性，我采取第二种方法，通过叠加组件来实现按钮。

首先，我们需要在场景中添加一个图片：在 Hierarchy 视图中点击右键，然后选择 UI > Image ，如图：

向场景中加入UI对象

这一步操作会自动在场景中加入以下对象：

1. Canvas对象，所有的UGUI对象都是Canvas对象的子对象
2. Image对象，自带一个Image组件的UI对象（稍后介绍）
3. EventSystem对象，对鼠标点击等事件作出反应的对象

如果我们再次添加Image对象，只会在Canvas对象下增加一个新的Image子对象。

接下来，我们需要调节Image对象的位置。在Inspector面板中点击红色箭头指向的位置，然后按住alt键（在mac上是option键），按住之后选择左下角位置即可。之后，可以参考红色方框里的数值，调节Image对象的大小和位置。

调节Image对象的大小和位置

1.4. 使用Image组件

UI对象的一个重要功能就是显示图片，这个功能是由Image组件实现的。在Hierarchy面板里选中Image对象，它的Image组件会显示在右侧的Inspector面板中。接下来，把想要添加的图片拖拽到“SourceImage”后面的输入框里即可。另外，我为了方便管理，把Image对象重命名为ArrowLeft。

给Image对象添加图片

2. 给按钮添加动画

2.1. 使用Button组件

接下来，我们要让ArrowLeft具有按钮的功能。按钮功能是通过“Button (Script)”组件实现的：在ArrowLeft的Inspector面板中，依次点击AddComponent -> UI -> Button即可添加Button组件。

Animation Integration
https://docs.unity3d.com/Manual/UIAnimationIntegration.html

Button组件中有一个非常实用的属性——Transition。下面我们就通过这个属性来给按钮添加一些有趣的效果。Transition属性被默认设置为ColorTint：

Button组件的Transition属性

点击Transition属性后面的菜单，选择Animation，给按钮增加动画效果。接着，点击Auto Generate Animation。

选择Animation并生成动画

弹出一个对话框，让我们保存自动生成的Animation Controller。我把它存放在下列文件夹：Assets/UnityChanAR/Animations/Buttons。

新建Animation Controller

给左右两个按钮分别创建Animation Controller：

Project面板中的Animation Controller

然后，打开Unity编辑器中的Animation视图：

增加Animation视图

在Animation视图中，选中ArrowRight，然后点击Normal：

选择可以进行动画编辑的对象——ArrowRight

在下拉菜单中选择我们想要编辑的动画片段——Highlighted：

选择我们想要编辑的动画片段——Highlighted

这时，画面左上角带有红点的按钮被自动按下，而且，播放按钮也从黑色变成红色。这意味着，Unity编辑器已经开始记录动画，场景和Inspector中的操作都会被记录下来。

开始记录动画

在左侧的输入框中输入10（表示第10帧）。然后，更改按钮的大小，可以看到右侧的Scale属性变成了红色：

更改按钮在高亮时的大小

接着，改变按钮的颜色：

更改按钮在高亮时的颜色

到这里，我们就可以点击左上角带红点的按钮，停止记录动画。最后，将默认的连续播放取消：

取消连续播放

2.5. 测试

当我们把鼠标移动到按钮上时，按钮高亮——尺寸变大并且改变颜色：

按钮高亮时的效果.gif

Unity × EasyAR 实战教程：

1. Unity × EasyAR 实战教程 - 第1章：激活并使用 EasyAR
2. Unity × EasyAR 实战教程 - 第2章：使用 UGUI 改进项目
3. Unity × EasyAR 实战教程 - 第3章：LeanTouch 入门
4. Unity × EasyAR 实战教程 - 第4章：导出并安装
5. Unity × EasyAR 实战教程 - 第5章：使用ImageTarget和“脱卡”