版本記錄

前言

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)頁游戲 坦克英雄和手機(jī)游戲王者榮耀都是基于它的開發(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簡介（一）

Rect Transform, Anchors, Pivot and You

如果您之前使用過Unity贫堰，那么您可能已經(jīng)接觸過Transform組件。

如果沒有馅精，那也沒關(guān)系严嗜。 它只是一個可以定位，旋轉(zhuǎn)和縮放場景中對象的工具洲敢。 這是它的樣子：

在層次結(jié)構(gòu)視圖中選擇任何類型的非UI GameObject時漫玄，您將看到Transform組件。 但是压彭，如果選擇任何UI元素睦优，例如Img_Header，您將看到另一個名為Rect Transform的組件壮不。

如您所見汗盘，Transform和Rect Transform看起來有點不同。 此外询一，Rect Transform可以根據(jù)其Anchor設(shè)置更改其外觀隐孽。 例如癌椿，它看起來像這樣：

這里，你有Left, Top, Right and Bottom菱阵，而不是Pos X踢俄，Pos Y，Width和Height晴及。

您是否想知道如何顯著改變Rect Transform外觀的Anchors設(shè)置都办？ 您將在下一部分找到您要尋找的答案。

1. Anchors

設(shè)置錨點是一種簡單虑稼，優(yōu)雅且功能強(qiáng)大的方法琳钉，可以控制UI元素相對于父元素的位置和大小。 當(dāng)你必須調(diào)整父元素的大小時蛛倦，它會特別方便歌懒。

設(shè)置錨點時，可以在父級中指定多個位置胰蝠，通常在父級UI元素Rect的每個角上指定一個位置歼培。 調(diào)整父級的大小時震蒋，UI元素將嘗試與錨點保持一致的距離茸塞，從而強(qiáng)制它與其父級一起移動或調(diào)整大小。

要查看不同的Anchor Presets查剖，只需在層次結(jié)構(gòu)中選擇Img_Header钾虐，然后單擊Rect Transform組件中Anchors字段正上方的矩形。

單擊后笋庄，您將看到各種錨點預(yù)設(shè)：這些是錨點的最常見設(shè)置效扫。 但是，您不限于此直砂，您可以自定義其中任何一個菌仁。 您還可以為UI元素選擇不同的水平和垂直行為。

一旦你使用它静暂，這一切都會更有意義济丘。 如果您查看下一個禁用了背景圖像的圖像，您將能夠更好地看到畫布大小的變化洽蛀。

如您所見摹迷，錨點設(shè)置控制UI元素如何適應(yīng)屏幕大小的變化。

錨由4個三角形手柄代表郊供，看起來像一朵花峡碉。 以下是將錨點設(shè)置為top-center預(yù)設(shè)的樣子：

我確定你想嘗試一些不同的設(shè)置來了解它們是如何工作的，但在你確定至少要閱讀下一節(jié)之前驮审。 它會幫助您更好地理解錨點鲫寄，以便您可以從實驗中獲得更多吉执。

2. Custom Anchors

您可以手動將錨點移動到自定義位置，因為預(yù)設(shè)完全是可選的 - 它們只是為了您的方便地来。

注意：您可能會發(fā)現(xiàn)自己處于轉(zhuǎn)換Gizmo覆蓋錨圖標(biāo)的情況鼠证，因此無法選擇錨點。

在這種情況下靠抑，只需通過選擇錨點預(yù)設(shè)（例如量九，屏幕的左側(cè)）來選擇錨點圖標(biāo)。 錨圖標(biāo)將移至屏幕的該部分颂碧，允許您隨意選擇和移動它荠列。

在調(diào)整畫布大小時，查看圖像如何向右移動载城？ 它相對于Canvas的右邊緣僅移動一點肌似，這是因為這些錨點被設(shè)置為Canvas的25％寬度。

3. Splitting Anchors

您可以拆分錨點以使它們水平诉瓦，垂直或兩者都拉伸UI元素川队。

注意：在拖動Canvas邊緣時，實際上并沒有調(diào)整Canvas的大小睬澡。 實際上固额，您不能以這種方式調(diào)整Canvas的大小。
當(dāng)您嘗試調(diào)整光標(biāo)大小時煞聪，請在光標(biāo)旁邊查找“預(yù)覽”一詞斗躏。 使用此技術(shù)進(jìn)行實驗，了解UI元素如何適應(yīng)不同的屏幕尺寸昔脯。

Rect Transform Depends on the Current Anchors Setting

根據(jù)錨點設(shè)置啄糙，Rect Transform提供了控制UI元素大小和位置的不同方法。

如果您將錨點設(shè)置為單個點而不拉伸云稚，您將看到Pos X隧饼，Pos Y，Width和Height屬性静陈。

但是燕雁，如果您以伸展UI元素的方式設(shè)置錨點，您將獲得Left和Right而不是Pos X和Width（如果您將其設(shè)置為水平拉伸）和Top和Bottom而不是Pos Y和Height（如果您 將其設(shè)置為垂直拉伸）窿给。

在此屏幕截圖中贵白，Img_Header的Anchors設(shè)置為中間拉伸(middle-stretch)。 這意味著圖像垂直位于畫布的中間并水平拉伸崩泡。

1. Pivot

在Rect Transform組件中有一個要討論的最終屬性禁荒，這是Pivot。

樞軸(pivot)是圍繞其進(jìn)行所有變換的點角撞。 換句話說呛伴，如果更改UI元素位置勃痴，還可以更改軸心點位置。 如果您旋轉(zhuǎn)UI元素热康，它將圍繞該點旋轉(zhuǎn)沛申。

樞軸設(shè)置在標(biāo)準(zhǔn)化坐標(biāo)中。 這意味著它的高度和寬度從0變?yōu)?姐军，其中（0,0）是左下角铁材，（1,1）是右上角。

