Unity 实现文字过长显示省略号

需求:假设有一行文字由于界面空间不足只能显示一部分,那么剩余部分需要被截断,并且显示出来的文字末尾需要添加省略号“…”。比如“一二三四五六七八九十”,最终显示出来的样子是“一二三四…”。

这个需求在 CSS 中倒是挺好实现的。(题外话:这只限于显示出来的文字只有一行的情况。多行的情况下还是没那么容易,除非采用 WebKit 的 CSS 扩展属性 -webkit-line-clamp,不考虑兼容 W3C 标准。)但是在 Unity 中则需要摸索一下。目前已知的有两种方案。

方案一:使用 TextMesh Pro

当前的 Unity 2018 已经集成了 TextMesh Pro 插件(未确认之前的 Unity 版本是否集成)。这个插件非常强大,自然也包含了文字溢出时显示省略号的功能。使用时只要将 TextMesh Pro UGUI 组件中的 Overflow 选项设为 Ellipsis 即可。这个插件甚至能够很自然地实现多行文本的省略号截断。

继续阅读Unity 实现文字过长显示省略号

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的距离。