版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2019.01.28 星期一 |
前言
Unity是由Unity Technologies開發(fā)的一個讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化泽篮、實時三維動畫等類型互動內(nèi)容的多平臺的綜合型游戲開發(fā)工具宦言，是一個全面整合的專業(yè)游戲引擎。Unity類似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的圖型化開發(fā)環(huán)境為首要方式的軟件。其編輯器運行在Windows 和Mac OS X下多柑，可發(fā)布游戲至Windows论衍、Mac瑞佩、Wii、iPhone坯台、WebGL（需要HTML5）炬丸、Windows phone 8和Android平臺。也可以利用Unity web player插件發(fā)布網(wǎng)頁游戲蜒蕾，支持Mac和Windows的網(wǎng)頁瀏覽稠炬。它的網(wǎng)頁播放器也被Mac 所支持。網(wǎng)頁游戲 坦克英雄和手機游戲王者榮耀都是基于它的開發(fā)咪啡。
下面我們就一起開啟Unity之旅首启。感興趣的看下面幾篇文章。
1. Unity開啟篇（一） —— Unity界面及創(chuàng)建第一個簡單的游戲 （一）
2. Unity開啟篇（二） —— Unity界面及創(chuàng)建第一個簡單的游戲 （二）
3. Unity開啟篇（三） —— 一款簡單射擊游戲示例 （一）
4. Unity開啟篇（四） —— 一款簡單射擊游戲示例 （二）
5. Unity開啟篇（五） —— 一款簡單射擊游戲示例 （三）
6. Unity開啟篇（六） —— Unity動畫簡介 （一）
7. Unity開啟篇（七） —— Unity動畫簡介 （二）
8. Unity開啟篇（八） —— Unity聲音簡介（一）
9. Unity開啟篇（九） —— Unity聲音簡介（二）
10. Unity開啟篇（十） —— Unity粒子系統(tǒng)簡介（一）
11. Unity開啟篇（十一） —— Unity粒子系統(tǒng)簡介（二）
12. Unity開啟篇（十二） —— Unity腳本簡介（一）
13. Unity開啟篇（十三） —— Unity腳本簡介（二）
14. Unity開啟篇（十四） —— Unity UI簡介（一）
15. Unity開啟篇（十五） —— Unity UI簡介（二）
開始
在這部分中撤摸，您將學(xué)習(xí)如何將動畫合并到用戶界面中毅桃。
在前面一篇中您創(chuàng)建了一個帶有兩個按鈕的漂亮場景。 您學(xué)習(xí)了如何使用圖像准夷，按鈕和文本UI控件钥飞，以及錨點等概念。 但是衫嵌，場景本身非常簡單读宙，需要升級。
在本教程中楔绞，您將通過添加動畫结闸，設(shè)置對話框和更多UI控件（如滑塊和切換）來修飾場景掖棉。
所以，繼續(xù)在Unity中打開項目膀估。 打開MenuScene幔亥，接著一起思考UI！
Animating Buttons
你將通過添加一些很酷的動畫來直接進(jìn)入練習(xí)察纯。 這有幾個原因帕棉。 首先 - 動畫很酷！ 其次饼记，它們對這個項目很實用香伴。 您需要按鈕退出場景，以便有足夠的空間顯示您稍后將創(chuàng)建的新對話框具则。
1. Creating Animation and Animator
動畫按鈕與動畫任何其他Unity對象沒有什么不同即纲。 您需要添加Animator組件，創(chuàng)建一些動畫并在它們之間設(shè)置狀態(tài)和轉(zhuǎn)換博肋。
以下是成功的步驟：
- 1） 在層次結(jié)構(gòu)中選擇
Btn_Start - 2） 打開
Animation view低斋。 - 3） 單擊“動畫”視圖中的
Create按鈕。 這將創(chuàng)建Animator和動畫片段匪凡。 - 4） 將動畫命名為
btn_start_slide_out并將其保存在Animations文件夾中膊畴。
除了創(chuàng)建動畫本身之外，Unity還向btn_start添加了一個Animator組件并創(chuàng)建了一個Animator Controller病游。
2. Animating a Button Sliding Out of the Screen
雖然你在技術(shù)上會制作兩個動畫 - 按鈕滑出然后滑回 - 你將成為一個精明的開發(fā)者并創(chuàng)建一個唇跨，然后反轉(zhuǎn)它。
若要創(chuàng)建滑出動畫衬衬，請按照下列步驟操作：
- 1） 在層次結(jié)構(gòu)中選擇
Btn_Start - 2） 確保
Animation view可見买猖。 - 3） 單擊時間線
(timeline)中的1:00標(biāo)記，確保動畫錄制開啟滋尉。 它應(yīng)該自動執(zhí)行此操作玉控。
注意：確保錄制的最簡單方法是查看播放控件并觀察它們是否變?yōu)榧t色。
- 4） 將
anchors更換為top-stretch兼砖。 - 5） 在檢查器
(Inspector)中將Pos Y更改為60奸远。 - 6） 單擊紅色圓圈按鈕
(red circle button)停止錄制。
A：在0:00標(biāo)記處自動插入了一個關(guān)鍵幀讽挟。 此時懒叛，按鈕位于其起始位置，正是您在上一個教程中定位的位置耽梅。
B：雖然錨點的視覺表示沒有變成紅色薛窥，但您可以看到數(shù)值已更改并變?yōu)榧t色，表示您還為錨點設(shè)置了動畫。
使Scene view和Animation view都可見并播放動畫诅迷。 你會看到這樣的事情：
你有沒有注意到錨點上的動畫佩番？ 如果沒有，你肯定注意到惱人的紅色箭頭閃爍罢杉。
無論如何趟畏，你為什么需要重新定位錨？
好吧滩租，當(dāng)你這么想的時候赋秀，很明顯：按鈕的位置是它與錨點的距離。 在btn_start的情況下律想，它是距底邊的距離猎莲。 現(xiàn)在，你只處理垂直運動技即，所以只有底邊很重要著洼。
要確保按鈕“離開”屏幕，請將其向上移動而叼，直到它不再可見身笤。 如果您不知道屏幕的高度，您會怎么做澈歉？ 如何確保按鈕在不再可見后立即停止展鸡？
答案是改變它的錨點。
如果將錨點設(shè)置為屏幕的上邊緣埃难，則只需設(shè)置距屏幕上邊緣的距離。 因此涤久，按鈕將始終位于邊緣上方并且獨立于屏幕的高度涡尘，因為它相對于屏幕的頂部邊緣定位。
3. Animating Button Slide In
干得好响迂！ 你有一個滑出屏幕的按鈕考抄，現(xiàn)在你需要一個反向動畫。 您將在兩種情況下使用它：
- 1） 當(dāng)場景加載時蔗彤，您希望按鈕滑動到位而不是簡單地出現(xiàn)川梅。
- 2） 關(guān)閉設(shè)置對話框時，按鈕應(yīng)返回其初始位置
這很容易做到然遏。 首先贫途，您需要禁用動畫的循環(huán)，因為按鈕應(yīng)向上或向下移動然后停止而不是像乒乓球一樣來回移動待侵。
要禁用循環(huán)丢早，請在“項目”窗口中打開Animations文件夾，然后選擇btn_start_slide_out動畫。 在Inspector中怨酝，取消選中Loop Time傀缩。
然后在Hierarchy中選擇Btn_Start并打開Animator視圖。 右鍵單擊btn_start_slide_out狀態(tài)农猬，然后選擇Copy赡艰。
然后右鍵單擊Animator視圖內(nèi)的空閑空間上的某個位置，然后選擇Paste斤葱。 這復(fù)制了btn_start_slide_out狀態(tài)慷垮。
現(xiàn)在，選擇此重復(fù)狀態(tài)苦掘，可能稱為btn_start_slide_out 0换帜，并在Inspector中將其重命名為btn_start_slide_in。 此外鹤啡，將速度Speed設(shè)置為-1惯驼。
然后，在Animator視圖中递瑰，右鍵單擊btn_start_slide_in并選擇Set As Layer Default State祟牲，因為您希望按鈕通過滑入屏幕而不是反之亦然來開始其生命周期。
接下來抖部，您需要一個參數(shù)來控制按鈕的狀態(tài)说贝。 在Animator窗口的左側(cè)欄中，單擊Parameters選項卡慎颗。 接下來乡恕，單擊+按鈕并添加名為isHidden的新Bool參數(shù)。
最后俯萎，在狀態(tài)之間添加兩個轉(zhuǎn)換傲宜。 要執(zhí)行此操作，請右鍵單擊btn_start_slide_out狀態(tài)夫啊，然后選擇Make Transition函卒。 然后單擊btn_start_slide_in進(jìn)行轉(zhuǎn)換。
之后撇眯，通過右鍵單擊btn_start_slide_in报嵌，選擇Make Transition然后單擊btn_start_slide_out來創(chuàng)建反向轉(zhuǎn)換。 這是你最終應(yīng)該得到的：
您已經(jīng)關(guān)閉熊榛，但仍需要根據(jù)正在進(jìn)行的轉(zhuǎn)換為isHidden分配值锚国。
選擇從btn_start_slide_out到btn_start_slide_in的轉(zhuǎn)換。 在Inspector中来候，單擊Conditions面板中的+跷叉。 設(shè)置isHidden為false。
然后選擇相反方向的轉(zhuǎn)換，從btn_start_slide_in到btn_start_slide_out云挟，并將其Conditions設(shè)置為isHidden等于true梆砸。
選擇File / Save Scenes以保存到目前為止的工作，然后運行場景(run the scene)园欣。 您應(yīng)該看到您的按鈕順利滑入帖世。然后手動更改isHidden以使按鈕向回滑動。
Animating the Settings Button
“設(shè)置”(Settings)按鈕應(yīng)在屏幕上向下滑動沸枯，以在對話框的中心留出一些空間日矫。
你認(rèn)為你可以自己動畫設(shè)置按鈕嗎？ 您需要知道的是：
-
Pos Y應(yīng)為-50 - 您無需更改錨點绑榴，因為該按鈕已相對于屏幕的下邊緣定位哪轿。
試試你自己。 如果您需要提示翔怎，請隨意看下面的信息窃诉。
要創(chuàng)建向下滑動和向上滑動動畫，以及設(shè)置
Animator狀態(tài)赤套，請按照下列步驟操作：
1） 在層次結(jié)構(gòu)中選擇Btn_Settings飘痛。
2） 打開Animation view。
3） 單擊Create按鈕容握。
4） 將動畫命名為btn_settings_slide_out并將其保存在Animations文件夾中宣脉。這也將創(chuàng)建Animation Controller，并將Animator組件添加到btn_settings剔氏。
5） 在Animation view中塑猖，單擊時間軸的1:00標(biāo)記并確保錄制已打開。它應(yīng)該自動打開谈跛，但您可以單擊紅色圓圈開始手動錄制萌庆。
6） 在Inspector中，將btn_settingsPos Y更改為-50币旧。這次你不需要改變錨點。
7） 單擊紅色圓圈按鈕或保存場景停止錄制猿妈。
8） 在“項目”窗口中打開Animations文件夾吹菱。選擇btn_settings_slide_out，然后在檢查器中取消選中Loop Time彭则。
9） 在層次結(jié)構(gòu)中選擇Btn_Settings鳍刷。
10） 現(xiàn)在打開Animator視圖。
11） 復(fù)制并粘貼btn_settings_slide_out狀態(tài)以復(fù)制它俯抖。
12） 選擇重復(fù)狀態(tài)输瓜，該狀態(tài)應(yīng)命名為btn_settings_slide_out 0。在檢查器中，將其名稱更改為btn_settings_slide_in尤揣，并將其速度更改為-1搔啊。
13） 右鍵單擊btn_settings_slide_in狀態(tài)，然后選擇Set As Layer Default State北戏。
14） 創(chuàng)建從btn_settings_slide_in到btn_settings_slide_out的轉(zhuǎn)換负芋，然后創(chuàng)建反向轉(zhuǎn)換。
15） 添加名為isHidden的新Bool參數(shù)嗜愈。
16） 選擇從btn_settings_slide_out到btn_settings_slide_in的轉(zhuǎn)換旧蛾，并在Inspector中，更改包含isHidden的Conditions等于false蠕嫁。
17） 選擇從btn_settings_slide_in到btn_settings_slide_out的轉(zhuǎn)換锨天，并將包含isHidden的Conditions更改為等于true。
18） 選擇File / Save Scenes以保存到目前為止的工作剃毒，然后Run the scene病袄。
這是你最終應(yīng)該得到的：
好吧，很高興看到“設(shè)置”按鈕上下移動迟赃，但兩個按鈕不應(yīng)同時滑出陪拘，就像它們在開始時滑入一樣？
當(dāng)然他們應(yīng)該纤壁，而你接下來會發(fā)生這種情況左刽。
Triggering Buttons Animation from the Script
在MonoDevelop中，打開您在第一部分中創(chuàng)建的UIManagerScript酌媒，并在類定義中添加以下實例變量：
public Animator startButton;
public Animator settingsButton;
之后欠痴，添加以下方法：
public void OpenSettings()
{
startButton.SetBool("isHidden", true);
settingsButton.SetBool("isHidden", true);
}
這就是您需要的所有代碼。 保存腳本并切換回Unity秒咨。
在Unity中利凑，在層次結(jié)構(gòu)中選擇UIManager。 將Btn_Start從“層次結(jié)構(gòu)”拖動到“檢查器”中的Start Button字段掂器，然后將Btn_Settings拖到 Settings Button字段中捌显。
然后在Hierarchy中選擇Btn_Settings并單擊On Click（）列表中的+。 將UIManager從層次結(jié)構(gòu)拖到列表中的新項目陡厘。 之后抽米，打開功能選擇菜單并選擇UIManagerScript \ OpenSettings（）。
選擇File / Save Scenes以保存到目前為止的工作糙置，然后運行場景云茸。 等待按鈕停止移動，然后單擊Settings按鈕谤饭。 您應(yīng)該看到兩個按鈕同時向相反方向移出屏幕标捺。
Adding the Settings Dialog
看看你創(chuàng)造的所有華麗的自由空間懊纳！ 這似乎是對話框在那里滑動并填充空白區(qū)域的理想場所。
1. Creating the Panel
通常亡容，對話框包含一些應(yīng)該出現(xiàn)的其他控件嗤疯，并隨對話框一起移動。 因此萍倡，將對話框創(chuàng)建為面板并將其他UI元素設(shè)置為子對象是有效的身弊。
要創(chuàng)建面板，請在菜單中選擇GameObject \ UI \ Panel列敲。 這將創(chuàng)建一個全屏面板阱佛，使用白色，半透明圖像作為背景戴而。 所以凑术，你應(yīng)該看到某種全屏面紗。
但是所意，此對話框不會全屏淮逊；事實上，它會相對較小扶踊。 請按照以下步驟設(shè)置對話框的大小和位置：
- 1） 在層次結(jié)構(gòu)中選擇
Panel泄鹏，并將其重命名為Dlg_Settings。 - 2） 將其
anchors設(shè)置為middle-right秧耗，因為您將對話框定位在右邊緣之外且離開屏幕备籽，因此在運行場景時它不可見。 - 3） 將
Width設(shè)置為400分井，將Height設(shè)置為150车猬。 - 4） 將
Pos X設(shè)置為220，將Pos Y設(shè)置為0尺锚。
您應(yīng)該在畫布矩形的右側(cè)看到一個半透明的矩形珠闰。 此矩形外的所有UI元素在屏幕上都不可見。 這正是你想要的對話瘫辩！
2. Setting the Dialog’s Background Image
您將使用9-slice image作為對話框的背景伏嗜，因此您需要先在Import Settings中設(shè)置邊框。
在“項目”窗口中打開Menu文件夾伐厌，然后選擇settings_panel_bg_9slice阅仔。 在“檢查器”中，單擊Sprite Editor以打開Sprite Editor view弧械。
將所有Border值設(shè)置為20，然后單擊頂部的Apply空民。
現(xiàn)在您可以將此圖像用作對話框背景刃唐。
在Hierarchy中選擇Dlg_Settings羞迷，然后將settings_panel_bg_9slice拖動到Inspector中的Source Image字段。 雙擊Source Image字段旁邊的Color画饥，然后將“A”設(shè)置為255以刪除透明度衔瓮。
這是設(shè)置背景圖像后對話框的樣子：
3. Adding the Label
在目前的狀態(tài)下，很難說這個不起眼的綠色矩形實際上是一個設(shè)置對話框抖甘，但有一種簡單的方法可以解決這個問題 - 你需要做的只是在其上寫Settings热鞍。
選擇GameObject \ UI \ Text以創(chuàng)建新的Text UI元素。 在層次結(jié)構(gòu)中選擇Text并將其重命名為Lbl_Settings衔彻。 然后將Lbl_Settings拖到Dlg_Settings上薇宠，將其添加為子對象。
之后艰额，在層次結(jié)構(gòu)中選擇Lbl_Settings并進(jìn)行以下更改：
- 1） 將錨點設(shè)置為
top-center澄港。 - 2） 將
Pos X設(shè)置為0，將Pos Y設(shè)置為-40柄沮。 - 3） 將
Text更改為Settings回梧。 - 4） 在“項目”窗口中打開
Fonts文件夾，然后將DCC - Dreamer字體拖到Inspector中的Font字段中祖搓。 - 5） 將
Font Size設(shè)置為30狱意。 - 6） 將
Alignment設(shè)置為Center Align。 - 7） 將顏色設(shè)置為白色拯欧，使用
A（Alpha）255刪除透明度详囤。
4. Animating the Settings Dialog
現(xiàn)在您已經(jīng)擁有了一個合法的Settings對話框，下一步是在用戶單擊Settings按鈕時顯示該對話框哈扮。
您將使用幾乎完全相同的技術(shù)使按鈕滑入和滑出纬纪，唯一的區(qū)別是在場景開始后對話框不會自動滑入。
在層次結(jié)構(gòu)中選擇Dlg_Settings并打開Animation view滑肉。 然后單擊Animator中的Create按鈕創(chuàng)建一個新動畫包各。
將動畫命名為dlg_settings_slide_in并將其保存在Animations文件夾中。
然后單擊時間線中的1:00標(biāo)記并確保開始錄制靶庙，或通過單擊錄制按鈕手動啟動錄制问畅。
在Inspector中，將錨點設(shè)置為middle-center六荒，將Pos X設(shè)置為0护姆。
停止錄制動畫，在“項目”窗口中打開Animations文件夾掏击，然后選擇dlg_settings_slide_in卵皂。 在Inspector中。 最后砚亭，取消選中Loop Time灯变。
在層次結(jié)構(gòu)中選擇Dlg_Settings并打開Animator視圖殴玛。 復(fù)制并粘貼dlg_settings_slide_in狀態(tài)以復(fù)制它。 將副本重命名為dlg_settings_slide_out添祸，并將其Speed設(shè)置為-1滚粟。
注意：此時，請勿更改默認(rèn)狀態(tài)刃泌！ 對話框的默認(rèn)狀態(tài)應(yīng)保持為
dlg_settings_slide_in凡壤。
單擊+按鈕并添加名為isHidden的新Bool參數(shù)。
在狀態(tài)之間創(chuàng)建兩個轉(zhuǎn)換耙替，就像您對按鈕所做的那樣亚侠。 然后添加Bool類型的isHidden參數(shù)。
將dlg_settings_slide_out => dlg_settings_slide_in轉(zhuǎn)換的條件更改為isHidden等于false林艘。 對于dlg_settings_slide_in => dlg_settings_slide_out轉(zhuǎn)換盖奈，將condition更改為isHidden等于true。
接下來狐援，右鍵單擊Animator并選擇Create State钢坦，然后選擇Empty。
在Inspector中啥酱，將狀態(tài)命名為idle爹凹。 接下來，右鍵單擊狀態(tài)镶殷，然后選擇Set as Layer Default State禾酱。 最后，在idle到dlg_settings_slide_in之間創(chuàng)建一個轉(zhuǎn)換绘趋。 將Condition設(shè)置為isHidden等于false颤陶。
它應(yīng)該如下所示：
選擇File / Save Scenes以保存到目前為止的工作，然后Run the scene陷遮，您將看到對話框在開始時滑動滓走，然后重疊按鈕。
這就是所做的工作帽馋，但仍然不是你想要的搅方。 您需要禁用Animator組件，以便它不會在開始時播放動畫绽族。 您希望按需顯示對話框姨涡，下面你就將做這些。
后記
本篇主要講述了Unity UI簡介吧慢，感興趣的給個贊或者關(guān)注~~~