注意：您還可以在UI元素邊界外設(shè)置Pivot奕锌。 在這種情況下著觉，Pivot將在（0,0） - （1,1）范圍之外。 這可能很有用惊暴。 例如饼丘，您可能希望圍繞場景中的某個點旋轉(zhuǎn)對象。 要更改pivot辽话，您必須確保將數(shù)據(jù)Pivot/Center按鈕切換為Pivot肄鸽，如下所示：

您可以在Inspector中的Rect Transform組件中更改pivot，也可以使用Rect Tool油啤。

看一下以下兩個圖像典徘，它們演示了具有相同Pos X和Pos Y值的UI元素，但每個圖像都顯示了場景中的不同位置村砂。

第一個圖像顯示樞軸的默認(rèn)值（0.5,0.5）烂斋，它是UI元素的中心。 Position設(shè)置為（0,0）础废，錨點設(shè)置為top-left。

注意：了解UI元素的位置是相對于錨點設(shè)置的罕模，這一點很重要评腺。 這就是為什么（0,0）位置意味著與錨點的距離，錨點設(shè)置在畫布的左上角淑掌。

現(xiàn)在看一下第二張圖片蒿讥。 如您所見，位置在（0,0）處保持不變抛腕，但由于Pivot設(shè)置為左下角（0,0）芋绸，您可以看到圖像的底角而不是中心現(xiàn)在位于畫布的左上角。

使用靜止圖像顯示樞軸如何影響旋轉(zhuǎn)和大小更難担敌，所以這里有幾個動畫：

觀察圖像如何圍繞由藍(lán)色圓圈指示的樞軸點旋轉(zhuǎn)摔敛，這是一個可以自由移動的元素。

注意：按住Option / ALT鍵的同時縮放以圍繞軸心點縮放全封。

如您所見，pivot也會影響UI元素的大小調(diào)整方式础浮。

注意：要理解的另一個重要事項是隧土，當(dāng)您更改UI元素的大小時，不會更改其scale攒暇。相反，您可以使用“寬度”和“高度”或“上”子房，“右”形用，“左”和“下”填充來更改其大小。

請注意证杭，尺寸和比例(size and scale)之間存在一些差異尾序。例如，size不能是負(fù)數(shù)躯砰，但scale可以是每币。此外，使用負(fù)scale值將翻轉(zhuǎn)UI元素琢歇。在大多數(shù)情況下兰怠，您只應(yīng)更改UI元素的size。

Placing a Header Image

