UGUI进阶组件[二]CanvasScaler

UI屏幕分辨率适配中CanvasScaler也是一个比较重要的组件
这里对里面的知识点进行实验和讲解
毕竟官方文档说的很泛泛
所以unity又出了一个解释文档
这里加入一个写的比较优秀的文章 UGUI中的Canvas、Camera和Canvas Scaler
在这里插入图片描述
CanvasScaler组件一般在UI根物体上面会有,对它的子UI元素的影响比较大

CanvasScaler里面有三种模式

在这里插入图片描述
这三种模式是在Canvas组件的RenderMode不是WorldSpace的时候有的,还有一种模式World是Canvas组件的RenderMode是WorldSpace时候的,在这三种模式介绍完之后会进行介绍

Constant Pixel Size
字面意思就是不管屏幕尺寸如何变化,子UI元素都保持固定的宽高大小
Scale With Screen Size
字面意思是子UI元素的尺寸跟随屏幕尺寸进行变化
Constant Physical Size
字面意思就是让子UI元素忽略屏幕的尺寸和分辨率保持物理尺寸大小

这里第三种比较少用到,这里不解释

Constant Pixel Size

在这里插入图片描述
这种模式下的 不管屏幕大小是多少 UI一般不会改变 就是说 一个既定像素大小值的元素 即使屏幕变成1*1的大小 这个元素的大小值也不会变。这种模式下的参数比较简单 只有两个,而且Reference Pixels Per Unit是与Scale With Screen Size模式共用的。

Reference Pixels Per Unit
官方的解释比较简单
在这里插入图片描述
这个参数与导入U3D的图片的PixelsPerUnit是有关系的。

在这里插入图片描述
经过试验发现PixelsPerUnit和Reference Pixels Per Unit代表的都是一个unity单位对应多少像素

  • PixelsPerUnit与Reference Pixels Per Unit相等

比如图片的PixelsPerUnit设置的是10,则图片对应的128个像素对应的unit单位值是12.8个,在CanvasScale里面的 Reference Pixels Per Unit也设置成10 的时候,Image组件的SetNativeSize按钮会让图片以真实像素显示,这是因为 Reference Pixels Per Unit设置成10表示的意思就是10个像素对应一个unity单位,所以图片里面的长宽各12.8个单位转换后的像素单位就是图片的真实尺寸128px*128px

在这里插入图片描述

  • PixelsPerUnit比Reference Pixels Per Unit大

按照上条的规则,如果图片的PixelsPerUnit设置的是10,CanvasScaler里面的 Reference Pixels Per Unit也设置成1,则图片对应12.8个unity单位,但是CanvasScaler的子物体的里面一个unity单位只对应一个像素值,那么SetNativeSize之后图片将只能转换12.8px*12.8px的大小
在这里插入图片描述

  • PixelsPerUnit比Reference Pixels Per Unit小
    如果图片的PixelsPerUnit设置的是1,CanvasScaler里面的 Reference Pixels Per Unit也设置成10,则SetNativeSize之后图片将会变成1280px*1280px

Scale Factor
在这里插入图片描述
字面意思就是在Canvas下面的ui元素的大小缩放受到这个参数的影响

一般在Constant Pixel Size模式下 调节UI尺寸用的就是这样一个参数了
这个参数一般是在既定的屏幕分辨率,比如1920*1080情况下 ,在CanvasScaler下面再挂一个脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test2 : MonoBehaviour
{
    //在Constant Pixel Size模式下
    //UI 摆拼是在下面两个既定的标准分辨率下进行摆放好的
    public const float standardWidth = 1920f;
    public const float standardHeight = 1080f;


    // Start is called before the first frame update
    void Start()
    {
        //标准分辨率下的scaleFactor
        float curSclRatio = GetComponent<CanvasScaler>().scaleFactor;
        float wChangeRatio = Screen.width / standardWidth * curSclRatio;
        float hChangeRatio = Screen.height / standardHeight * curSclRatio;

        ChangeUIScale(wChangeRatio);
    }

    /// <summary>
    /// 在合适的时候进行调用这个方法
    /// 根据当前屏幕与标准屏幕的宽或高的比例
    /// 调节scaleFactor的值 
    /// </summary>
    /// <param name="wChangeRatio"></param>
    private void ChangeUIScale(float wChangeRatio)
    {
        GetComponent<CanvasScaler>().scaleFactor = wChangeRatio;
        //GetComponent<CanvasScaler>().scaleFactor = hChangeRatio;
    }

}

