本章要點(diǎn)：
- 添加按鈕的基本方法
- 給按鈕添加動(dòng)畫(huà)效果
1. 添加按鈕的基本方法
在這一章里边涕，我們會(huì)使用 UGUI 系統(tǒng)改進(jìn)現(xiàn)有的 UI 先较，具體來(lái)說(shuō)文兑，就是用基于游戲?qū)ο蟮陌粹o來(lái)控制 unitychan 切換動(dòng)作奖年。在添加基本的按鈕之前，我們先來(lái)調(diào)整一下 Unity 編輯器的視圖惕它。
1.1. 設(shè)置 Game 視圖的 AspectRatio
AspectRatio 是指屏幕的寬高比怕午。在 Game 視圖中默認(rèn)的寬高比是 FreeAspect ，在上一章的測(cè)試中淹魄，我們使用的就是這個(gè)寬高比郁惜，它會(huì)自動(dòng)填滿 Mac 的屏幕。
為了模擬場(chǎng)景在移動(dòng)設(shè)備上的顯示情況揭北，我們需要調(diào)整 Game 視圖的寬高比。我使用的移動(dòng)端設(shè)備是小米5S手機(jī)吏颖，屏幕分辨率是1080×1920搔体，寬高比為9:16。
點(diǎn)擊 FreeAspect 半醉，我們可以看到疚俱，在下拉菜單中并沒(méi)有合適的寬高比：
那么，我們需要新建一個(gè)寬高比——單擊菜單最下面的“＋”：
在設(shè)置參數(shù)時(shí)缩多，將 Type 設(shè)置為 Fixed Resolution（固定分辨率）呆奕，然后，直接輸入移動(dòng)端的屏幕分辨率即可衬吆。在新的寬高比之下梁钾，再次測(cè)試這個(gè)場(chǎng)景，應(yīng)該會(huì)看到：
接下來(lái)逊抡，我們就開(kāi)始正式進(jìn)入 UGUI 的話題姆泻。說(shuō)實(shí)話，UGUI 的功能非常強(qiáng)大冒嫡，涉及到的內(nèi)容也很多拇勃，我在教程中也只是點(diǎn)到為止。如果希望深入學(xué)習(xí) UGUI 的話孝凌，推薦大家看一下這個(gè)視頻教學(xué)（蠻牛教育的免費(fèi)課程）：
http://edu.manew.com/course/183
1.2. 搜集合適的UI素材
我們可以從這個(gè)網(wǎng)站（某大神的力作）搜集一些簡(jiǎn)單的UI素材：
Android Material Icon Generator
http://jaqen.me/mdpub/
我把素材放進(jìn)了這個(gè)文件夾：Assets / UnityChanAR / Textures / Buttons 方咆。導(dǎo)入之后，還要設(shè)置圖片的 TextureType ：
- 選中圖片蟀架，查看 Inspector 視圖（會(huì)顯示 ImportSettings ）
- 將 TextureType 設(shè)置為 Sprite (2D and UI)
- 點(diǎn)擊下方的 Apply 按鈕瓣赂，使設(shè)置生效
在上述操作中涉及的新概念可以參考以下文檔：
-
Import Settings
https://docs.unity3d.com/Manual/ImportSettings.html -
Sprites
https://docs.unity3d.com/Manual/Sprites.html
1.3. 在場(chǎng)景中添加按鈕
我們既可以直接在場(chǎng)景中添加按鈕，也可以通過(guò)組件的疊加來(lái)實(shí)現(xiàn)按鈕的功能片拍。為了更好地說(shuō)明 Unity 編輯器的特性钩述，我采取第二種方法，通過(guò)疊加組件來(lái)實(shí)現(xiàn)按鈕穆碎。
首先牙勘，我們需要在場(chǎng)景中添加一個(gè)圖片：在 Hierarchy 視圖中點(diǎn)擊右鍵，然后選擇 UI > Image ，如圖：
這一步操作會(huì)自動(dòng)在場(chǎng)景中加入以下對(duì)象：
- Canvas對(duì)象方面，所有的UGUI對(duì)象都是Canvas對(duì)象的子對(duì)象
- Image對(duì)象放钦，自帶一個(gè)Image組件的UI對(duì)象（稍后介紹）
- EventSystem對(duì)象，對(duì)鼠標(biāo)點(diǎn)擊等事件作出反應(yīng)的對(duì)象
如果我們?cè)俅翁砑覫mage對(duì)象恭金，只會(huì)在Canvas對(duì)象下增加一個(gè)新的Image子對(duì)象操禀。
接下來(lái)，我們需要調(diào)節(jié)Image對(duì)象的位置横腿。在Inspector面板中點(diǎn)擊紅色箭頭指向的位置颓屑，然后按住alt鍵（在mac上是option鍵），按住之后選擇左下角位置即可耿焊。之后揪惦，可以參考紅色方框里的數(shù)值，調(diào)節(jié)Image對(duì)象的大小和位置罗侯。
1.4. 使用Image組件
UI對(duì)象的一個(gè)重要功能就是顯示圖片器腋，這個(gè)功能是由Image組件實(shí)現(xiàn)的。在Hierarchy面板里選中Image對(duì)象钩杰，它的Image組件會(huì)顯示在右側(cè)的Inspector面板中纫塌。接下來(lái)，把想要添加的圖片拖拽到“SourceImage”后面的輸入框里即可讲弄。另外措左，我為了方便管理，把Image對(duì)象重命名為ArrowLeft避除。
2. 給按鈕添加動(dòng)畫(huà)
2.1. 使用Button組件
接下來(lái)媳荒，我們要讓ArrowLeft具有按鈕的功能。按鈕功能是通過(guò)“Button (Script)”組件實(shí)現(xiàn)的：在ArrowLeft的Inspector面板中驹饺，依次點(diǎn)擊AddComponent -> UI -> Button即可添加Button組件钳枕。
Animation Integration
https://docs.unity3d.com/Manual/UIAnimationIntegration.html
Button組件中有一個(gè)非常實(shí)用的屬性——Transition。下面我們就通過(guò)這個(gè)屬性來(lái)給按鈕添加一些有趣的效果赏壹。Transition屬性被默認(rèn)設(shè)置為ColorTint：
點(diǎn)擊Transition屬性后面的菜單鱼炒，選擇Animation，給按鈕增加動(dòng)畫(huà)效果蝌借。接著昔瞧，點(diǎn)擊Auto Generate Animation。
彈出一個(gè)對(duì)話框菩佑，讓我們保存自動(dòng)生成的Animation Controller自晰。我把它存放在下列文件夾：Assets/UnityChanAR/Animations/Buttons。
給左右兩個(gè)按鈕分別創(chuàng)建Animation Controller：
然后稍坯，打開(kāi)Unity編輯器中的Animation視圖：
在Animation視圖中酬荞，選中ArrowRight搓劫，然后點(diǎn)擊Normal：
在下拉菜單中選擇我們想要編輯的動(dòng)畫(huà)片段——Highlighted：
這時(shí)，畫(huà)面左上角帶有紅點(diǎn)的按鈕被自動(dòng)按下混巧，而且枪向，播放按鈕也從黑色變成紅色。這意味著咧党，Unity編輯器已經(jīng)開(kāi)始記錄動(dòng)畫(huà)秘蛔，場(chǎng)景和Inspector中的操作都會(huì)被記錄下來(lái)。
在左側(cè)的輸入框中輸入10（表示第10幀）傍衡。然后深员，更改按鈕的大小，可以看到右側(cè)的Scale屬性變成了紅色：
接著蛙埂，改變按鈕的顏色：
到這里倦畅，我們就可以點(diǎn)擊左上角帶紅點(diǎn)的按鈕，停止記錄動(dòng)畫(huà)箱残。最后滔迈，將默認(rèn)的連續(xù)播放取消：
2.5. 測(cè)試
當(dāng)我們把鼠標(biāo)移動(dòng)到按鈕上時(shí)止吁，按鈕高亮——尺寸變大并且改變顏色：
Unity × EasyAR 實(shí)戰(zhàn)教程：
