UGUI教程:关于游戏的自适应

发表于2017-07-15
评论0 2.2k浏览

下面和大家介绍的是游戏的自适应,在做自适应时需要记住这三点:

1.ugui有自己的缩放比例

2.游戏内容如果可以移动,和手势放大缩小…则不用考虑自适应

3.游戏内容按照某种规格制定的全屏游戏..例如1920*1080…则该考虑是根据宽或者高.进行其缩放自适应

 

渲染模式..决定了canvas的位置

摄像机决定了canvas的如何呈现(除了overlay模式)..如果canvas为worldspace..一般都会将其缩放为0.01..就是一百倍..因为其内部的子元素的pixels per unit都将失效

Canvas拥有相关的渲染模式,可以设置在屏幕或世界空间中渲染。

Screen Space-Overlay(屏幕空间——覆盖)

这个模式将UI元素放到场景的最上面渲染。如果屏幕缩放或改变了分辨率,Canvas会自动改变尺寸去匹配。

Screen Space-Camera(屏幕空间——摄像机)

这个和Screen Space – Overlay模式类似,但在这个渲染模式下,Canvas是被放在一个指定摄像机前面一定的距离上。UI元素是被这个摄像机渲染的,也就意味着摄像机相关的设置会影响UI的显示。如果摄像机设置为透视模式,UI元素就会渲染为透视,而透视后的扭曲程度由摄像机的视域决定。如果屏幕改变了大小或者改变了分辨率,或者摄像机的视景体改变了,Canvas都会自动改变尺寸去匹配。

World Space(世界空间)

这种渲染模式会将Canvas当作场景中任何的其它对象一样对待。Canvas的尺寸可以用Rect Transform进行手动调整,UI元素的遮挡效果由3D位置决定。对于需要将UI作为场景中的一部分或者作为剧情化界面的情况非常有用。

 

UGUI(Unity3D 原生 UI 组件) 的屏幕分辨率自适应是通过在 Canvas 组件上添加 Canvas Scaler组件(5.0 之前的这个组件的功能是由 Reference Resolution 和 Physical Resolution 这两个组件来同完成的)来实现的。这个组件的属性将会决定在这个Canvas 下所有 UI 组件的缩放规则。Canvas Scaler 的缩放模式分为三种,下面将分别介绍这几种缩放模式,以便我们可以去更好地使用它们。

Constant Pixel Size

在这种模式下 UI 的大小(以像素为单位)将不会随着屏幕尺寸的改变而改变。在这种模式下可以调节的属性有:

  1. Scale Factor。调节它可以对当前 Canvas 下的所有 UI 进行缩放,这个值变大 UI 也会相应地变大。这个值是需要手动调节的,它并不会跟着屏幕大小的变化而变化。
  2. Reference Pixels Per Unit。该属性表示的是一个 Unity 单位所能容纳的像素的个数,这个值越小 UI 将会越大。

Scale With Screen Size

Scale With Screen Size 模式中 UI 的大小会随着屏幕的大小而变化。在这个模式下首先要设置 Reference Resolution 属性,该属通常与 UI 的设计尺寸一直,比如:有一组 为 1024 X 768 的屏幕设计的 UI,那么 Reference Resolution 可以设成这个值,这样就可以在游戏中更好的还原设计。这个模式下 UI 缩放的程度是由它所在的 Canvas 的缩放程度所决定的,如果Canvas 缩放的分辩率的宽高比和 Reference Resoltion 中设置的分辨率的宽高比一至的话,那么 Canvas 里的 UI 进行和Canvas 同样比例的缩放即可。

举例来说:Canvas 的 Reference Resolution 为 600 X 400,在这个 Canvas 中有一个大小为 100 X 20 的 Button,当这个 Canvas 适配到 1200 X 800 屏幕时,宽高都要增大一倍,这时我们说 Canvas 大小增大了一倍,与此相对应的 Canvas 中Button 也要增大一倍,即扩大到 200 X 40 大小,那么 Canvas 和 UI 的相对大小是一样的,我们可以把它叫做等比缩放。

