UGUI-- Canvas Scaler 分辨率自适应组件

1、CanvasScaler是什么

用于分辨率自适应的画布缩放控制器，主要负责在不同分辨率下UI控件大小自适应，并不负责位置，位置由之后的RectTransform组件负责，提供了3种分辨率自适应的模式

2、基本概念：

（1）屏幕分辨率：Game窗口中的Stats统计数据窗口看到的当前“屏幕”分辨率（Screen）会参与分辨率自适应的计算

（2）画布大小和缩放系数：选中Canvas对象后在RectTransform组件种看到的宽高和缩放（Width，Height，Scale）

宽高 * 缩放系数 = 屏幕分辨率

（3）Reference Resolution：参考分辨率，在缩放模式的宽高模式中（UI Scale Mode = Scale With Screen Size）出现的参数，参与分辨率自适应的计算

总结：

屏幕分辨率——当前设备的分辨率，编辑器下Game窗口中可以看到

参考分辨率——在Scale With Screen Size适配模式中出现的关键参数，参与分辨率自适应的计算

画布宽高和缩放系数——分辨率自适应会改变的参数，通过屏幕分辨率和参考分辨率计算而来

分辨率大小自适应——通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数，该系数会影响所有UI控件的缩放大小

3、CanvasScaler的三种适配模式

（1）Constant Pixel Size（恒定像素模式）：无论屏幕大小如何，UI始终保持相同像素大小

Scale Factor：缩放系数，按此系数缩放画布中的所有UI元素

改变时，Canvas下的各个对象的Scale不会改变，但是Canvas的宽高和缩放系数会改变

Reference Pixels Per Unit：单位参考像素，多少像素对用Unity中的一个单位（默认要给单位为100像素），图片设置中的Pixels Per Unit设置，会和该参数一起参与计算

恒定像素模式的计算公式：

UI原始尺寸 = 图片大小（像素） / （Pixels Per Unit / Reference Pixels Per Unit)

Pixels Per Unit 属性显示在图片的 Inspector 窗口中

该计算公式会影响 Set Native Size 之后的图片大小（Set Native Size 即将图片恢复为“UI原始尺寸”）

注意：如果想让图片显示在 Image 对象上，需要将图片拖到 Image 的 Source Image 属性上，但需要先将图片的类型，即图片的 Inspector 窗口中的 Texture Type 修改为 Sprite ，然后点击 Apply后（此时图片文件前会有一个箭头符号）才能进行以上操作

在该模式下不会进行分辨率大小的自适应，会让UI始终保持设置的尺寸大小，无论Game窗口如何缩放，相应的UI大小都不会改变，一般在进行游戏开发时极少使用这种模式，除非通过代码计算来设置缩放系数，即：

可以通过代码得到屏幕分辨率，通过该分辨率可以计算得到相应的缩放系数，然后通过一定的规则计算新的缩放系数，通过代码设置Canvas的Scale Factor属性，就可以在该模式下对不同的分辨率改变UI的大小

（2）Scale With Screen Size（缩放模式）：根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小，最常用的模式

Reference Resolution：参考分辨率（美术方面出图的标准分辨率）

缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算

Screen Match Mode：屏幕匹配模式，当前屏幕分辨率宽高比不适用参考分辨率时（例如1920*1080的宽高比为16：9），用于分辨率大小自适应的匹配模式：

Expand：水平或垂直拓展画布区域，会根据宽高比的的变化放大缩小画布，可能有黑边：

该模式会将Canvas Size（即Canvas的宽和高）进行宽或高扩大，让它高于参考分辨率，计算公式是：

