添加一個基礎(chǔ)的設(shè)置菜單背景

? ? ? ? 設(shè)置菜單的元素會安放在一個簡單的矩形區(qū)域上。我們用一個Image對象來創(chuàng)建這個矩形。

? ? ? ? 1. 首先，我們暫時停用Title Text和Settings Button游戲物體。這樣會讓我們的Canvas看起來更清爽。

? ? ? ? 2. 在Hierarchy中，點擊右鍵，選擇?UI > Image，將新建的Image對象名字重命名為“Settings Menu”。Image是一個非常簡單的UI元素，它可以顯示任意我們所導(dǎo)入到項目中的圖片。默認情況下，它顯示的是一個白色的方塊。

? ? ? ? 3. 在場景視圖，使用Rect Tool將其移動到設(shè)置菜單合適的位置并且設(shè)置好它的大小。

? ? ? ? 4. 在Image組件中，選擇顏色選擇器，修改一下背景的顏色。在Color窗口中，我們也可以使用Alpha（A）屬性來讓背景變成半透明狀態(tài)。

為菜單添加一個“Settings”標(biāo)題

? ? ? ? ?1. 在Hierarchy中，在Settings Menu游戲物體上點擊右鍵，選擇UI > Text - TextMeshPro。

? ? ? ? 這會在Settings Menu下面增加一個子物體，新建的Text(TMP)游戲物體的位置默認會錨定在背景游戲物體的中心位置。

? ? ? ? 2. 重命名Text(TMP)游戲物體為“Settings Text”，然后編輯TextMeshPro -Text(UI)組件里的屬性，讓文字顯示更好看一些。

添加一個簡單的退出按鈕

? ? ? ? ?我們之前添加了一個設(shè)置按鈕讓我們進入設(shè)置菜單。現(xiàn)在我們需要在設(shè)置菜單中增加一個退出按鈕來返回到主標(biāo)題界面。這次我們創(chuàng)建按鈕的時候，會更深入一點使用Image組件來定制化UI元素。

? ? ? ? 1. 在Hierarchy中，在Settings Menu游戲物體上點擊右鍵，選擇UI > Button - TextMeshPro。這會在Settings Menu下新增一個新的Button子物體，我們將其重命名為“Exit Button”。

編輯

? ? ? ? 2. 展開Exit Button游戲物體，選擇Text(TMP)子物體。將這個子物體對應(yīng)的文字(Text Input屬性)修改成“X”，并選擇一種我們想要的字體。

? ? ? ? 3. 場景視圖中使用Rect工具或在Inspector中修改Rect Transform組件的屬性，修改一下退出按鈕為正方形并放置在UI背景的右上角處（當(dāng)然你也可以自由發(fā)揮）。

選擇一個9分割的圖片（9-Sliced Image）

? ? ? ? 通常我們在對圖像做橫向或縱向縮放時，圖像會變扭曲。

? ? ? ? 舉個例子，下圖是一副正常的松鼠的圖片。

? ? ? ? 在進行水平或縱向縮放后，這只松鼠被拉變形了。

? ? ? ? 但當(dāng)我們對退出按鈕的圖像做調(diào)整時，將其從長方形變成了正方形，圖像看起來并沒有被擠壓或拉伸。

? ? ? ? 1. 保持按鈕為選中狀態(tài)，找到Inspector底部的Image Preview窗口。

? ? ? ? 我們可以看到，在圖像預(yù)覽窗口中有一個3X3的方格，將圖像分成了9個區(qū)域。這種技術(shù)叫做9-slicing，這樣做能夠讓我們在縮放矩形圖片的時候，對角落保持原狀，因此不會造成角落的拉伸或壓縮。

? ? ? ? 下圖是一個對比示例：

? ? ? ? 關(guān)于9-slicing的更多細節(jié)，可以參考這里：

????????Unity - Manual: 9-slicing Sprites

????????https://docs.unity3d.com/Manual/9SliceSprites.html? ? ? ? ?

????????我們可以用自定義的9-sliced圖像來替換按鈕的默認9-sliced圖像，當(dāng)然對于任何其他的UI Image組件來說也是一樣可以被替換的。

? ? ? ? 2. 在Image組件中，使用對象選擇器按鈕來瀏覽一些工程預(yù)先提供的其他UI按鈕圖像。

探索：繼續(xù)定制UI

? ? ? ? 我們已經(jīng)知道如何添加和替換UI里的圖像了。接下來請自由發(fā)揮，讓UI變得更好看一點。比如可以用自定義的圖像替換設(shè)置按鈕的背景圖，或者在按鈕背景的邊界處增加邊框。

? ? ? ? 當(dāng)我們的UI元素的層次變得更多時，有一點非常重要，我們要了解Canvas的繪制順序（Draw Order）。物體是按照它們在Hierarchy中列表的順序被畫到屏幕上的，意思是在Hierarchy中更靠下的物體會被畫到更靠上的物體之上。

? ? ? ? 如果Hierarchy中物體的順序不正確，則我們可能會得到一些不想要的結(jié)果，比如下圖：

? ? ? ? 要解決這個問題，我們值需要在Hierarchy中，將exit button放到背景邊框的下方即可。