ggm 发表于 2024-7-15 18:32

Unity 的UI适配道理

关于3d场景适配可以参考我的另一篇文章:
阿文:Unity 3d场景适配 ??
这里我们还是带着问题去思考来了解UI适配是怎么回事。
一、我们为什么适配?

1、节约美术资源
2、降低工程复杂度
3、降包体大小

为什么这么说呢?因为市面上各式各样的手机屏幕分辩率的大小是纷歧样的,那么我们如果要保证美术效果,就需要给每个分辩率都设计一份单独的美术资源,这显然是不现实的,那怎么在不增加美术资源的情况下,让同一份资源在分歧屏幕上完美的展示呢?这就需要我们来进行适配。

那适配什么呢?怎么适配呢?
二、怎么解决适配?

要想知道适配什么首先得搞清美术的出图流程,我们一般来说的适配指的是UI适配,那美术在出UI资源的时候必定是要按照设计分辩率来进行出图的,而不能美术A同学是以2480x2200 出图的,而美术B同学是以1920x1080出图的,这样的话两个UI切图放到一个界面就不协调和美不雅观,所以这个设计分辩率必定是有的。

所以到目前为止涉及到了3种分辩率
1、图片分辩率
2、设计分辩率
3、屏幕分辩率

适配的过程就是按照设计分辩率出图,然后将设计分辩率整体映射到屏幕上。

那映射的过程是我们要思考的问题。

目前常见有四种映射方式
假设 scaleX = 屏幕分辩率宽/设计分辩率宽,scaleY = 屏幕分辩率高/设计分辩率高,

1、铺满屏幕
这种方式是将设计分辩率宽拉伸scaleX倍,设计分辩率高拉伸scaleY倍,这样设计分辩率就铺满了整个屏幕,带来的问题就是宽高非等比缩放所造成的图片变形问题。
一般游戏不会采用这种方式。

2、ShowAll模式
这种方式是将设计分辩率宽和高拉伸min(scaleX,scaleY) 倍,这种方式图片不会变形,但是手机屏幕边缘会呈现黑边,然后需要特殊措置。
这种方式我之前做的游戏采用过。

3、NoBorder模式
这种方式是将设计分辩率宽和高拉伸max(scaleX,scaleY) 倍,这种方式图片不会变形,但是游戏内容会部门超出屏幕。
这种方式用的也不多。

4、FixedWidth和 FixedHeight模式
这种方式斗劲特殊,它会改变设计分辩率的大小,我们以FixedHeight模式举例:
新设计分辩率的宽= 屏幕分辩率宽 / scaleY

然后新设计分辩率再以scaleX,scaleY的倍数拉伸铺满屏幕,这样就不存在图片的变形问题以及ShowAll模式和NoBorder模式存在的问题。

这种方式是用的最多的。

那Unity是怎么进行适配的呢,我们来简单看下

三、Unity是怎么适配的?


1、UI元素的适配:


在设计UI时,常常需要考虑屏幕分辩率和设备尺寸等因素。为了让UI在分歧的设备上呈现出较好的效果,需要对UI元素进行适配。

Unity提供了一种自适应UI的解决方案,即Anchors和Pivot(锚点和中心点)。Anchors决定了UI元素的位置和大小随着屏幕尺寸的变化而变化,Pivot决定了UI元素的旋转和缩放的中心。


例如,一个UI元素需要程度居中并在屏幕底部,可以将锚点设置为底部中心,同时将中心点设置为UI元素的底部中心,这样UI元素就能够随着屏幕的宽度变化而程度居中。

2、UI布局的适配:


在UI的布局中,不仅需要考虑UI元素的适配,还需要考虑UI布局的适配。凡是需要针对分歧屏幕分辩率和设备尺寸进行适配。

Unity提供了一种灵活的UI布局系统,即UI Layout系统。它提供了多种布局组件,例如VerticalLayoutGroup和HorizontalLayoutGroup等,可以在分歧分辩率和尺寸的屏幕上实现适配。

例如,可以在UI中使用VerticalLayoutGroup组件,以在垂直标的目的上布局UI元素。通过设置LayoutElement组件的minHeight和preferredHeight属性,可以确保UI元素在分歧的屏幕尺寸上具有不异的高度。

3、除此之外,还可以使用Canvas Scaler来对UI进行缩放,以适配分歧分辩率的设备。Canvas Scaler提供了三种缩放模式:Constant Pixel Size(固定像素大小)、Scale with Screen Size(按照屏幕尺寸进行缩放)和Constant Physical Size(固定物理大小)。

这三种适配方式都是Unity UI顶用来适配分歧屏幕尺寸的方式,它们的区别在于适配方式分歧。


Constant Pixel Size(固定像素大小):这种方式下,UI元素的尺寸将按照在设计时所设置的像素大小来显示,不会发生缩放。如果在分歧尺寸的屏幕上运行游戏,那么UI元素的大小将会在分歧屏幕上显示分歧。

Scale with Screen Size(按照屏幕尺寸进行缩放):这种方式下,UI元素的尺寸将会按照屏幕的大小进行缩放。UI元素的尺寸和位置都将随着屏幕的大小而发生改变,以确保UI在分歧尺寸的屏幕上都能够适当地缩放,保持比例不掉真。
在这种方式下,Screen Match Mode 会呈现Match Width Or Height , Expand 和 Shrink三个选项,和我们上文讲到的适配方式不约而合。


Constant Physical Size(固定物理大小):这种方式下,UI元素的尺寸将会按照物理尺寸来显示。这意味着,UI元素的物理大小将始终保持不变,而不是按照屏幕尺寸进行缩放。这种方式主要适用于需要在屏幕上显示实际大小的元素,例如地图、计时器等。

选择哪种适配方式取决于你的游戏需要什么样的UI效果。如果你想要UI在分歧尺寸的屏幕上都保持不异的比例和大小,那么可以选择Scale with Screen Size;如果你需要在游戏中显示实际大小的元素,那么可以选择Constant Physical Size;如果你需要UI在分歧尺寸的屏幕上以固定的像素大小显示,那么可以选择Constant Pixel Size。

总的来说,Unity提供了丰硕的UI适配解决方案,包罗UI元素的适配和UI布局的适配。通过合理运用这些解决方案,可以在分歧的设备上实现良好的UI效果。
页: [1]
查看完整版本: Unity 的UI适配道理