UI Canvas Scaler理解

只看了UI Scale Mode — Scale With Screen Szie这个模式,记录一下对Match的理解

UI Canvas Scaler,实际上就是将UI进行整体放大或缩小,虽然Match可以选择Width或者Height,但这个放大缩小并不会对屏幕元素比例进行缩放,也就是说,UI元素上图片的长宽比并不会发生变化。

那么,这个Match的Width和Height到底是什么呢?

从定义角度讲,是把屏幕以Width或Height进行缩放。比如说如果比例是7000:8000,如果Match是0(Width),则放大比例为7000/1080。反之,如果Match是1(height),则放大比例为8000/1920。

那么什么情况下应该选择什么Match?

我认为,一个比较好的尝试是,在长屏(屏幕高度:屏幕宽度>1920:1080)的情况下,将Match设置为Width,而在宽屏下,将Match设置为Height。
为什么呢?
这样可以保证,在长屏下,屏幕宽度的相对像素是被保证的,拿满屏的UI举例子来说,这样可以保证UI不会挤到一起,他们宽度的比例是一定的,而因为长屏是高度更高,所以UI在高度上会比较松散。但是,这只会让UI丑一点,不会影响使用。
宽屏也是如此,屏幕的高度需要得到保证。

谈谈UI的适配

其实有了上面的Match,我们可以得知:如果你的UI预制体设置了宽度1080,那么在长屏下,他会完美的贴合左右屏幕。如果在宽屏下,他会左右留空。
这种留空是合理的,因为毕竟是长屏游戏,宽屏只是极少部分人的机型,没必要为这种机型额外做UI适配,所以简单地把宽度限定为1080,可以一定程度上避免更复杂的UI适配逻辑。
所以其实UI设计上,对于竖屏游戏,外面的Panel,基本上也只是对宽度进行了限定(比如说1080,因为这样的话,长屏下,ui scaler会使得屏幕宽度是1080,而宽屏下,会让主要的内容限定在1080)

再谈谈动效的接入

只聊一下我接入的特效吧,动效那边给到的,是一个长方形的预制体,里面的动效是对角线飞的。程序需要做的是,用代码控制这个预制体,使之对角线可以分别处于想要的位置。

我的做法是,分别找到这两个对角线点的屏幕坐标,相减得到这个长方形的长和宽,然后将我们这个动效的预制体放在A点,随后将他的长和宽设置为刚才找到两个点的长宽之差。

但是Scale会有影响,为什么?

因为我们相减得到的屏幕坐标差,是真正屏幕上的坐标差,比如说我们的屏幕比例是7000:8000,那么一个铺满屏幕的UI,他的这个坐标差是(7000,8000)

但是我们的UI,实际上是被放大之后的,也就是说,我们UI的width是1080,所以我们得到长宽只差后,需要除以这个放大比例,因为我们最后的坐标是要通过UI scaler放大的

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

大纲

Share the Post:
滚动至顶部