本章要點：
- 添加按鈕的基本方法
- 給按鈕添加動畫效果
1. 添加按鈕的基本方法
在這一章里，我們會使用 UGUI 系統(tǒng)改進現(xiàn)有的 UI ，具體來說，就是用基于游戲?qū)ο蟮陌粹o來控制 unitychan 切換動作。在添加基本的按鈕之前，我們先來調(diào)整一下 Unity 編輯器的視圖。
1.1. 設(shè)置 Game 視圖的 AspectRatio
AspectRatio 是指屏幕的寬高比。在 Game 視圖中默認的寬高比是 FreeAspect ，在上一章的測試中，我們使用的就是這個寬高比，它會自動填滿 Mac 的屏幕。
為了模擬場景在移動設(shè)備上的顯示情況，我們需要調(diào)整 Game 視圖的寬高比。我使用的移動端設(shè)備是小米5S手機，屏幕分辨率是1080×1920，寬高比為9:16。
點擊 FreeAspect ，我們可以看到，在下拉菜單中并沒有合適的寬高比：
那么，我們需要新建一個寬高比——單擊菜單最下面的“＋”：
在設(shè)置參數(shù)時，將 Type 設(shè)置為 Fixed Resolution（固定分辨率），然后，直接輸入移動端的屏幕分辨率即可。在新的寬高比之下，再次測試這個場景，應(yīng)該會看到：
接下來，我們就開始正式進入 UGUI 的話題。說實話，UGUI 的功能非常強大，涉及到的內(nèi)容也很多，我在教程中也只是點到為止。如果希望深入學(xué)習(xí) UGUI 的話，推薦大家看一下這個視頻教學(xué)（蠻牛教育的免費課程）：
http://edu.manew.com/course/183
1.2. 搜集合適的UI素材
我們可以從這個網(wǎng)站（某大神的力作）搜集一些簡單的UI素材：
Android Material Icon Generator
http://jaqen.me/mdpub/
我把素材放進了這個文件夾：Assets / UnityChanAR / Textures / Buttons 。導(dǎo)入之后，還要設(shè)置圖片的 TextureType ：
- 選中圖片，查看 Inspector 視圖（會顯示 ImportSettings ）
- 將 TextureType 設(shè)置為 Sprite (2D and UI)
- 點擊下方的 Apply 按鈕，使設(shè)置生效
在上述操作中涉及的新概念可以參考以下文檔：
-
Import Settings
https://docs.unity3d.com/Manual/ImportSettings.html -
Sprites
https://docs.unity3d.com/Manual/Sprites.html
1.3. 在場景中添加按鈕
我們既可以直接在場景中添加按鈕，也可以通過組件的疊加來實現(xiàn)按鈕的功能。為了更好地說明 Unity 編輯器的特性，我采取第二種方法，通過疊加組件來實現(xiàn)按鈕。
首先，我們需要在場景中添加一個圖片：在 Hierarchy 視圖中點擊右鍵，然后選擇 UI > Image ，如圖：
這一步操作會自動在場景中加入以下對象：
- Canvas對象，所有的UGUI對象都是Canvas對象的子對象
- Image對象，自帶一個Image組件的UI對象（稍后介紹）
- EventSystem對象，對鼠標點擊等事件作出反應(yīng)的對象
如果我們再次添加Image對象，只會在Canvas對象下增加一個新的Image子對象。
接下來，我們需要調(diào)節(jié)Image對象的位置。在Inspector面板中點擊紅色箭頭指向的位置，然后按住alt鍵（在mac上是option鍵），按住之后選擇左下角位置即可。之后，可以參考紅色方框里的數(shù)值，調(diào)節(jié)Image對象的大小和位置。
1.4. 使用Image組件
UI對象的一個重要功能就是顯示圖片，這個功能是由Image組件實現(xiàn)的。在Hierarchy面板里選中Image對象，它的Image組件會顯示在右側(cè)的Inspector面板中。接下來，把想要添加的圖片拖拽到“SourceImage”后面的輸入框里即可。另外，我為了方便管理，把Image對象重命名為ArrowLeft。
2. 給按鈕添加動畫
2.1. 使用Button組件
接下來，我們要讓ArrowLeft具有按鈕的功能。按鈕功能是通過“Button (Script)”組件實現(xiàn)的：在ArrowLeft的Inspector面板中，依次點擊AddComponent -> UI -> Button即可添加Button組件。
Animation Integration
https://docs.unity3d.com/Manual/UIAnimationIntegration.html
Button組件中有一個非常實用的屬性——Transition。下面我們就通過這個屬性來給按鈕添加一些有趣的效果。Transition屬性被默認設(shè)置為ColorTint：
點擊Transition屬性后面的菜單，選擇Animation，給按鈕增加動畫效果。接著，點擊Auto Generate Animation。
彈出一個對話框，讓我們保存自動生成的Animation Controller。我把它存放在下列文件夾：Assets/UnityChanAR/Animations/Buttons。
給左右兩個按鈕分別創(chuàng)建Animation Controller：
然后，打開Unity編輯器中的Animation視圖：
在Animation視圖中，選中ArrowRight，然后點擊Normal：
在下拉菜單中選擇我們想要編輯的動畫片段——Highlighted：
這時，畫面左上角帶有紅點的按鈕被自動按下，而且，播放按鈕也從黑色變成紅色。這意味著，Unity編輯器已經(jīng)開始記錄動畫，場景和Inspector中的操作都會被記錄下來。
在左側(cè)的輸入框中輸入10（表示第10幀）。然后，更改按鈕的大小，可以看到右側(cè)的Scale屬性變成了紅色：
接著，改變按鈕的顏色：
到這里，我們就可以點擊左上角帶紅點的按鈕，停止記錄動畫。最后，將默認的連續(xù)播放取消：
2.5. 測試
當我們把鼠標移動到按鈕上時，按鈕高亮——尺寸變大并且改變顏色：
Unity × EasyAR 實戰(zhàn)教程：
