要实现类似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。