NGUI屏幕自適應

http://blog.csdn.net/daiguangda/article/details/7888942

 

 

屏幕自適應

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

主要組件

1. UIAnchor

這個是用來肯定控件在屏幕中的位置，另外有一篇教程專門講它的功能，全部不會再贅述

2. UIStretch

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

Horizontal：只縮放水平方向

Vertical：只縮放垂直方向

Bose：縮放兩個方向

BasedOnHeight：基於高度等比縮放

而後基於這些我本身實現了一個

BasedOnWidth：基於寬度等比縮放

代碼以下：

else if(style == Style.BasedOnWidth)
{
    localScale.x = relativeSize.x * screenWidth;
    localScale.y = relativeSize.y * screenWidth;
    localScale.z = localScale.x;
}

else if(style == Style.BasedOnWidth)
{
    localScale.x = relativeSize.x * screenWidth;
    localScale.y = relativeSize.y * screenWidth;
    localScale.z = localScale.x;
}

這段代碼添加在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控制了