但是如果 Canvas 需要缩放的屏幕分辨率的长宽比和 Reference Resolution 不一样,那么缩放应该怎么进行?首先有一点可以确定那就是 Canvas 会铺满屏幕,剩下的需要考虑的是如何缩放 Canvas 中的 UI 了。如何对 UI 进行缩放就是由 Screen Match Mode 属性来决定了。Screen Match Mode 有三个模式,下面将具体说明一下这几种模式。

Match Width or Height

首先我们来看 Match Width or Height。在这一行为模式下 Canvas 中 UI 的大小缩放比例是参考 Canvas 中高度、宽度的缩放比例来进行缩放,而缩放比例的计算则是由
Match 参数决定,这个参数一个在 0 与 1 之间的值。还是用举例的方式来说明这个值是怎么作用于 UI 的缩放的。

  1. 值为0。在这种情况下,UI 缩放比例完全参考宽度的缩放比例。例如,一个 Reference Resoltion 为 600 X 400 的 Canvas适配到 1200 X 500 的分辨率, 宽度增大了一倍,那么 Canvas 中的 UI 大小也要增大一倍,原来大小为 100 X 20 的Button 就要变成 200 X 400 了。
  2. 值为1. 在这种情况下,UI 缩放比例完全参考高度的缩放比例。例如,一个 Reference Resoltion 为 600 X 400 的 Canvas适配到 600 X 800 的分辨率, 高度增大了一倍,那么 Canvas 中的 UI 大小也要增大一倍,原来大小为 100 X 20 的 Button就要也变成 200 X 400。
  3. 值为0到1之间的值. 在这种情况下,UI 缩放比例完要同时参考高度和宽度的缩放比例。例如, Match 值为0.4,一个Reference Resoltion 为 600 X 400 的 Canvas 适配到 1800 X 800 的分辨率, 高度变为原来的2倍,而宽度则变为原来的3倍,那么 Canvas 中的 UI 大小就要变成原来的 (3 X 0.6 2 X 0.4 )= 2.6 倍,原来大小为 100 X 20 的 Button 就要也变成 260 X 52。

Expand

然后是 Expand 模式。在这个模式中 Canvas 的大小会横向(Horizontally)或纵向(Vertical)的放大以适应屏幕的变化,使Canvas 的显示分辨率不会小于设定的 Reference Resolution值,所以在这种模式之下所有 UI 都能显示完全,只不过比例相对 Canvas 的大小变小了而已。

例如:一个 Reference Resoltion 为 600 X 400 的 Canvas 适配到 600 X 200 的分辨率,那么 Canvas 的显示分辨率将会变成 1800 X 400,在这种情况下 UI 大小不变,而在视觉上变小了。

Shrink

最后是 Shrink 模式。 该模式中 Canvas 当屏幕的比例发生变化时会横向或纵向的去裁剪自己的大小,使得自己的大小不会大于之前设置的 Reference Resolution 值 。从表现上来看就会发现有的处于屏幕边缘或者尺寸较大的 UI 会变得显示不完全,其原因就是 Canvas 的显示分辨率变小了。

例如:一个 Reference Resoltion 为 600 X 400 的 Canvas 适配到 500 X 200 的分辨率,那么 Canvas 的显示分辨率将会变为 500 X 200 ,如果之前在 Canvas 中有一张大小为 600 X 400 的图片,在这种情况下就不能显示完全了。

总结

Match Width or Height 无论是适配到比 Reference Resolution 高还是低的分辨率时,Canvas和它里面的 UI 都会进行一定比例的缩放,而 Expand 和 Shrink 在适配高于 Reference Resolution 的分辨率的屏幕时会同时缩放 Cavans 和它里面的 UI,而在适配低于 Reference Resolution 的分辨率的屏幕时只是改变 Canvas 的显示大小而不改变 UI 的大小。

Constant Physical Size

这种模式下 UI 的物理大小(通常的单位是: millimeters、points、 或者 picas)将会保持不变,而显示的正确与否则取决于设备能否准确获取屏幕的 DPI。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

标签: