版本記錄

前言

Unity是由Unity Technologies開(kāi)發(fā)的一個(gè)讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化、實(shí)時(shí)三維動(dòng)畫(huà)等類(lèi)型互動(dòng)內(nèi)容的多平臺(tái)的綜合型游戲開(kāi)發(fā)工具胶果，是一個(gè)全面整合的專(zhuān)業(yè)游戲引擎蒲稳。Unity類(lèi)似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的圖型化開(kāi)發(fā)環(huán)境為首要方式的軟件胖翰。其編輯器運(yùn)行在Windows 和Mac OS X下荧缘，可發(fā)布游戲至Windows、Mac枣氧、Wii溢十、iPhone、WebGL（需要HTML5）达吞、Windows phone 8和Android平臺(tái)茶宵。也可以利用Unity web player插件發(fā)布網(wǎng)頁(yè)游戲，支持Mac和Windows的網(wǎng)頁(yè)瀏覽。它的網(wǎng)頁(yè)播放器也被Mac 所支持乌庶。網(wǎng)頁(yè)游戲 坦克英雄和手機(jī)游戲王者榮耀都是基于它的開(kāi)發(fā)。
下面我們就一起開(kāi)啟Unity之旅契耿。感興趣的看下面幾篇文章瞒大。
1. Unity開(kāi)啟篇（一） —— Unity界面及創(chuàng)建第一個(gè)簡(jiǎn)單的游戲 （一）
2. Unity開(kāi)啟篇（二） —— Unity界面及創(chuàng)建第一個(gè)簡(jiǎn)單的游戲 （二）
3. Unity開(kāi)啟篇（三） —— 一款簡(jiǎn)單射擊游戲示例 （一）
4. Unity開(kāi)啟篇（四） —— 一款簡(jiǎn)單射擊游戲示例 （二）
5. Unity開(kāi)啟篇（五） —— 一款簡(jiǎn)單射擊游戲示例 （三）
6. Unity開(kāi)啟篇（六） —— Unity動(dòng)畫(huà)簡(jiǎn)介 （一）
7. Unity開(kāi)啟篇（七） —— Unity動(dòng)畫(huà)簡(jiǎn)介 （二）
8. Unity開(kāi)啟篇（八） —— Unity聲音簡(jiǎn)介（一）
9. Unity開(kāi)啟篇（九） —— Unity聲音簡(jiǎn)介（二）
10. Unity開(kāi)啟篇（十） —— Unity粒子系統(tǒng)簡(jiǎn)介（一）
11. Unity開(kāi)啟篇（十一） —— Unity粒子系統(tǒng)簡(jiǎn)介（二）
12. Unity開(kāi)啟篇（十二） —— Unity腳本簡(jiǎn)介（一）
13. Unity開(kāi)啟篇（十三） —— Unity腳本簡(jiǎn)介（二）
14. Unity開(kāi)啟篇（十四） —— Unity UI簡(jiǎn)介（一）
15. Unity開(kāi)啟篇（十五） —— Unity UI簡(jiǎn)介（二）
16. Unity開(kāi)啟篇（十六） —— Unity UI簡(jiǎn)介（三）
17. Unity開(kāi)啟篇（十七） —— Unity UI簡(jiǎn)介（四）
18. Unity開(kāi)啟篇（十八） —— Unity UI簡(jiǎn)介（五）

Adding a Rotating Gear Icon

有什么沒(méi)做的，你不覺(jué)得嗎搪桂？ 哦透敌，當(dāng)然！ 打開(kāi)按鈕本身上的旋轉(zhuǎn)齒輪圖標(biāo) - 在此部分開(kāi)頭的動(dòng)畫(huà)GIF圖像中顯示的圖標(biāo)踢械。

1. Adding the Gear Image

您的第一步是將圖像添加為btn_slide的子對(duì)象酗电，并在菜單打開(kāi)和關(guān)閉動(dòng)畫(huà)期間為其設(shè)置動(dòng)畫(huà)。

選擇GameObject \ UI \ Image以創(chuàng)建新圖像内列。 將其拖動(dòng)到層次結(jié)構(gòu)中的Btn_Slide上撵术，將其添加為子對(duì)象。

