Unity 的UI适配道理

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

关于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效果。

		自动登录	找回密码
密码			立即注册

Unity 的UI适配道理

本帖子中包含更多资源