在这里插入图片描述
在Canvas所在物体没有挂载CanvaseScaler的时候,默认采用的缩放方法是Constant PixelSize

Scale With Screen Size

官方的解释是这样的
在这里插入图片描述
文档下面还有一段话
在这里插入图片描述
经过实验验证也确实和这段话说的一致,这段话的大体意思是屏幕宽高比和参考宽高比一致的情况下,Canvas所在物体的宽和高都会保持在参考宽高比的大小,唯一不一样的是物体会通过改变scale来达到适配屏幕的目的。
如果屏幕宽高比与参考宽高比不一致,为了达到与参考宽高比而各个方向独立互不影响的缩放会导致与预期不一样的不均匀缩放结果,所以CanvasScaler没有这样做,他们代替做的是往屏幕分辨率靠齐。通过设置ScreenMatckMode可以设置在这种情况下,Unity会怎样往屏幕分辨率靠齐。

ReferencePixels就不解释了 是通用的,解释一下其他几个参数的意义

初始设置如下图,游戏画面分辨率和参考分辨率都是800*600

在这里插入图片描述
然后将屏幕分辨率调节到1500*700,Shrink模式如下图所示
在这里插入图片描述
这结果和MatchWidthOrHeight模式下的将Match调节到偏向Width是一样的,
在这里插入图片描述

再看下屏幕分辨率调节到1500700,Expand模式如下图所示
在这里插入图片描述
这结果和MatchWidthOrHeight模式下的将Match调节到偏向Height是一样的
在这里插入图片描述
再将屏幕分辨率调节到600
600分辨率下,看下Shrink模式下
在这里插入图片描述
这结果和MatchWidthOrHeight模式下的将Match调节到偏向Height是一样的

再看下Expand模式
在这里插入图片描述
这结果和MatchWidthOrHeight模式下的将Match调节到偏向Width是一样的

在屏幕分辨率1500 * 500,以及参考分辨率是 400 * 800等其他一些情况下,测试结果也是和上面的规律一样

小结:在Scale With Screen Size模式下,所有的UI在参考分辨率下摆放好,如果屏幕分辨率的宽高比与参考分辨率的宽高比不一样的情况下,Expand模式以及MatchWidthOrHeight模式下的将Match调节到偏向Width都是将Height调节到与参考分辨率一致,然后Canvas所在的rectTransform的宽高比和当前屏幕分辨率的宽高比一致,Canvas再在此宽高下调节scale来适配屏幕;而Shrink模式以及MatchWidthOrHeight模式下的将Match调节到偏向Height都是将Width调节到与参考分辨率一致,然后Canvas所在的rectTransform的宽高比和当前屏幕分辨率一致,Canvas再在此宽高下调节scale来适配屏幕。其实在Scale With Screen Size下,Canvas所在物体的RectTransform的屏幕分辨率宽高比一直都是与屏幕的一致,只是看Match参数调节看当前是往参考宽度还是参考高度看齐

World Space

World模式下不能设置Canvas的Scale值,此时能设置的一个值为Dynamic Pixels Per Unit。这个值目前看来是控制Text在世界UI下时显示的清晰度的,该值越大,相同Text显示的越清晰。

发布了84 篇原创文章 · 获赞 13 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43149049/article/details/103318101
今日推荐