? ? ? ? 在前面我們探索了一些基本的文本格式。我們需要考慮一個問題，這個文本在屏幕大小發(fā)生變化時該如何適應呢？

? ? ? ? 在Unity中，我們可以使用Canvas和Anchor Point（錨點）系統(tǒng)來確保UI元素總是出現(xiàn)在正確的位置，不管它們在哪種屏幕上出現(xiàn)。

修改Editor布局方便UI相關工作

? ? ? ? 在編輯修改UI的時候，讓場景視圖和游戲視圖同時都能看到是非常有幫助的。

? ? ? ? 1. 重新安排一下Unity Ediotr的布局，讓場景視圖和游戲視圖堆疊到一起。在Layout選擇器里，使用2 by 3選項可以達到此目的，當然我們也可以自定義布局，最終期望的效果類似下圖：

? ? ? ? 2. 在Hierarchy中，雙擊Canvas游戲物體，在場景視圖中框住它?，F(xiàn)在的透視視圖會變成3D場景在Canvas的左下角位置，變得很小，屏幕主要顯示的是一個巨大的2D矩形。

? ? ? ? 如果我們沒有看到矩形的邊框，可能需要再場景視圖里啟用Gizmos。

? ? ? ? 這個矩形Canvas表示了項目最終要顯示到的屏幕，所有UI元素必須在矩形內才能在屏幕上被看到。

? ? ? ? 3. 在場景視圖中，啟用2D模式。

? ? ? ? 由于Canvas是二維平面的，因此2D模式是最方便的編輯方式，2D模式會限制元素只在X和Y軸上移動。要退出2D模式，再點一次2D按鈕即可。

選擇長寬比（aspect ratio）

什么是長寬比？

? ? ? ? 我們現(xiàn)在實際已經知道了屏幕的輪廓（Canvas），接下來我們設置一下屏幕的形狀，或者叫做長寬比（aspect ratio）。

? ? ? ? 長寬比描述了屏幕的寬度和高度的關系。舉個例子，老電視機使用4:3長寬比，意思是屏幕有4個單位的寬度和3個單位的高度。寬屏電視使用16:9長寬比，意思是一樣的。

鎖定項目的長寬比

? ? ? ? Unity允許我們選擇Canvas所使用的長寬比。

? ? ? ? 1. 在游戲視圖中，使用屏幕分辨率下拉菜單，選擇Free Aspect。

? ? ? ? Free Aspect意思是屏幕可以自由地改變長寬比。當Free Aspect被啟用時，Canvas會我們改變游戲視圖窗口的時候改變它的形狀和大小。如果我們想要確保場景在不同形狀的屏幕上看起來都OK，使用Free Aspect非常有幫助。

? ? ? ? 2. 移動游戲視圖窗口的邊界，讓其變得更寬或更窄。我們會注意到場景視圖里的Canvas會自適應游戲視圖窗口的大小和形狀改變。?

? ? ? ? 在改變窗口過程中，我們也可以看到文本會跳出屏幕外，從這點可以看出UI要能正確響應不同的屏幕有多困難。簡單起見，我們將長寬比設置為一個固定值。?

? ? ? ? 3. 在游戲視圖中，使用屏幕分辨率下拉菜單，選擇16:9或16:10長寬比。

? ? ? ? ? ? 16:9是標準的寬屏比，因此是最安全的選項。為一個可預期的長寬比做UI設計會讓工作簡單不少。使用一個固定的長寬比，我們會注意到游戲視圖窗口的變化并不會影響場景視圖里的Canvas的長寬比。

添加設置按鈕到屏幕某個角落

? ? ? ? 1. 在Hierarchy中，點擊右鍵，選擇UI > Button - TextMeshPro。Canvas上會出現(xiàn)一個按鈕，它是Canvas游戲物體的一個子物體。

? ? ? ? ?2. 在Hierarchy中，重命名"Button"為“Settings Button”。

? ? ? ? 3. 展開Settings Button游戲物體，選擇Text(TMP)子游戲物體。這是一個TextMeshPro元素，和之前的標題文本所用的UI元素一樣。將它的文本改成“Settings”，編輯一下文字的風格大小等。

? ? ? ? 4. 使用移動工具，將按鈕放到Canvas的某個角落，在按鈕和屏幕邊界之間保留一定的空間。選擇哪個地方，按照自己的場景情況和喜好進行選擇即可。

什么是Anchor？

?為何我們需要錨點？

? ? ? ? 現(xiàn)在我們已經將設置按鈕放到了屏幕的某個角落了。

? ? ? ? 一切看起來似乎很美好，但如果我們移動游戲視圖窗口的邊界，增加或減少屏幕的大小，按鈕會飄到我們不想要的位置上去。

????????如果屏幕太小，按鈕會飄出屏幕外。

? ? ? ? ?如果屏幕太大，按鈕則會靠近中心位置。

? ? ? ? Canvas的錨點系統(tǒng)控制著這種移動。每個Canvas上的UI元素都錨定到了其父物體上的一個特定的位置，當屏幕大小改變時它會相對于這個位置移動。

錨點可視化

? ? ? ? 在場景視圖的工具欄中，選擇Rect工具（或在場景視圖中按鍵盤的T鍵），然后選擇設置按鈕游戲物體。

