要實現類似NGUI官方例子1的2D UI界面時,假如類似下圖
左上地圖、左下移動、右下開火、底部血條、右上和右邊按鈕。
若想要固定位置,且能自適應分辨率。
首先,建UI ROOT2D,默認移動到panel下,再在panel下新建空物體offset用於調整位置,再在offset下建UI貼圖sprite、label、button之類。
結構如下:
UI ROOT(2D)
----Camera
----Panel
----Anchor-BottomLeft 設置side屬性為BottomLeft
----offset-move 調整位置使其顯示正確
----sprite
----Anchor-BottomRight
----offset-fire
----sprite
同理再建其他Anchor-TopLeft,Anchor-TopRight、Anchor-Right之類的。
這個時候已經可以實現固定錨點了。但是還有自適應分辨率。
在panel上附加UIStretch 腳本,此腳本用於自適應縮放。
有如下幾種方式:
Horizontal:只縮放水平方向
Vertical:只縮放垂直方向
Both:縮放兩個方向
BasedOnHeight:基於高度等比縮放
假如你的UI是在800*480的正常尺寸。那么有兩種方法。
一、把Camera設置size為800。選Both方式。
二、Camera的size仍為1,設置UIStretch 腳本的Relative Size 為,x:1/800,y:1/480。
推薦第二種。
設置完會發現雖然可以縮放,但對於圓形會變拉伸成橢圓。
為解決這個問題,我們再加一種方式:(參考別人的,不知道出處了。。。)
BasedOnWidth:基於寬度等比縮放
修改UIStretch腳本
Enum Style加上
BasedOnWidth
Update函數里加上
else if(style == Style.BasedOnWidth)
{
localScale.x = relativeSize.x * rectWidth;
localScale.y = relativeSize.y * rectWidth;
localScale.z = localScale.x;
}
然后選擇BasedOnWidth模式。把Relative Size 的x和y都設置為:1/800。