嗬蠲！揭保！這是專門用于Rect Transform，Anchors和Pivot的幾個詞魄宏。相信我秸侣，你會感激你花時間完成練習(xí)，因為理解它們對你游戲中令人敬畏的用戶界面至關(guān)重要宠互。

接下來味榛，您將專注于實際創(chuàng)建菜單場景。其余部分將在一眨眼之間過去予跌。

所有這些操作完全耗盡了可憐的小img_header〔現(xiàn)在是時候把它放在應(yīng)該的位置。

在繼續(xù)之前券册，如果禁用Img_Background以查看Canvas邊框频轿，請重新啟用它。

然后在層次結(jié)構(gòu)中選擇Img_Header并在Inspector中設(shè)置其屬性烁焙，如下所示：

• 1） 單擊Set Native Size以重置大小航邢，因為您在使用pivot時可能會弄亂它。
• 2） 將Anchors設(shè)置為top-center骄蝇。
• 3） 將Pos X設(shè)置為0膳殷，將Pos Y設(shè)置為-100。

你應(yīng)該在Scene視圖中看到類似的東西：

就這些乞榨，現(xiàn)在秽之，單獨保留標(biāo)題圖像当娱。 它也有點累。

Adding the Start Button

現(xiàn)在考榨，你的游戲有一個帶有l(wèi)abel亮背景跨细，是時候添加一些按鈕了。

從頂部欄中選擇GameObject \ UI \ Button河质。 這將向場景中添加一個Button對象冀惭，您應(yīng)該在Hierarchy中看到它。 如果在層次結(jié)構(gòu)中展開它掀鹅，您將看到該按鈕包含一個Text子項 - 稍后您將了解這些內(nèi)容散休。

查看Inspector中的按鈕，您將看到它具有熟悉的Image組件乐尊，與您用于添加背景和標(biāo)題標(biāo)簽的組件相同戚丸。

此外，還有一個Button組件扔嵌。 換句話說限府，按鈕只是具有子Text元素和附加按鈕腳本的圖像。

注意：Text元素是可選的痢缎，因此如果您有一個按鈕圖像胁勺，文本被直接繪制到圖像中，您可以刪除它独旷。 在本教程中署穗，您將這樣做幾次。

1. Positioning the Button

現(xiàn)在一切都是關(guān)于定位和調(diào)整按鈕的大小嵌洼。 跟著這些步驟：

• 1） 在Hierarchy視圖中選擇Button案疲，并將其重命名為Btn_Start。
• 2） 將其錨點設(shè)置為bottom-stretch咱台，因為如果屏幕尺寸發(fā)生變化络拌，您希望它水平拉伸。
• 3） 將Left和Right都設(shè)置為350回溺。
• 4） 將Height設(shè)置為80。
• 5） 將Pos Y設(shè)置為300混萝。

然后選擇嵌套的Text元素并將其Text設(shè)置為Start Game遗遵。 將字體大小更改為32以使按鈕的文本更大。

這是您應(yīng)該在Scene view中看到的內(nèi)容：

嗯......你現(xiàn)在肯定有一個按鈕逸嘀，這是肯定的车要，而且它需要美工下。 要使按鈕看起來很好崭倘，您將設(shè)置圖像作為其背景翼岁，然后使用更高級的字體类垫。

9-Slice Scaling

您為Button設(shè)置圖像的方式與為Image設(shè)置圖像的方式相同。 畢竟琅坡，他們使用完全相同的組件悉患。 然而，與很少縮放的圖像不同榆俺，特別是非均勻的按鈕通常具有完全不同的尺寸售躁。

當(dāng)然，您可以為游戲中的每個按鈕大小創(chuàng)建背景圖像茴晋，但為什么要浪費所有空間陪捷？ 您將使用一種稱為9切片縮放(9-Slice scaling)的技術(shù)，它允許您提供一個縮放以適合所有大小的小圖像诺擅。

這種技術(shù)的工作原理是為九個區(qū)域中的每個區(qū)域創(chuàng)建不同的圖像市袖，所有區(qū)域的比例都不同。

這可確保圖像在任何比例下都看起來很好烁涌。

Preparing Button Images

