本章要点：

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和“脱卡”