当前位置: 首页 > article >正文

【unity游戏开发入门到精通——UGUI】CanvasScaler画布缩放器组件

注意:考虑到UGUI的内容比较多,我将UGUI的内容分开,并全部整合放在【unity游戏开发——UGUI】专栏里,感兴趣的小伙伴可以前往逐一查看学习。

文章目录

  • 一、CanvasScaler画布缩放器组件是什么
  • 二、CanvasScaler的三种适配模式
    • 1、Constant Pixel Size 恒定像素大小模式
      • 1.1 参数介绍
        • (1)`Scale Factor`:缩放系数
        • (2)`Reference Pixels Per Unit`:单位参考像素
      • 1.2 实战
      • 1.3 总结
    • 2、Scale With Screen Size 屏幕大小缩放模式(`重要`)
      • 2.1 参数介绍
        • (1)Reference Resolution:参考分辨率
        • (2)Screen Match Mode:屏幕匹配模式
          • 1. Match Width Or Height 宽高匹配模式
          • 2. Expand 拓展模式
          • 3. Shrink 收缩模式
      • 2.2 总结
    • 3、Constant Physical Size 恒定物理模式
      • 3.1 参数介绍
        • (1)Physical Unit:物理单位
        • (2)Fallback Screen DPI:备用DPI,当找不到设备DPI时,使用此值
        • (3)Default Sprite DPI:默认图片DPI
      • 3.2 恒定像素模式和恒定物理模式区别
      • 3.3 总结
    • 4、World 世界模式(3D模式)
      • 4.1 参数介绍
        • (1)Dynamic Pixels Per Unit:每单位动态像素数
        • (2)Reference Pixels Per Unit:单位参考像素
      • 4.2 总结
  • 专栏推荐
  • 完结

一、CanvasScaler画布缩放器组件是什么

CanvasScaler意思是画布缩放控制器,它是用于分辨率自适应的组件。
在这里插入图片描述
它主要负责在不同分辨率下UI控件大小自适应,它并不负责位置,位置由之后会介绍的RectTransform组件负责。

它主要提供了三种用于分辨率自适应的模式,我们可以选择符合我们项目需求的方式进行分辨率自适应。
在这里插入图片描述

二、CanvasScaler的三种适配模式

在这里插入图片描述

  • Constant Pixel Size(恒定像素大小模式):无论屏幕大小如何,UI始终保持相同像素大小
  • Scale With Screen Size(缩放大小模式):根据屏幕尺寸进行缩放,随着屏幕尺寸放大缩小
  • Constant Physical Size(恒定物理大小模式):无论屏幕大小和分辨率如何,Ul元素始终保持相同物理大小

1、Constant Pixel Size 恒定像素大小模式

无论屏幕大小如何,UI始终保持相同像素大小。
在这里插入图片描述

1.1 参数介绍

(1)Scale Factor:缩放系数

用于指定Canvas中所有UI元素的全局缩放比例。
在这里插入图片描述

(2)Reference Pixels Per Unit:单位参考像素

定义了在Unity中一个单位对应多少个屏幕像素,默认情况下,一个单位通常被设定为100像素。这一参数与图片本身的Pixels Per Unit设置共同作用于UI元素的最终显示尺寸计算。具体可以参考:【零基础入门unity游戏开发——通用篇】Sprite图片相关设置
在这里插入图片描述

1.2 实战

默认UI大小
在这里插入图片描述
尝试把单位参考像素从100改成50
在这里插入图片描述
点击图片上设置原生大小,会发现图片缩小了一半。
在这里插入图片描述

1.3 总结

恒定像素模式,它不会让UI控件进行分辨率大小自适应,会让UI控件始终保持设置的尺寸大小显示。一般在进行游戏开发极少使用这种模式,除非通过代码计算来设置缩放系数。