? ? ? ? Rect工具選中時，我們能卡到按鈕的Rect Transform的四個角，這四個角以藍色圓點表示。我們還可以看到錨點處于屏幕中心，由四個指向內部的小三角形?組成。

? ? ? ? 注:上圖中為了演示錨點，關閉了標題的TextMeshPro物體和天空盒。

? ? ? ? 按鈕總是會保持和錨點的距離，無論屏幕有多大或多小。我們可以通過修改游戲視圖窗口的大小來驗證一下。

? ? ? ? 下圖是游戲視圖窗口非常小的時候，設置按鈕相對于屏幕中心的位置，按鈕會跑到屏幕外。

? ? ? ? 下圖是游戲視圖窗口正常大小的時候，設置按鈕相對于屏幕中心的位置，按鈕處于右上角。

? ? ? ? 下圖是游戲視圖窗口非常大的時候，設置按鈕相對于屏幕中心的位置，按鈕靠近屏幕中心。

? ? ? ? 每一個按鈕的四個角的藍色小圓點，對應錨點的四個小三角。

? ? ? ? 我們可以單獨地控制錨點的四個角，但目前我們不需要這樣做。

為按鈕設置錨點

? ? ? ? 將標題的錨點放到屏幕中心可能沒什么問題，因為標題就應該停留在靠近屏幕中心的位置。但對于設置按鈕來說，它應該在屏幕的角落里。因此它應該被錨定在屏幕的角落上。

? ? ? ? 1. 保持設置按鈕選中狀態(tài)，鼠標選擇錨點的中心位置，然后將它移動到最靠近按鈕的角落位置。要小心不要只點中錨點的某一個單獨的小三角，而是直接在錨點中心點擊它做整體移動。

? ? ? ? 2. 嘗試調整游戲視圖窗口的大小?，F(xiàn)在按鈕應該會和屏幕的某個角落的位置保持不變。

? ? ? ? ? ? 為了節(jié)省我們的時間精力，Unity中有一些預設的錨點設置供我們使用。

? ? ? ? 3. 保持設置按鈕物體被選中，在Rect Transform組件中，選擇Anchor Preset圖標。

? ? ? ? ? ? 這樣會打開預設錨點面板：

? ? ? ? 4. 嘗試選擇一下不同的預設錨點位置，注意看錨點在場景視圖中的位置變化?？梢孕薷囊幌掠螒蛞晥D窗口的大小來看看實際效果，最后選擇一種最適合你的情況即可。

什么是支點（pivot point）？

? ? ? ? 我們在Anchor Presets菜單頂部，會看到一個Shift:Aslo set pivot。

? ? ? ? 當設置一個預設錨點的同時按住Shit鍵時，我們會同時改變物體的支點（pivot point）。

? ? ? ? 下圖中的空心圓圈就是物體的支點，物體的位置移動、旋轉和縮放等，都會以這個支點為參考。當我們的UI元素沒有按照預期行為動作時，支點也是一個我們需要關注的點。

? ? ? ? 關于支點、錨點的更多細節(jié)信息，可以參考Unity官方文檔：
Basic Layout | Unity UI | 1.0.0

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html

探索：實驗Canvas縮放

? ? ? ? 在設計UI的時候，我們可能會注意到當我們縮放游戲視圖窗口分辨率變大變小的時候，UI元素占據(jù)屏幕的比例大小會有所不同。

? ? ? ? 在更高分辨率下，UI看起來占比更??；在更低分辨率下，UI看起來占比更大。

? ? ? ? 這和Canvas Scaler有關系，Canvas Scaler是一個控制UI元素在不同屏幕大小中的縮放和分辨率的組件。?

? ? ? ? 1. 選中Canvas游戲物體，定位到Canvas Sclaer組件。注意UI Scale Mode屬性默認被設置為了Constant Pixel Size。

? ? ? ? ? ? 當使用constant pixel size時，無論屏幕的總大小是多少，UI元素總是使用相同的像素個數(shù)。在某些情況下，這會比較有用，比如我們想要在非常低分辨率設備上用戶也能看清我們的文字的時候。

? ? ? ? 2. 設置UI Scale Mode為Scale with Screen Size。這個模式會根據(jù)屏幕分辨率按照比例縮放UI元素。UI元素會占據(jù)相同的比例。

? ? ? ? ? ? 默認情況下，Canvas Scaler會匹配屏幕的寬度，使用800x600為參考分辨率。

? ? ? ? 3. 增加或減少參考分辨率的X（width）會讓我們的UI元素適應到我們所用屏幕的最佳相對大小。

? ? ? ? ? ? 每種UI Scale模式都有其優(yōu)點：

? ? ? ? ? ? Scale with Screen Size會保證所有UI元素無論屏幕大小，都能被放到相同的相對位置上。

? ? ? ? ? ? Constant Pixel Size會確保UI元素總是有相同的像素個數(shù)。

? ? ? ? ? ? Constant Physical Size會讓UI元素占據(jù)相同的物理大小，這是因為它也考慮了設備的DPI（dots per inch）。

? ? ? ? 4. 選擇Constant Pixel Size或Scale with Screen Size中的一種作為你的項目的UI Scale Mode。