NGUI螢幕自適應

螢幕自適應

NGUI可以比較方便的實現螢幕自適應，但是它的官方教程裡面針對這個問題沒有詳細的教程，所以可能在實現的時候會走比較多的彎路。以下是我在開發過程中找到的一個比較方便的實現方法。

主要組件

1. UIAnchor

這個是用來確定控制項在螢幕中的位置，另外有一篇教程專門講它的功能，所有不會再贅述

2. UIStretch

這個是用來做縮放的組件。老版本的NGUI是整合在UIAnchor上的。新版本的UIStretch提供了4種縮放方式：

Horizontal：只縮放水平方向

Vertical：只縮放垂直方向

Bose：縮放兩個方向

BasedOnHeight：基於高度等比縮放

然後基於這些我自己實現了一個

BasedOnWidth：基於寬度等比縮放

代碼如下：

[csharp] view
plaincopy

1. else if(style == Style.BasedOnWidth)  
2. {  
3.     localScale.x = relativeSize.x * screenWidth;  
4.     localScale.y = relativeSize.y * screenWidth;  
5.     localScale.z = localScale.x;  
6. }  

這段代碼添加在Update方法裡面。為了能將UIStretch掛在UIPanel上面不出問題，所有將Z軸也縮放了。

自適應流程

1. 建立一個新的UI，將Anchor裡面的UIAnchor調整的合適的位置，注意最好將Anchor設定為Bottom。

2. 將Camera的Size調節到預設螢幕大小。比如UI是以960*640解析度製作的，那麼將Camera的Size調整到960。

3. 在Panel上面添加一個UIStretch，模式選擇BasedOnWidth。完成之後你可以看到你的Panel的Scale被修改到了當前螢幕的X方向解析度大小。

4. 將UI控制項添加到Panel上，調整位置，在Panel下的所有控制項都會以X方向為標準做等比縮放來適應螢幕大小。

5. 添加一張作為背景的圖，將UISprite的anchor設定為Bottom，添加之後你可以看到這個sprite可以在不同的解析度下自適應了。

6. 以上一步添加的背景圖作為參照物來擺放頁面上的控制項，這樣不僅僅是大小，位置也同樣會按照相同的模式進行等比縮放

7. 可以在第3步建立的Panel下面添加子Panel，子Panel不需要UIStretch（一般用來做Draggable Panel，否則沒必要，會增加額外的Draw Call）

8. 如果某一些控制項需要定位在螢幕上下左右中的某一角，可以單獨給他添加一個UIAnchor，這個時候UIStretch只會縮放這個控制項的大小，它的位置由他自己的UIAnchor控制了