在使用切片圖像之前苍碟，您需要設(shè)置這9個區(qū)域。 為此烹玉，請在“項目”窗口中打開Menu文件夾驰怎，然后選擇btn_9slice_normal圖像。

在Inspector的Import Settings中二打，將Texture Type設(shè)置為Sprite (2D and UI)并應(yīng)用更改县忌。 接下來，單擊Sprite Editor按鈕以打開Sprite Editor視圖继效。

在Sprite Editor中症杏，將Border值設(shè)置為L：14，R：14瑞信，B：16厉颤，T：16。 記得單擊Apply凡简！

對btn_9slice_highlighted和btn_9slice_pressed圖像重復(fù)相同的過程逼友，您將用于不同的按鈕狀態(tài)。

Setting Button Images

準(zhǔn)備好所有圖像后秤涩，只需將它們拖動到檢查器中的相應(yīng)字段即可帜乞。 在層次結(jié)構(gòu)中選擇Btn_Start，然后按照下列步驟操作：

• 1） 將Image Type更改為圖像組件中的Sliced筐眷。
• 2） 將Button組件中的Transition屬性更改為SpriteSwap黎烈。
• 3） 將btn_9slice_normal拖動到Image組件中的Source Image。
• 4） 將btn_9slice_highlighted拖動到Button組件中的Highlighted Sprite。
• 5） 將btn_9slice_pressed拖動到Button組件中的Pressed Sprite照棋。

注意：如果您遇到此錯誤消息资溃，This image doesn’t have a border，那么您可能忘記在Import Settings 中的Sprite Editor 中設(shè)置邊框烈炭，如上所述溶锭。

在運行場景并享受酷炫按鈕之前，您需要花幾秒鐘時間來更改嵌套文本標(biāo)簽Text label使用的字體梳庆。 這將使按鈕變得非常棒暖途。

Setting a Custom Font for the Button

使用自定義字體很容易。 還記得您下載并添加到項目中的包中的Fonts文件夾嗎膏执？ 現(xiàn)在是時候使用其中一種字體驻售。

選擇嵌套在層次結(jié)構(gòu)中Btn_Start中的Text元素。 然后在“項目”窗口中打開“Fonts”文件夾更米，并將TitanOne-Regular字體拖到Font區(qū)中欺栗。 同時將顏色設(shè)置為白色。

現(xiàn)在運行場景征峦，享受你的新超級棒按鈕迟几！

Adding the Settings Button

在繼續(xù)下一部分之前，還有很多事情要做栏笆，其中一個是添加Settings按鈕类腮。

你可以自己做，所以你只需要開始按鈕的大小和位置蛉加。 其余幾乎與您創(chuàng)建Start Game按鈕的方式相同蚜枢。

注意：最簡單的方法當(dāng)然是復(fù)制按鈕并調(diào)整一些屬性，但嘗試從頭開始創(chuàng)建按鈕针饥，因為您在這里學(xué)習(xí)厂抽。

因此，以下是“設(shè)置”按鈕的不同屬性：

• Name: Btn_Settings
• Rect Transform: Left and Right are 400, Height is 70 and Pos Y is 180
• Text: Settings
• Fontsize: 24

如果您不能做好丁眼，請按照以下步驟操作：

• 1） 從頂部欄中選擇GameObject \ UI \ Button筷凤。 這將在場景中創(chuàng)建一個Button對象。
• 2） 在Hierarchy視圖中選擇Button苞七，并將其重命名為Btn_Settings藐守。
• 3） 將按鈕Anchors設(shè)置為bottom-stretch。
• 4） 將Rect Transform中的Left和Right設(shè)置為400蹂风。
• 5） 將Height設(shè)置為70吗伤，將Pos Y設(shè)置為180。
• 6） 將Button組件中的Transition設(shè)置為SpriteSwap硫眨。
• 7） 確保將圖像組件中的Image Type設(shè)置為Sliced。
• 8） 在項目瀏覽器中打開“菜單”文件夾，然后將btn_9slice_normal拖動到Source Image礁阁。
• 9） 然后將btn_9slice_highlighted拖動到Highlighted Sprite巧号。
• 10） 最后，將btn_9slice_pressed拖動到Pressed Sprite姥闭。
• 11） 雙擊圖像組件內(nèi)的Color丹鸿，并檢查A是否設(shè)置為255以刪除任何透明度。

