版本記錄

前言

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

你將通過添加一些很酷的動畫來直接進入練習(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標記，確保動畫錄制開啟。 它應(yīng)該自動執(zhí)行此操作。

注意：確保錄制的最簡單方法是查看播放控件并觀察它們是否變?yōu)榧t色。

• 4） 將anchors更換為top-stretch。
• 5） 在檢查器(Inspector)中將Pos Y更改為60。
• 6） 單擊紅色圓圈按鈕(red circle button)停止錄制。

A：在0:00標記處自動插入了一個關(guān)鍵幀。 此時，按鈕位于其起始位置，正是您在上一個教程中定位的位置。

B：雖然錨點的視覺表示沒有變成紅色，但您可以看到數(shù)值已更改并變?yōu)榧t色，表示您還為錨點設(shè)置了動畫。

使Scene view和Animation view都可見并播放動畫。 你會看到這樣的事情：

你有沒有注意到錨點上的動畫？ 如果沒有，你肯定注意到惱人的紅色箭頭閃爍。

無論如何，你為什么需要重新定位錨？

好吧，當你這么想的時候，很明顯：按鈕的位置是它與錨點的距離。 在btn_start的情況下，它是距底邊的距離。 現(xiàn)在，你只處理垂直運動，所以只有底邊很重要。

要確保按鈕“離開”屏幕，請將其向上移動，直到它不再可見。 如果您不知道屏幕的高度，您會怎么做？ 如何確保按鈕在不再可見后立即停止？

答案是改變它的錨點。

如果將錨點設(shè)置為屏幕的上邊緣，則只需設(shè)置距屏幕上邊緣的距離。 因此，按鈕將始終位于邊緣上方并且獨立于屏幕的高度，因為它相對于屏幕的頂部邊緣定位。

3. Animating Button Slide In

干得好！ 你有一個滑出屏幕的按鈕，現(xiàn)在你需要一個反向動畫。 您將在兩種情況下使用它：

• 1） 當場景加載時，您希望按鈕滑動到位而不是簡單地出現(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進行轉(zhuǎn)換。

之后，通過右鍵單擊btn_start_slide_in，選擇Make Transition然后單擊btn_start_slide_out來創(chuàng)建反向轉(zhuǎn)換。 這是你最終應(yīng)該得到的：

您已經(jīng)關(guān)閉，但仍需要根據(jù)正在進行的轉(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)在屏幕上向下滑動，以在對話框的中心留出一些空間。

你認為你可以自己動畫設(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標記并確保錄制已打開。它應(yīng)該自動打開，但您可以單擊紅色圓圈開始手動錄制。
6） 在Inspector中，將btn_settings Pos 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)同時滑出，就像它們在開始時滑入一樣？

當然他們應(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并進行以下更改：

• 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標記并確保開始錄制，或通過單擊錄制按鈕手動啟動錄制。

在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。

注意：此時，請勿更改默認狀態(tài)！ 對話框的默認狀態(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)注~~~