Unity × EasyAR 实战教程 - 第2章：使用 UGU
本章要点：
- 添加按钮的基本方法
- 给按钮添加动画效果
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 ：
- 选中图片，查看 Inspector 视图（会显示 ImportSettings ）
- 将 TextureType 设置为 Sprite (2D and UI)
- 点击下方的 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对象
这一步操作会自动在场景中加入以下对象：
- Canvas对象，所有的UGUI对象都是Canvas对象的子对象
- Image对象，自带一个Image组件的UI对象（稍后介绍）
- 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 实战教程：