• 12） 選擇嵌套的Text標(biāo)簽棚品。
• 13） 將文本更改為Settings靠欢。
• 14） 將Font Size設(shè)置為24。
• 15） 將顏色更改為White铜跑。
• 16） 在項目瀏覽器中打開Fonts文件夾门怪，然后將TitanOne-Regular字體拖到Inspector視圖的Font字段中。

這是您在添加Settings按鈕后應(yīng)在Scene view中看到的內(nèi)容：

現(xiàn)在Save Scenes你的工作锅纺。

Starting the Game

此部分的最后一項任務(wù)是實際單擊Start Game按鈕并在游戲中運行第二個場景掷空。

1. Adding Scenes to Build

在運行不同場景之前，需要將它們添加到“項目設(shè)置”(Project Settings)中的Scenes in Build中囤锉，以便它們包含在最終應(yīng)用程序中坦弟。

為此，請在菜單上選擇File \ Build Settings官地。 這將打開Build Settings對話框酿傍。 然后在項目瀏覽器中打開Scenes文件夾并首先拖動MenuScene，然后將RocketMouse場景拖動到Scenes in Build的場景驱入。

最后赤炒，關(guān)閉Build Settings對話框。

2. Creating UIManager

向按鈕添加事件處理程序時沧侥，需要指定單擊按鈕時要調(diào)用的方法可霎。 由于無法使用靜態(tài)方法，因此需要從附加到GameObject的腳本中選擇公共方法宴杀。

從頂部欄中選擇GameObject \ Create Empty癣朗。 然后在Hierarchy視圖中選擇GameObject并將其重命名為UIManager。

之后旺罢，單擊“檢查器”中的Add Component旷余，然后選擇New Script。 將其命名為UIManagerScript扁达。 確保將語言設(shè)置為CSharp正卧，然后單擊Create and Add。

這是您應(yīng)該在Hierarchy視圖和Inspector視圖中看到的內(nèi)容：

雙擊Inspector中的UIManagerScript以在MonoDevelop中打開腳本跪解。 加載腳本后炉旷，刪除Start（）和Update（）。

接下來在前面的using語句下面添加以下語句。

using UnityEngine.SceneManagement;

這允許您加載其他場景窘行。 接下來添加以下內(nèi)容：

public void StartGame() 
{
    SceneManager.LoadScene("RocketMouse");
}

保存腳本并繼續(xù)下一步：

3. Calling the StartGame method when the Player Clicks the Button

切換回Unity并按照以下步驟操作：

• 1） 在層次結(jié)構(gòu)中選擇Btn_Start饥追，然后在Inspector中向下滾動到On Click（）列表。
• 2） 單擊+按鈕添加新項目罐盔。
• 3） 然后將UIManager從層次結(jié)構(gòu)拖動到列表中新添加的項目但绕。
• 4） 單擊下拉列表以選擇該功能。 現(xiàn)在惶看，它被設(shè)置為No Function捏顺。
• 5） 在打開的菜單中選擇UIManagerScript，然后在下一個打開的菜單中選擇StartGame（）纬黎。

Save Scenes您的工作幅骄，然后Run the scene并單擊開始游戲按鈕，這將打開游戲場景莹桅。

在最后一部分中你可能覺得你做得不多昌执，但事實并非如此。 您可以設(shè)置UI诈泼，添加圖像和按鈕懂拾，甚至可以在單擊按鈕時編寫啟動游戲的代碼！

在許多游戲中铐达，這就是UI的全部內(nèi)容岖赋。

你還學(xué)到了很多關(guān)于Rect Transform，Anchors瓮孙，Pivot等的知識唐断。 現(xiàn)在您了解它們很酷，當(dāng)您將這些新技能應(yīng)用到您自己的項目中時杭抠，您將能夠更快地移動脸甘。

在本系列的下一部分中，您將學(xué)習(xí)如何為UI元素設(shè)置動畫偏灿，創(chuàng)建對話框以及使用Slider和Toggle等控件丹诀。 到最后，你將有一個工作菜單場景翁垂。

后記

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