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控制了



下面是我常用的方法和分析


我一般什麼也不做,把root腳本改成FixedOnMobile


然後設置manual的值爲你窗口的高度就可以了

之後在不同的設備上,會自動根據高度縮放

所有我們需要三個anchor分別放在left,right和middle就可以了

左側元素放在left下,右側放right下就可以了

設備分辨率不同時也不會差太多

對於那種奇葩的分辨率不必支持也沒事(心裏話)


PS:還有一個選項是PixelPerfact,就是根據你設置的最小和最大高度,如果設備高度在兩個值之間,ui組件不會產生縮放,保持原樣,大於max是放大,小於min時縮小,試試就明白了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章