版本記錄

前言

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簡介（一）

Rect Transform, Anchors, Pivot and You

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

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

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

如您所見，Transform和Rect Transform看起來有點不同。 此外，Rect Transform可以根據(jù)其Anchor設置更改其外觀。 例如，它看起來像這樣：

這里，你有Left, Top, Right and Bottom，而不是Pos X，Pos Y，Width和Height。

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

1. Anchors

設置錨點是一種簡單，優(yōu)雅且功能強大的方法，可以控制UI元素相對于父元素的位置和大小。 當你必須調(diào)整父元素的大小時，它會特別方便。

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

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

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

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

如您所見，錨點設置控制UI元素如何適應屏幕大小的變化。

錨由4個三角形手柄代表，看起來像一朵花。 以下是將錨點設置為top-center預設的樣子：

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

2. Custom Anchors

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

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

在這種情況下，只需通過選擇錨點預設（例如，屏幕的左側(cè)）來選擇錨點圖標。 錨圖標將移至屏幕的該部分，允許您隨意選擇和移動它。

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

3. Splitting Anchors

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

注意：在拖動Canvas邊緣時，實際上并沒有調(diào)整Canvas的大小。 實際上，您不能以這種方式調(diào)整Canvas的大小。
當您嘗試調(diào)整光標大小時，請在光標旁邊查找“預覽”一詞。 使用此技術(shù)進行實驗，了解UI元素如何適應不同的屏幕尺寸。

Rect Transform Depends on the Current Anchors Setting

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

如果您將錨點設置為單個點而不拉伸，您將看到Pos X，Pos Y，Width和Height屬性。

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

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

1. Pivot

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

樞軸(pivot)是圍繞其進行所有變換的點。 換句話說，如果更改UI元素位置，還可以更改軸心點位置。 如果您旋轉(zhuǎn)UI元素，它將圍繞該點旋轉(zhuǎn)。

樞軸設置在標準化坐標中。 這意味著它的高度和寬度從0變?yōu)?，其中（0,0）是左下角，（1,1）是右上角。

注意：您還可以在UI元素邊界外設置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元素，但每個圖像都顯示了場景中的不同位置。

第一個圖像顯示樞軸的默認值（0.5,0.5），它是UI元素的中心。 Position設置為（0,0），錨點設置為top-left。

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

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

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

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

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

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

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

請注意，尺寸和比例(size and scale)之間存在一些差異。例如，size不能是負數(shù)，但scale可以是。此外，使用負scale值將翻轉(zhuǎn)UI元素。在大多數(shù)情況下，您只應更改UI元素的size。

Placing a Header Image

??！這是專門用于Rect Transform，Anchors和Pivot的幾個詞。相信我，你會感激你花時間完成練習，因為理解它們對你游戲中令人敬畏的用戶界面至關重要。

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

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

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

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

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

你應該在Scene視圖中看到類似的東西：

就這些，現(xiàn)在，單獨保留標題圖像。 它也有點累。

Adding the Start Button

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

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

查看Inspector中的按鈕，您將看到它具有熟悉的Image組件，與您用于添加背景和標題標簽的組件相同。

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

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

1. Positioning the Button

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

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

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

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

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

9-Slice Scaling

您為Button設置圖像的方式與為Image設置圖像的方式相同。 畢竟，他們使用完全相同的組件。 然而，與很少縮放的圖像不同，特別是非均勻的按鈕通常具有完全不同的尺寸。

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

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

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

Preparing Button Images

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

在Inspector的Import Settings中，將Texture Type設置為Sprite (2D and UI)并應用更改。 接下來，單擊Sprite Editor按鈕以打開Sprite Editor視圖。

在Sprite Editor中，將Border值設置為L：14，R：14，B：16，T：16。 記得單擊Apply！

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

Setting Button Images

準備好所有圖像后，只需將它們拖動到檢查器中的相應字段即可。 在層次結(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 中設置邊框，如上所述。

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

Setting a Custom Font for the Button

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

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

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

Adding the Settings Button

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

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

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

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

• 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設置為bottom-stretch。
• 4） 將Rect Transform中的Left和Right設置為400。
• 5） 將Height設置為70，將Pos Y設置為180。
• 6） 將Button組件中的Transition設置為SpriteSwap。
• 7） 確保將圖像組件中的Image Type設置為Sliced。
• 8） 在項目瀏覽器中打開“菜單”文件夾，然后將btn_9slice_normal拖動到Source Image。
• 9） 然后將btn_9slice_highlighted拖動到Highlighted Sprite。
• 10） 最后，將btn_9slice_pressed拖動到Pressed Sprite。
• 11） 雙擊圖像組件內(nèi)的Color，并檢查A是否設置為255以刪除任何透明度。

• 12） 選擇嵌套的Text標簽。
• 13） 將文本更改為Settings。
• 14） 將Font Size設置為24。
• 15） 將顏色更改為White。
• 16） 在項目瀏覽器中打開Fonts文件夾，然后將TitanOne-Regular字體拖到Inspector視圖的Font字段中。

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

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

Starting the Game

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

1. Adding Scenes to Build

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

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

最后，關閉Build Settings對話框。

2. Creating UIManager

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

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

之后，單擊“檢查器”中的Add Component，然后選擇New Script。 將其命名為UIManagerScript。 確保將語言設置為CSharp，然后單擊Create and Add。

這是您應該在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)在，它被設置為No Function。
• 5） 在打開的菜單中選擇UIManagerScript，然后在下一個打開的菜單中選擇StartGame（）。

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

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

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

你還學到了很多關于Rect Transform，Anchors，Pivot等的知識。 現(xiàn)在您了解它們很酷，當您將這些新技能應用到您自己的項目中時，您將能夠更快地移動。

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

后記

本篇主要講述了Unity UI簡介，感興趣的給個贊或者關注~~~