2、Scale With Screen Size 屏幕大小缩放模式(重要

按屏幕大小缩放的模式(简称:缩放模式),最常用的模式。
在这里插入图片描述

2.1 参数介绍

(1)Reference Resolution:参考分辨率

缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算,可以填写常用的分辨率大小1920x1080

(2)Screen Match Mode:屏幕匹配模式

当前屏幕分辨率宽高比不适应参考分辨率时,用于分辨率大小自适应的匹配模式
在这里插入图片描述

  • Match Width Or Height:以宽高或者二者的平均值作为参考来缩放画布区域。
  • Expand:水平或垂直拓展画布区域,会根据宽高比的变化来放大缩小画布,可能有黑边。
  • Shrink:水平或垂直裁剪画布区域,会根据宽高比的变化来放大缩小画布,可能会裁剪。
1. Match Width Or Height 宽高匹配模式

以宽高或者二者的平均值作为参考来缩放画布区域。宽高匹配模式下可能会有裁剪也可能会有黑边,UI大小会保持不变的。主要用于只有横屏模式或者竖屏模式的游戏。
在这里插入图片描述

  • Match(匹配):确定用于计算的宽高匹配值。

最佳实战

  • 竖屏游戏:设置Match=0,将画布宽度设置为参考分辨率的宽度并保持比例不变,屏幕越高可能会有黑边
    在这里插入图片描述
  • 横屏游戏:设置Match=1,将画布高度设置为参考分辨率的高度并保持比例不变,屏幕越长可能会有黑边。
    在这里插入图片描述
2. Expand 拓展模式

水平或垂直拓展画布区域,会根据宽高比的变化来放大缩小画布,可能有黑边。最大程度的缩小UI元素,保留UI控件所有细节。
在这里插入图片描述

3. Shrink 收缩模式

水平或垂直裁剪画布区域,会根据宽高比的变化来放大缩小画布,可能会裁剪。最大程度的放大UI元素,让UI元素能够填满画面。
在这里插入图片描述

2.2 总结

游戏开发一般都使用Scale With Screen Size缩放模式。

使用建议

  • 存在横竖屏切换,选择Expand(拓展匹配,有黑边)和Shrink(收缩匹配,有裁剪)
  • 不存在横竖屏切换(定死的横屏或者竖屏游戏),使用Match Width or Height(宽高匹配)模式。横屏游戏Match=1,竖屏游戏Match=0
  • 存在横竖屏切换,其实也可以使用Match Width or Height(宽高匹配)模式,我们只需要书写代码,根据横竖屏判断,去动态的设置Match的值即可。
    在这里插入图片描述
    之前我写的XYFrame框架里封装UI系统时就很好的利用了这一点,具体参考:【unity框架开发10】从零手搓一个UI管理器/UI框架,自带一个提示界面,还有自带DOTween动画效果

3、Constant Physical Size 恒定物理模式

恒定物理尺寸模式(简称:恒定物理模式)
在这里插入图片描述

3.1 参数介绍

DPI是什么?:(Dots Per Inch,每英寸点数)图像每英寸长度内的像素点数

(1)Physical Unit:物理单位

使用的物理单位种类
在这里插入图片描述
在这里插入图片描述

(2)Fallback Screen DPI:备用DPI,当找不到设备DPI时,使用此值
(3)Default Sprite DPI:默认图片DPI

3.2 恒定像素模式和恒定物理模式区别

  • 相同点:他们都不会进行缩放,图片有多大显示多大,使用他们不会进行分辨率大小自适应。

  • 不同点

    • 恒定像素模式固定像素数量(如 5x5 像素),物理尺寸随 DPI 变化。 低 DPI 设备上显示更大(像素稀疏),高 DPI 设备上显示更小(像素密集)。
    • 恒定物理模式 固定物理尺寸(如 1x1厘米),动态调整像素数量以适应 DPI。 高 DPI 设备需要更多像素,低 DPI 设备需要更少像素。
      在这里插入图片描述

3.3 总结

恒定物理模式不会让UI控件进行分辨率大小自适应,会让UI控件始终保持设置的尺寸大小显示,而且会根据设备DP进行计算,让在不同设备上的显示大小更加准确。

一般在进行游戏开发极少使用这种模式

4、World 世界模式(3D模式)

其实CanvasScaler还有第四种适配模式——World 世界模式。当Canvas的渲染模式设置为世界空间3D渲染模式时,Canvas Scaler的缩放模式会强制变为World3D世界模式。
在这里插入图片描述

4.1 参数介绍

(1)Dynamic Pixels Per Unit:每单位动态像素数

UI中动态创建的位图(例如文本)中,单位像素数(类似密度)。

Dynamic Pixels Per Unit越大text文本的文字越清晰
在这里插入图片描述

(2)Reference Pixels Per Unit:单位参考像素

多少像素对应Unity中的一个单位(默认一个单位为100像素)。

4.2 总结

3D模式只有在3D渲染模式下才会启用的模式,主要用于控制该模式下的像素密度。该模式了解即可,一般不修改。


专栏推荐

地址
【unity游戏开发入门到精通——C#篇】
【unity游戏开发入门到精通——unity通用篇】
【unity游戏开发入门到精通——unity3D篇】
【unity游戏开发入门到精通——unity2D篇】
【unity实战】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】
【unity游戏开发——模型篇】
【unity游戏开发——InputSystem】
【unity游戏开发——Animator动画】
【unity游戏开发——UGUI】
【unity游戏开发——联网篇】
【unity游戏开发——优化篇】
【unity游戏开发——shader篇】

完结

好了,我是向宇,博客地址:https://xiangyu.blog.csdn.net,如果学习过程中遇到任何问题,也欢迎你评论私信找我。

赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!
在这里插入图片描述

相关文章:

【unity游戏开发入门到精通——UGUI】CanvasScaler画布缩放器组件

注意:考虑到UGUI的内容比较多,我将UGUI的内容分开,并全部整合放在【unity游戏开发——UGUI】专栏里,感兴趣的小伙伴可以前往逐一查看学习。 文章目录 一、CanvasScaler画布缩放器组件是什么二、CanvasScaler的三种适配模式1、Cons…...

Hugging Face 模型:AI 模型的“拥抱”与开源革命!!!

🌐 Hugging Face 模型:AI 模型的“拥抱”与开源革命 用表情符号、图表和代码,探索开源模型生态的底层逻辑与应用场景! 🌟 名字由来:为什么叫 Hugging Face? “Hugging”:象征 开放…...

关于 人工智能(AI)发展简史 的详细梳理,按时间阶段划分,涵盖关键里程碑、技术突破、重要人物及挑战

以下是关于 人工智能(AI)发展简史 的详细梳理,按时间阶段划分,涵盖关键里程碑、技术突破、重要人物及挑战: 字数:约2500字 逻辑结构:时间线清晰,分阶段描述技术突破、关键事件与挑战…...

微服务即时通信系统---(四)框架学习

目录 ElasticSearch 介绍 安装 安装kibana ES客户端安装 头文件包含和编译时链接库 ES核心概念 索引(Index) 类型(Type) 字段(Field) 映射(mapping) 文档(document) ES对比MySQL Kibana访问ES测试 创建索引库 新增数据 查看并搜索数据 删除索引 ES…...

Android查看依赖树的方法,简单有效

一、使用命令打印 在工具栏“Terminal”中输入以下命令,即可打印依赖树信息 gradlew xxxx:dependencies (“xxxx”为module名称)二、工具栏双击打印 右侧“Gradle”工具栏打开按下图顺序依次查找到“dependencies”,双击后依赖树就会在控制台中打印出…...

自动化测试工具playwright中文文档-------14.Chrome 插件

介绍 注意 插件仅在以持久化上下文启动的 Chrome/Chromium 浏览器中工作。请谨慎使用自定义浏览器参数,因为其中一些可能会破坏 Playwright 的功能。 以下是获取位于 ./my-extension 的 Manifest v2 插件背景页面句柄的代码示例。 from playwright.sync_api imp…...

GitHub配置密钥

1.生成SSH密钥 1)检查 SSH 密钥是否存在 首先,确认是否已经在本地系统中生成了 SSH 密钥对。可以通过以下命令检查: ls -al ~/.ssh 在命令输出中,应该能看到类似 id_rsa 和 id_rsa.pub 这样一对文件。如果这些文件不存在&#…...

【2-10】E1与T1

前言 之前我们简单介绍了人类从电话线思维到如今的数据报分组交换思维过渡时期的各种技术产物,今天我们重点介绍 E1/T1技术。 文章目录 前言1. 产生背景2. T13. E14. SONET4.1 OC-14.2 OC-3 及其它 5. SDH5.1. STM-1 6. SONET VS SDH后记修改记录 1. 产生背景 E1/…...

【设计模式】适配器模式:让不兼容的接口和谐共处

引言 在软件开发中,我们经常会遇到这样的情况:两个已经存在的接口无法直接协同工作,但我们又希望它们能够无缝对接。这时,适配器模式就派上用场了。适配器模式(Adapter Pattern)是一种结构型设计模式&…...

Servlet、HTTP与Spring Boot Web全面解析与整合指南

目录 第一部分:HTTP协议与Servlet基础 1. HTTP协议核心知识 2. Servlet核心机制 第二部分:Spring Boot Web深度整合 1. Spring Boot Web架构 2. 创建Spring Boot Web应用 3. 控制器开发实践 4. 请求与响应处理 第三部分:高级特性与最…...

PTA:古风排版

中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;<100&#xff09;&#xff0c;是每一列的字符数。第二行给出一个长度不超过1000的非空字符串&a…...

Android LiveData学习总结(源码级理解)

LiveData 工作原理 数据持有与观察者管理&#xff1a;LiveData 内部维护着一个数据对象和一个观察者列表。当调用 observe 方法注册观察者时&#xff0c;会将 LifecycleOwner 和 Observer 包装成 LifecycleBoundObserver 对象并添加到观察者列表中。生命周期感知&#xff1a;L…...

Pandas进行数据预处理(标准化数据)③

数据标准化处理代码解析 数据标准化处理代码解析课前预习1. 离差标准化&#xff08;Min - Max Scaling&#xff09;结果2. 标准差标准化&#xff08;Standard Scaling&#xff09;结果3. 小数定标标准化&#xff08;Decimal Scaling&#xff09;结果 代码整体概述代码详细解析1…...

vue里provide作用:将一组全局方法注入到 Vue 应用的所有子组件中

在 Vue.js 中&#xff0c; provide(mainFunc, {...}) 是依赖注入(Dependency Injection)的提供者(provider)部分&#xff0c;它的作用是&#xff1a; 功能说明 &#xff1a; 将一组全局方法注入到 Vue 应用的所有子组件中子组件可以通过 inject 接收这些方法 import { provi…...

基于uniapp 实现画板签字

直接上效果图 代码 <template><view class"container"><!-- 签名画布 --><view class"canvas-container"><canvas canvas-id"signCanvas" class"sign-canvas"touchstart"handleTouchStart"touc…...

JDBC 初认识、速了解

目录 一. JDBC的简介 1. 数据的持久化 2. 什么是JDBC 二. JDBC中常用的类和接口 1. Driver 接口 2. DriverManager 类 3. Connection 接口 4. Statement 接口 5. PreparedStatement接口 6. ResultSet 接口 三. 总结 前言 从现在开始就来讲解JDBC的相关知识了 本文的…...

(2025亲测可用)Chatbox多端一键配置Claude/GPT/DeepSeek-网页端配置

1. 资源准备 API Key&#xff1a;此项配置填写在一步API官网创建API令牌&#xff0c;一键直达API令牌创建页面创建API令牌步骤请参考API Key的获取和使用API Host&#xff1a;此项配置填写https://yibuapi.com/v1查看支持的模型请参考这篇教程模型在线查询 2. ChatBox网页版配…...

4.vtk光照vtkLight

文章目录 VTK中的光照1. vtkLight 的两种类型&#xff1a;位置光照和方向光照2. vtkLight 的常用方法3. 方法命名风格4. vtkProp 的可见性与 vtkLight 的开关 示例 VTK中的光照 vtkLight: 用于定义一个或多个光源。每个光源可以有其颜色、位置、焦点等属性。 vtkActor: 每个vtk…...

【速写】formatting_func与target_modules的细节(peft)

文章目录 SFTTrainer的构造参数版本差异怎么写formatting_func?关于lora_config中的target_modules能否在target_modules中指定特定某个模块&#xff1f; 以下面的示例pipeline为案&#xff1a; # -*- coding: utf8 -*- # author: caoyang # email: caoyangstu.sufe.edu.cnfr…...

YOLOv2学习笔记

YOLOv2 背景 YOLOv2是YOLO的第二个版本&#xff0c;其目标是显著提高准确性&#xff0c;同时使其更快 相关改进&#xff1a; 添加了BN层——Batch Norm采用更高分辨率的网络进行分类主干网络的训练 Hi-res classifier去除了全连接层&#xff0c;采用卷积层进行模型的输出&a…...

第十五届蓝桥杯----数字串个数\Python

目录 问题: 思想: 代码: 问题: Q:小蓝想要构造出一个长度为 10000 的数字字符串&#xff0c;有以下要求&#xff1a; 1) 小蓝不喜欢数字 0 &#xff0c;所以数字字符串中不可以出现 0 &#xff1b; 2) 小蓝喜欢数字 3 和 7 &#xff0c;所以数字字符串中必须…...

【YOLOv8改进 - 卷积Conv】PConv(Pinwheel-shaped Conv): 风车状卷积用于红外小目标检测, 复现!

YOLOv8目标检测创新改进与实战案例专栏 专栏目录: YOLOv8有效改进系列及项目实战目录 包含卷积,主干 注意力,检测头等创新机制 以及 各种目标检测分割项目实战案例 专栏链接: YOLOv8基础解析+创新改进+实战案例 文章目录 YOLOv8目标检测创新改进与实战案例专栏介绍摘要文章链…...

LeetCode:链表

160. 相交链表 /*** 单链表的定义* Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public ListNode getIntersectionN…...

Dockerfile项目实战-单阶段构建Vue2项目

单阶段构建镜像-Vue2项目 1 项目层级目录 以下是项目的基本目录结构&#xff1a; 2 Node版本 博主的Windows电脑安装了v14.18.3的node.js版本&#xff0c;所以直接使用本机电脑生成项目&#xff0c;然后拷到了 Centos 7 里面 # 查看本机node版本 node -v3 创建Vue2项目 …...

音视频小白系统入门笔记-0

本系列笔记为博主学习李超老师课程的课堂笔记&#xff0c;仅供参阅 音视频小白系统入门课 音视频基础ffmpeg原理 绪论 ffmpeg推流 ffplay/vlc拉流 使用rtmp协议 ffmpeg -i <source_path> -f flv rtmp://<rtmp_server_path> 为什么会推流失败&#xff1f; 默认…...

Zabbix 简介+部署+对接Grafana(详细部署!!)

目录 一.Zabbix简介 1.Zabbix是什么 2.Zabbix工作原理&#xff08;重点&#xff09;​ 3.Zabbix 的架构&#xff08;重点&#xff09;​ 1.服务端 2.客户端&#xff1a; 4.Zabbix和Prometheus区别 二.Zabbix 部署 1.前期准备 2.安装zabbix软件源和组件 3.安装数据库…...

C++: Initialization and References to const 初始化和常引用

cpp primer 5e, P97. 理解 这是一段很容易被忽略、 但是又非常重要的内容。 In 2.3.1 (p. 51) we noted that there are two exceptions to the rule that the type of a reference must match the type of the object to which it refers. The first exception is that we …...

Ubuntu2404装机指南

因为原来的2204升级到2404后直接嘎了&#xff0c;于是要重新装一下Ubuntu2404 Ubuntu系统下载 | Ubuntuhttps://cn.ubuntu.com/download我使用的是balenaEtcher将iso文件烧录进U盘后&#xff0c;使用u盘安装&#xff0c;默认选的英文版本&#xff0c; 安装后&#xff0c;安装…...

职坐标:智慧城市未来发展的核心驱动力

内容概要 智慧城市的演进正以颠覆性创新重构人类生存空间&#xff0c;其发展脉络由物联网、人工智能与云计算三大技术支柱交织而成。这些技术不仅推动城市治理从经验决策转向数据驱动模式&#xff0c;更通过实时感知与智能分析&#xff0c;实现交通、能源等领域的精准调控。以…...

DAY 45 leetcode 28的kmp算法实现

KMP算法的思路 例&#xff1a; 文本串&#xff1a;a a b a a b a a f 模式串&#xff1a;a a b a a f 两个指针分别指向上下两串&#xff0c;当出现分歧时&#xff0c;并不将上下的都重新回退&#xff0c;而是利用“next数组”获取已经比较过的信息&#xff0c;上面的指针不…...