缩放系数（Scale) = Mathf.Min(屏幕宽/参考分辨率宽，屏幕高/参考分辨率高）;

画布尺寸=屏幕尺寸（即屏幕分辨率）/缩放系数

表现效果：最大程度的缩小UI元素，保留UI控件所有细节，可能会留有黑边（即有多余的画布不显示任何内容，如果过宽，两侧黑边，如果过窄，上下黑边）

eg：假设参考分辨率为（1920，1080），屏幕分辨率为800*600，那么

缩放系数= Mathf.Min(800/1920,600/1080) = 0.41667

画布尺寸=（800，600）/0.41667=（1920，1440）

Shrink：水平或垂直裁剪画布区域，会根据宽高比的变化来放大缩小画布，可能会裁剪

该模式将Canvas Size进行宽或高收缩，让他低于参考分辨率，计算公式是：

缩放系数（Scale) = Mathf.Max(屏幕宽/参考分辨率宽，屏幕高/参考分辨率高）;

画布尺寸=屏幕尺寸/缩放系数

表现效果：最大程度的放大UI元素，让UI元素能够填充满画面，可能会出现裁剪

Match Width Or Height：以宽高或者二者的平均值作为参考来缩放画布区域

Match：确定用于计算的宽高匹配值

计算公式：

// 取平均值之前，先取相对宽度和高度的对数

float logWidth = Mathf.Log(屏幕宽/参考分辨率，2）

float logHeight = Mathf.Log(屏幕高/参考分辨率，2）

// 在对数空间中变换是为了获得更好的性能以及更准确的结果

float logWeightedAverage = Mathf.Log(logWidth,logHeight,m_MatchWidthOrHeight)

scaleFactor = Mathf.Pow(2, logWeightedAverage)

表现效果：

主要用于只有横屏模式或者竖屏模式的游戏，

竖屏游戏：Match = 0

将画布宽度设置为参考分辨率的宽度，并保持比例不变，调整Game窗口高度，UI大小不会改变，屏幕越高可能会有黑边，越矮可能会被裁剪

横屏游戏：Match = 1

将画布高度设置为参考分辨率的高度，并保持比例不变，调整Game窗口宽度，UI大小不会改变，屏幕越长可能会有黑边，越短可能会被裁剪

（3）Constant Physical Size（恒定物理模式）：无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小（与恒定像素模式基本相同，只不过添加了不同的算法）

DPI：（Dots Per Inch，每英寸点数）图像每英寸长度内的像素点数，即像素密度，两个拥有相同分辨率的不同尺寸大小的屏幕的DPI是不同的，屏幕小的DPI更高

Physical Unit：物理单位，使用的物理单位种类

计算公式：根据DPI算出新的Reference Pixels Per Unit（单位参考像素）

换算：1 英寸 = 2.54 cm = 25.4 mm = 72 point = 6 picas （即Physical Unit)

新单位参考像素 = 单位参考像素 * Physical Unit / Default Sprite DPI

再使用模式一：恒定像素模式的公式进行计算：

原始尺寸 = 图片大小（像素） / （Pixels Per Unit / 新单位参考像素）

Fallback Screen DPI：备用DPI，当找不到设备DPI时，使用此值

Default Sprite DPI：默认图片DPI

恒定像素模式与恒定物理模式的区别：

相同点：都不会进行缩放，图片有多大显示多大，不会进行分辨率大小的自适应

不同点：相同尺寸不同DPI设备像素点区别，像素点越多细节越多，同样像素，DPI较低的设备看起来的尺寸可能会大于DPI较高的设备。

举个例子：同样是1920*1080的分辨率，手机的DPI高于电脑的DPI，那么一个图片如果是5个像素点的长度，在恒定像素模式中电脑上的长度是大于手机上5个像素点的长度的，此时两者显示的大小就不一样，而恒定物理模式就是为了让手机和电脑上显示效果在视觉上长度是相同的

特殊模式：3D模式

当Canvas的渲染模式设置为World Space，即世界空间3D渲染模式时，这时 Canvas Scaler的UI Scale Mode缩放模式会强制变为World 3D世界模式

Dynamic Pixels PerUnit：UI中动态创建的位图（例如文本Text）中，单位像素数（类似密度）

Reference Pixels Per Unit：单位参考像素，多少像素对应Unity中的一个单位（默认一个单位为100像素）

主要用于控制该模式下的像素密度

UGUI-- Canvas Scaler 分辨率自适应组件相关推荐

UGUI中的Canvas、Camera和Canvas Scaler
原文:http://www.jianshu.com/p/96fd1fbe8409 投影空间和屏幕空间先不说UI,如果是一个普通渲染流程,一个Cube普通地被渲染. 800X600的屏幕中,右边的Cu ...
Unity3d UGUI 实现底部UI自适应的功能（含工程）
Unity3d UGUI 实现底部UI自适应的功能(含工程) 前言 UI的自适应常常在项目中使用到,特别手游中,不同比例屏幕的手机,如果能考一套UI自适应显示,能省去不少的开发工作量.这里只是浅浅的讨 ...
Unity UGUI - Canvas / Camera
1.Canvas: 1)Render Mode : Screen Space -Camera 2)Render Camera : UICamera(自己创建的相机) 3)Plane Distance ...
UGUI Canvas
Render Mode Screen Space - Overlay 在此模式下不会参照到Camera,UI直接显示在任何对象之上 1.Pixel Perfect:可以使图像更清晰,但是有额外的性能开 ...
解决flex4 分辨率自适应问题
解决flex4 分辨率自适应问题参考文章: (1)解决flex4 分辨率自适应问题 (2)https://www.cnblogs.com/lost-1987/articles/3502321.htm ...
RANet：MSDNet加强版！清华黄高团队提出分辨率自适应的高效推理网络RANet！
关注公众号,发现CV技术之美本文分享论文『Resolution Adaptive Networks for Efficient Inference』,由清华黄高团队提出分辨率自适应的高效推理网络RA ...
Android程序对不同手机屏幕分辨率自适应的总结
各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x320,另外的还有QVGA=320x240.当然还有魅族M9的D ...
Unity 之 UGUI Dropdown下拉选单组件详解
Unity 之 UGUI Dropdown下拉选单组件详解 1,属性面板 1), Dropdown的组成 2,代码操作 3,使用实例 1), 控制菜单展开方向 4,相关扩展 1), Lua中动态添加O ...
移动端h5开发分辨率自适应
在做H5开发时,都会遇到屏幕分辨率自适应问题,那么怎么更好地让页面自适应? 这里介绍一种用js计算屏幕宽度+rem单位的方法(网易新闻在用) 不同手机有不同的分辨率,UI在做设计图的时候大都会以iPh ...
Cocos2dx游戏开发系列笔记9：android手机上运行《战神传说》，并解决横竖屏即分辨率自适应问题
转载:http://blog.csdn.net/iamlazybone/article/details/17191539 懒骨头(http://blog.csdn.net/iamlazybone Q ...

UGUI-- Canvas Scaler 分辨率自适应组件

1、CanvasScaler是什么

2、基本概念：

3、CanvasScaler的三种适配模式

（1）Constant Pixel Size（恒定像素模式）：无论屏幕大小如何，UI始终保持相同像素大小

（2）Scale With Screen Size（缩放模式）：根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小，最常用的模式

（3）Constant Physical Size（恒定物理模式）：无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小（与恒定像素模式基本相同，只不过添加了不同的算法）

特殊模式：3D模式

UGUI-- Canvas Scaler 分辨率自适应组件相关推荐

最新文章

热门文章