Aspect Ratio Fitter 和 Image

UGUI 里面 Aspect Ratio Fitter 的作用是保持一个 UI 控件的宽高比。然而 Image 自身就有一个 Preserve Aspect 属性用于保持自己的宽高比。因此起初我就想 Image 是不是就用不上 Aspect Ratio Fitter 了,或者说 Image 自身的 Perserve Aspect 的属性是不是多余的。后来发现并不完全是。

前段时间遇到一种情况必须要使用 Aspect Ratio Fitter 。

在下图中,Bubble、Text 和 Text (1) 是文字冒泡的 UI 控件。为了让文字冒泡的位置始终对准背景图片中的人物头顶,我给文字冒泡的各个控件设置了锚点。

Bubble 即冒泡框相对其父节点 Image(背景图片)设置了锚点,目的是不管 Image 大小如何变化,都要让冒泡框对准背景图片里面人物的头顶。

如果只是依靠 Image 的 Preserve Aspect 属性,那么文字冒泡是无法在 Image 大小改变的时候时刻对准背景图片里的人头的:

这是因为 Preserve Aspect 虽然能保持图片的宽高比,但却并不能保持 Image 的 Rect Transform 的宽高比。然而锚点却是基于父控件的 Rect Transform 的边界来定位的。

在这种情况下就必须给 Image 挂载 Aspect Ratio Fitter,此时 Preserve Aspect 勾不勾都是无所谓的。

Image 挂载了 Aspect Ratio Fitter 后就可以保持 Rect Transform 的宽高比,从而让文字冒泡时刻对准图片里的人头。

Preserve Aspect 的意义主要在于游戏开发者不用关心图片宽高比的具体数值,以及宽高比保持的方式。毕竟使用 Aspect Ratio Fitter 的话,开发者不但要填入具体的宽高比数值,而且要决定控件要如何保持宽高比——是高度固定,还是宽度固定,还是尽可能被包含在父控件区域内,等等。

Unity版本:2017.3.1f1

用UGUI Slider做血条时遇到的一个小问题

前段时间想在小游戏中做一个血条UI,自然而然地想到了用UGUI的Slider。

在Unity中可以通过编辑器菜单一键创建一个Slider。这样的一个Slider里会包含Background、Fill Area和Handle Slide Area三个部分。其中Handle Slide Area就是滑块。血条不需要滑块,因此要将它删掉。

刚用编辑器菜单创建的Slider。需要将Handle Slide Area也就是滑块删掉。

我以为将滑块删掉就万事大吉不用改了,谁知却遇到一个问题。Value为0的时候,血条在表现上还有残留的血量:

Value为1的时候,血量却还没填满整个血条:

后来发现要将Fill Area及其孩子Fill的Left和Right都调成0才行。这样问题就解决了。

这里Left是指UI控件的左边缘相对于Anchors Min X的距离,Right是右边缘相对于Anchors Max X的距离。