Unity3d UI自适应之Canvas Scaler详细说明和测试项目源码

2024-05-06 13:32:13

前言

UI在项目中必不可少，需求不一定都是16:9，各种比例分辨率的屏幕层出不穷，这样如何实现UI自适应这显得及其重要，这里我们就来讲解一下自适应中及其关键的Canvas Scaler。

说明

如下是官网给出的说明：

这里有三种缩放模式：

1.恒定像素模式（Constant Pixel Size）

无论屏幕大小如何，UI 元素都保持相同的像素大小。

2.根据屏幕缩放（Scale With Screen Size）

即：屏幕越大，UI 元素越大。

3.恒定物理尺寸（Constant Physical Size）

UI 元素无论屏幕大小和分辨率如何都保持相同的物理大小。

比较常用的是根据屏幕缩放（Scale With Screen Size），它有三种模式：

1. 匹配宽度或高度(Match Width or Height)

以宽度为参考、以高度为参考或介于两者之间的值来缩放画布区域。

2. 扩张(Expand)

水平或垂直扩展画布区域，因此画布的大小永远不会小于参考。

3. 收缩(Shrink)

水平或垂直裁剪画布区域，因此画布的大小永远不会大于参考。

搭建UI对比

这里我我们以1920*1080的参考比例搭建UI，将IU元素都设定锚点，然后通过切换不同的分辨率来看看变换的效果。

1.恒定像素模式

1920*1080 效果：

3000:100 效果：

可以看到无任何拉伸或者缩放，都是按设定的大小显示。

2.恒定物理尺寸

这个的UI因为必须按物理尺寸，左右两边中间的长条进行了缩短。
1920*1080 效果：

3000:100 效果：

都有一定的统一缩放，而且因为高度变化（1080->1000）左右两侧的间距变窄了一小点，其它也基本看不出什么变化。

3.根据屏幕缩放

这种模式下除了扩张和收缩模式，匹配宽度或高度可能有很多情况，这里就展示匹配高度、匹配宽度和匹配高宽0.5这三种情况。
而且所有根据屏幕缩放的情况都如下图：

1. 扩张

3000:100 效果：

这里可以看到，canvas的宽度进行了拓展（1920 --> 3240）,高度保持不变（1080）同时整体收缩了0.9259倍，UI基本正常。

2.收缩

3000:100 效果：

这里可以看到，canvas的高度进行了收缩（1080 --> 640）,宽度保持不变（1920）同时整体放大了1.5625倍。画面出现异常，左右两边居中的的绿色和橙色部分超出画面

3.匹配高度

3000:100 效果：

查看效果其实和扩张的效果是一致的。

4.匹配宽度

3000:1000 效果：

查看效果其实和收缩的效果是一致的。

5.匹配宽度高度

3000:1000 效果：

可以看到，canvas的宽度进行了收缩（1080 -->831）,高度进行放大（1920 --> 2494）同时整体放大了1.2倍。画面出现异常，左右两边居中的的绿色和橙色部分已经遮挡其它元素。

运行对比

上面进行了编辑器状态下的分辨率切换测试，下面进行打包发布后在800*600分辨率下查看效果。

1.恒定像素模式

效果：

由于窗体小，UI混乱。

2.恒定物理尺寸

效果：

由于窗体小，UI混乱。

3.根据屏幕缩放

这种模式下除了扩张和收缩模式，匹配宽度或高度可能有很多情况，这里就展示匹配高度、匹配宽度和匹配高宽0.5这三种情况。

1. 扩张

效果：

正常显示，只是有点分散。

2.收缩

效果：

正常显示。

由于窗体小，UI混乱。

3.匹配高度

效果：

正常显示

4.匹配宽度

效果：

正常显示，只是有点分散。

5.匹配宽度高度

效果：

正常显示。

总结

开发过程中常用的方式是根据屏幕大小适配，再配合锚点基本能满足常用的UI适配；如果项目可能是超宽屏幕，可以考虑高度匹配；如果项目使用环境在一定的分辨率范围内，可以考虑匹配高宽0.5的方式适配会更美观；如果不适配可以考虑恒定像素模式和恒定物理像素模式。

测试源码

这里将源码工程开放，更多的测试可以自行修改分辨率进行测试。

https://download.csdn.net/download/qq_33789001/19549118

Unity3d UI自适应之Canvas Scaler详细说明和测试项目源码相关推荐

Vue.js-Day06-PM【项目实战(附带完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
SpringMVC+Maven开发项目源码详细介绍
代码地址如下: http://www.demodashi.com/demo/11638.html Spring MVC概述 Spring MVC框架是一个开源的Java平台,为开发强大的基于Java的 ...
android+高仿+日历,项目源码--Android天气日历精致UI源码
技术要点: 1. 天气日历精致UI 2. Android的Http通信技术 3. Android的天气信息解析 4. Android的日历信息的统计 5. Andorid的地理位置的管理 6.源码带有 ...
ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)...
功能概述 Excel2HtmlTable的主要功能就是把Excel的内容以表格的方式,展现在页面中. Excel的多个Sheet对应页面的多个Tab选项卡. 转换算法的难点在于,如何处理行列合并,将E ...
HTML卡片式布局源码,html5自适应卡片式设计动态加载整站源码_
html5自适应卡片式设计动态加载整站源码该模板是非常容易存活的,这样的程序很容易吸引访客点击,提升ip流量和pv是非常有利的,随意挂点联盟广告都能养活程序. 本套整站源码采使用现在非常流行的全屏自 ...
大红喜庆版UI猜灯谜又叫猜字谜威信小程序源码下载
大家好给大家带来一款UI比较喜庆的猜灯谜小程序大家看演示图的时候当然也是可以看得到那界面是多么的喜庆这款小程序搭建是免服务器和域名的只需要使用威信开发者工具打开源码然后上传审核就可以了! 这款小 ...
unity3d游戏2d横版射击游戏完整项目源码分享
unity3d游戏2d横版射击游戏完整项目源码分享免费下载地址: 链接:https://pan.baidu.com/s/1YwhEy7DeKIHFU8pBLdJFPg 提取码:3wnx 复制这段内容 ...
unity3d游戏3d局域网联机吃球游戏完整项目源码分享
unity3d游戏3d局域网联机吃球游戏完整项目源码分享免费下载地址: 链接:https://pan.baidu.com/s/1APlOCmoK9aUfiVJD48dBQA 提取码:p5nl 复制这 ...
6个网页背景特效源码 canvas+three.js科技贴图 webgl源码
隧道穿梭特效粒子矩阵特效几何随机变换特效下载地址: 6个网页背景特效源码 canvas+three.js科技贴图 webgl源码-素材美
【Android数据存储】ContentProvider详细介绍（附实例源码）
1.ContentProvider是什么? ContentProvider--内容提供者.它是一个类,这个类主要是对Android系统中进行共享的数据进行包装,并提供了一组统一的访问接口供其他程序调用 ...

最新文章

热门文章