之后话瞧，請(qǐng)按照下列步驟操作：

• 1） 將圖像重命名為Img_Gear
• 2） 將Anchors設(shè)置為middle-center
• 3） 將Pos X和Pos Y都設(shè)置為0嫩与。
• 4） 在“項(xiàng)目”窗口中打開(kāi)Menu文件夾，然后將slide_menu_gear圖像拖到Inspector中的Source Image`交排。
• 5） 單擊Set Native Size划滋。

2. Animating the Gear Image

到目前為止，創(chuàng)建兩個(gè)動(dòng)畫(huà)狀態(tài)和在它們之間切換的參數(shù)的技術(shù)應(yīng)該是第二天性埃篓。 因此处坪，您應(yīng)該能夠創(chuàng)建左旋轉(zhuǎn)齒輪并反轉(zhuǎn)動(dòng)畫(huà)以自行制作右旋轉(zhuǎn)齒輪。

以下是需要了解的詳細(xì)信息：

• 1） Animation duration應(yīng)該與滑動(dòng)面板動(dòng)畫(huà)相同架专，這很容易同窘，因?yàn)楸窘坛讨械乃袆?dòng)畫(huà)都只有1秒長(zhǎng)。
• 2） 齒輪應(yīng)繞Z軸旋轉(zhuǎn)360度（旋轉(zhuǎn)Z）胶征。
• 3） 對(duì)參數(shù)名稱(chēng)使用相同名稱(chēng)isHidden塞椎，并將其默認(rèn)值設(shè)置為true。
• 4） 請(qǐng)記住禁用循環(huán)和Animator組件睛低。

如果您需要幫助案狠，請(qǐng)參考下面：

在Hierarchy中選擇Img_Gear并打開(kāi)Animation視圖。 單擊Create按鈕創(chuàng)建一個(gè)新剪輯钱雷，并將其命名為gear_rotate_up骂铁。 將其保存在Animations文件夾中。

然后單擊時(shí)間軸中的1:00標(biāo)記罩抗。 之后拉庵，在Inspector中，將Rotation Z更改為360套蒂。

單擊帶有紅色圓圈的按鈕停止錄制钞支。

現(xiàn)在打開(kāi)Project窗口中的Animations文件夾茫蛹，然后選擇gear_rotate_up。 在Inspector中烁挟，取消選中Loop Time婴洼。

現(xiàn)在，是時(shí)候建立狀態(tài)了撼嗓。 在層次結(jié)構(gòu)中選擇Img_Gear柬采，打開(kāi)Animator視圖，然后按照下列步驟操作：

1） 右鍵單擊Animator且警，選擇Create State粉捻，然后選擇Empty。
2） 在Inspector中斑芜，將狀態(tài)命名為gear_idle
3） 右鍵單擊gear_idle并選擇Set as Layer Default State肩刃。
4） 通過(guò)復(fù)制和粘貼來(lái)復(fù)制gear_rotate_up狀態(tài)。
5） 將副本重命名為gear_rotate_down押搪，并在檢查器中將其Speed更改為-1树酪。
6） 添加名為isHidden的新Bool參數(shù)，并將其默認(rèn)值設(shè)置為true大州。
7） 在狀態(tài)之間創(chuàng)建兩個(gè)轉(zhuǎn)換续语。 在條件下，對(duì)于從gear_rotate_up到gear_rotate_down的轉(zhuǎn)換厦画，將isHidden設(shè)置為true疮茄，對(duì)于反向轉(zhuǎn)換，將isHidden設(shè)置為false根暑。
8） 創(chuàng)建從gear_idle到gear_rotate_up的轉(zhuǎn)換力试。 將isHidden條件設(shè)置為false

3. Triggering the Gear Animation from Code

要完成滑動(dòng)菜單控制，您需要從代碼中觸發(fā)齒輪動(dòng)畫(huà)排嫌，但您只需要寫(xiě)幾行畸裳。

在代碼編輯器中打開(kāi)UIManagerScript并添加以下實(shí)例變量：

public Animator gearImage;

然后向下滾動(dòng)并找到ToggleMenu方法。 將以下內(nèi)容添加到方法主體的底部：

public void ToggleMenu() 
{
    //..skipped..

    gearImage.SetBool("isHidden", !isHidden);
}

這將啟用Animator組件并將其isHidden參數(shù)設(shè)置為與內(nèi)容面板的Animator isHidden參數(shù)相同的值淳地。

保存腳本文件并切換回Unity怖糊。

在Unity中，在層次結(jié)構(gòu)中選擇UIManager颇象。 將Img_Gear拖動(dòng)到檢查器中的Gear Image字段伍伤。

保存場(chǎng)景您的工作并運(yùn)行場(chǎng)景，享受您喜歡的旋轉(zhuǎn)齒輪圖標(biāo)遣钳。

做得好扰魂！ 滑動(dòng)菜單已完成，您的場(chǎng)景即將到來(lái)。

你不打算處理菜單中按鈕的點(diǎn)擊劝评，因?yàn)槟銘?yīng)該已經(jīng)熟悉處理UI事件姐直。 相反，您將更新舊的基于GUI的RocketMouse場(chǎng)景蒋畜，以便它使用新的GUI系統(tǒng)简肴。

Updating the RocketMouse Scene to use Unity’s UI

在RocketMouse游戲中，一些UI元素使用舊的GUI方法來(lái)顯示：得分和重啟游戲的按鈕百侧。 您將使用新的文本和圖像UI元素替換它們，以及允許您重新啟動(dòng)游戲或退出主菜單的對(duì)話框能扒。

1. Adding the Points Label

切換到RocketMouse場(chǎng)景并在“項(xiàng)目”窗口中打開(kāi)Scenes文件夾佣渴。 雙擊RocketMouse場(chǎng)景將其打開(kāi)。

選擇GameObject \ UI \ Text以創(chuàng)建新的Text UI元素初斑。 當(dāng)你在這里時(shí)辛润，你也將使用Canvas和EventSystem。

在“層次結(jié)構(gòu)”中選擇Text见秤，然后在Inspector中進(jìn)行以下更改：

• 1） 將其重命名為Txt_Points砂竖。
• 2） 將Anchors設(shè)置為左上角。
• 3） 將Pivot設(shè)置為（0,0.5）鹃答。
• 4） 將Pos X設(shè)置為50乎澄，將Pos Y設(shè)置為-30。
• 5） 將Text更改為0测摔，因?yàn)椴シ牌饕粤泓c(diǎn)開(kāi)始置济。
• 6） 在“項(xiàng)目”窗口中打開(kāi)Fonts文件夾，然后將TitanOne-Regular拖動(dòng)到Inspector中的Fonts字段锋八。
• 7） 將字體大小設(shè)置為24浙于。
• 8） 將Horizontal Overflow設(shè)置為Overflow以確保標(biāo)簽甚至可以顯示最令人發(fā)指的分?jǐn)?shù)。

另外挟纱，不要忘記將文本的顏色更改為白色羞酗。

2. Adding a Points Icon

如今，僅僅顯示文字來(lái)顯示這些點(diǎn)是不夠的紊服。你需要確保從玩家的眼睛看到它的那一刻起檀轨，這個(gè)文本的含義是非常清楚的。

是的围苫，即使是最簡(jiǎn)單的應(yīng)用程序裤园，玩家現(xiàn)在也被令人印象深刻的UI所破壞，因此您需要添加一個(gè)圖標(biāo)剂府，以使得分非常清晰拧揽，清晰且定義明確。

選擇GameObject \ UI \ Image以創(chuàng)建新圖像。在層次結(jié)構(gòu)中選擇它淤袜，然后按照下列步驟操作：

• 1） 將其重命名為Img_Points
• 2） 將其拖到Txt_Points上以將其添加為子項(xiàng)痒谴，這樣當(dāng)您移動(dòng)標(biāo)簽時(shí)圖標(biāo)也會(huì)移動(dòng)。
• 3） 將Anchors設(shè)置為middle-left铡羡。
• 4） 將Pivot設(shè)置為（1,0.5）积蔚。
• 5） 將Width和Height都設(shè)置為32。
• 6） 將Pos X設(shè)置為-5烦周，將Pos Y設(shè)置為0尽爆。
• 7） 在“項(xiàng)目”窗口中打開(kāi)Sprites文件夾，然后將coin圖像拖到Inspector中的Source Image字段中读慎。

注意：這次你沒(méi)有點(diǎn)擊Set Native Size漱贱，因?yàn)槟銓⒅貜?fù)使用圖像作為游戲中的coins，這將比圖標(biāo)大一點(diǎn)夭委。

3. Updating the Points Label

游戲的大多數(shù)代碼都存在于MouseController.cs腳本中幅狮，因此您將編輯此腳本以更新點(diǎn)標(biāo)簽(points label)。 實(shí)際上株灸，在本教程結(jié)束之前崇摄，您只能使用此腳本。

注意：通常情況下慌烧，我會(huì)將這個(gè)巨大的腳本分成幾個(gè)較小的塊逐抑，但我不希望你把時(shí)間浪費(fèi)在內(nèi)務(wù)處理上，特別是因?yàn)橹貥?gòu)需要花費(fèi)更多時(shí)間杏死，并且需要對(duì)現(xiàn)有代碼有深刻的理解泵肄。

最好在一個(gè)大塊中使用它，這樣你就可以進(jìn)行必要的小改動(dòng)淑翼，繼續(xù)你的生活腐巢。

在Project窗口中打開(kāi)Scripts文件夾，然后雙擊MouseController腳本以在代碼編輯器中打開(kāi)它玄括。

加載腳本時(shí)冯丙，查找并刪除使用舊GUI系統(tǒng)的以下方法：

• onGUI
• DisplayCoinsCount
• DisplayRestartButton

添加以下using指令：

using UnityEngine.UI;

之后，添加以下實(shí)例變量以包含對(duì)標(biāo)簽的引用：

public Text coinsLabel;

最后遭京，在CollectCoin（）的末尾添加以下行胃惜，每次鼠標(biāo)收集硬幣時(shí)都會(huì)調(diào)用它。

coinsLabel.text = coins.ToString();

保存腳本文件并切換回Unity哪雕。

在Unity中船殉，在“層次結(jié)構(gòu)”中選擇mouse，然后將Txt_Points拖動(dòng)到“檢查器”中的Coins Label字段斯嚎。

Run the scene并將鼠標(biāo)移出以收集幾個(gè)硬幣利虫。 收集硬幣時(shí)挨厚，您應(yīng)該看到標(biāo)簽更新。

一切都很好看糠惫，但你可能已經(jīng)注意到一個(gè)相當(dāng)尷尬的問(wèn)題疫剃。 當(dāng)您刪除舊的onGUI方法時(shí)，您還刪除了鼠標(biāo)死亡時(shí)顯示的按鈕硼讽，讓玩家無(wú)法重新啟動(dòng)游戲巢价。

Adding a Restart Dialog

我認(rèn)為你已經(jīng)很好地處理了新的GUI系統(tǒng)，并且可以創(chuàng)建這個(gè)對(duì)話框而不需要我的一些刺激固阁。 因此壤躲，創(chuàng)建一個(gè)帶有標(biāo)簽和兩個(gè)按鈕的面板，如下所示：

將它放在畫(huà)布的中心备燃。

當(dāng)你完成后回來(lái) - 你自己可以完成柒爵！

如果您想要幫助，只需參考下面：

1） 使用GameObject \ UI \ Panel創(chuàng)建一個(gè)Panel赚爵，并將其重命名為Dlg_Restart。
2） 將錨點(diǎn)設(shè)置為middle-center法瑟。
3） 將Width和Height均設(shè)置為200冀膝，將Pos X和Pos Y都設(shè)置為0。
4） 使用Menu文件夾中的settings_panel_bg_9slice圖像作為面板的Source Image霎挟。
5） 雙擊檢查器中的Color字段窝剖，并將A設(shè)置為255以刪除透明度。

6） 通過(guò)選擇GameObject \ UI \ Text創(chuàng)建一個(gè)Text元素酥夭，并將其重命名為Lbl_YouLose赐纱。
7） 將Lbl_YouLose拖到Dlg_Restart上以將其添加為子元素。
8） 將其錨點(diǎn)設(shè)置為top-center熬北，將Pos X設(shè)置為0疙描，將Pos Y設(shè)置為-40。
9） 使用Fonts文件夾中的DCC-Dreamer字體讶隐。 將Font Size設(shè)置為30起胰。
10） 將Alignment設(shè)置為Center Align，將Horizontal Overflow設(shè)置為Overflow巫延。
11） 更改Text為You Lose效五。
12） 將文本顏色設(shè)置為完全白色（無(wú)透明度）。

13） 使用GameObject \ UI \ Button創(chuàng)建一個(gè)新Button炉峰，并將其重命名為Btn_Restart畏妖。
14） 將其拖到Dlg_Restart上以將其添加為子項(xiàng)。
15） 將其錨點(diǎn)設(shè)置為top-center疼阔，將Pos X設(shè)置為0戒劫，將Pos Y設(shè)置為-100半夷。
16） 將其Width設(shè)置為135，將Height設(shè)置為45谱仪。
17） 使用btn_9slice_normal作為Source Image玻熙。

18） 選擇嵌套的Text元素并將其Font設(shè)置為TitanOne-Regular，將Font Size設(shè)置為18疯攒，將Color設(shè)置為完全白色（無(wú)透明度）嗦随。 將Inspector中的Text字段的值設(shè)置為Restart。

19） 要?jiǎng)?chuàng)建第二個(gè)按鈕敬尺，只需右鍵單擊Btn_Restart并選擇Duplicate枚尼。 將其命名為Btn_Exit。 將其Pos Y設(shè)置為-160砂吞。 然后選擇嵌套的文本元素并將其Text更改為Exit署恍。

1. Displaying the Restart Dialog

您不會(huì)為對(duì)話框的外觀設(shè)置動(dòng)畫(huà)。 相反蜻直，你只需在開(kāi)始時(shí)隱藏對(duì)話框并在玩家輸?shù)粲螒驎r(shí)顯示它盯质。

在代碼編輯器中打開(kāi)MouseController腳本并添加以下實(shí)例變量：

public GameObject restartDialog; 

然后將以下代碼行添加到Start（）以在開(kāi)頭隱藏對(duì)話框：

restartDialog.SetActive(false);

向下滾動(dòng)并將以下行添加到HitByLaser（）的末尾：

restartDialog.SetActive(true);

正如您可能猜到的，當(dāng)鼠標(biāo)死亡時(shí)會(huì)調(diào)用HitByLaser（）概而。 因此呼巷，它是顯示重啟對(duì)話框的理想場(chǎng)所。

添加以下兩種方法來(lái)重新啟動(dòng)并退出游戲：

public void RestartGame() 
{
    Application.LoadLevel (Application.loadedLevelName);
}
    
public void ExitToMenu() 
{
    Application.LoadLevel ("MenuScene");
}

您馬上將它們鏈接到相應(yīng)的按鈕赎瑰。

保存腳本文件并切換回Unity王悍。

在Unity中，在層次結(jié)構(gòu)中選擇Mouse餐曼，然后將Dlg_Restart拖到檢查器中的Restart Dialog字段中压储。

然后在層次結(jié)構(gòu)中選擇Btn_Restart并向下滾動(dòng)到On Click (Button)列表。

單擊+以添加新項(xiàng)目源譬。 之后集惋，將Mouse從層次結(jié)構(gòu)拖動(dòng)到新項(xiàng)目。 在函數(shù)選擇下拉列表中踩娘，選擇MouseController \ RestartGame（）芋膘。

現(xiàn)在，選擇Btn_Exit霸饲，并重復(fù)該過(guò)程为朋，但這次選擇MouseController \ ExitToMenu（）函數(shù)。

Save the scene以保存您的工作然后run the scene并將鼠標(biāo)發(fā)送到激光的火線厚脉。 你應(yīng)該看到他死后立即出現(xiàn)一個(gè)對(duì)話框习寸。 如果按Restart，則會(huì)重新啟動(dòng)游戲傻工。 如果按Exit霞溪，您將返回主菜單孵滞。

后記

本篇主要講述了Unity UI簡(jiǎn)介，感興趣的給個(gè)贊或者關(guān)注~~~