UGUI基础游戏对象Canvas

一.画布Canvas对象概述

 

画布是一种带有画布组件的游戏对象,所有 UI 元素都必须是此类画布的子项。

创建新的 UI 元素(如使用菜单 GameObject > UI > Image 创建图像)时,如果场景中还没有画布,则会自动创建画布。UI 元素将创建为此画布的子项。

画布区域在 Scene 视图中显示为矩形。这样可以轻松定位 UI 元素,而无需始终显示 Game 视图。

画布中的 UI 元素按照它们在 Hierarchy 中显示的顺序进行深度优先绘制。

二. CanVas组件

Canvas组件的作用是控制画布对象的渲染方式,展开RenderMode下拉框,有三个选项:

A. Screen Space - OverLay模式

设置此模式后,画布将出现在屏幕最前方。通常2D游戏会采用这种渲染方式。

沿Z轴拖动摄像机,画布位置始终不变,且画布不可移动。在场景中画布到摄像机之间有个cube,game视图中画布挡住了cube。

B. Screen Space - Camera模式

设置此模式后,画布将出现在摄像头前方固定距离处。

沿Z轴拖动摄像机,画布位置随摄像机移动,且画布不可直接移动,game视图中cube可以挡住了画布。实际游戏开发中通常会采用这种方式。(在UI上显示3D模型)

C.  World Space模式

设置此模式后,画布将可以进行变换,此模式对于要成为世界一部分的 UI 非常有用,主要用于VR。

三. Canvas Scaler组件

画布缩放器组件用于控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容,包括字体大小和图像边框。有三种缩放模式可供选择

对于设置为“Screen Space - Overlay”或“Screen Space - Camera”的画布,画布缩放器 UI Scale Mode 可以设置为 Constant Pixel Size、Scale With Screen Size 或 Constant Physical Size。

3.1 Constant Pixel Size(恒定像素模式)

模式定义:无论屏幕大小如何,UI始终保持相同像素大小

ScaleFactor:缩放系数,按此系数缩放UI中的所有元素

Reference Pixels Per Unit:如果精灵具有此“Pixels Per Unit”设置,则精灵中的每个像素将覆盖 UI 中的一个单位。

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

验证:将128x128的图的Pixels Per Unit设为60,Canvas中设置成恒定像素模式后,Reference Pixel Per Unit设为30,用128X128的图创建一个image,点击set Native Size后,image尺寸为64x64。

缺点:当处于恒定像素模式时,改变屏幕的大小,其中的图片是固定大小不变的。它不会让UI控件进行分辨率大小自适应,会让UI控件始终保持设置的尺寸大小显示。一般极少使用这种模式,除非通过代码计算来设置缩放系数。

3.2 Scale With Screen Size(缩放模式)

这种缩放模式下的UI位置是根据屏幕的分辨率和设置的宽高比来调整UI的位置的,通常做屏幕UI自适应的时候都需要调整到这个缩放模式下。

Reference Resolution:UI 布局设计的目标分辨率。如果屏幕分辨率较大,则 UI 会放大,如果较小,则 UI 会缩小

Screen Match Mode:设置当屏幕分辨率(游戏视图)与参照分辨率的宽高比不同时,画布如何缩放

Expand:水平或垂直拓展画布区域,可能有黑边

Shrink:水平或垂直拓展画布区域,可能会裁剪

Match Width Or Height:根据match设定的值,使用宽和高的混合值来缩放,实测match为0时效果等同于Expand,match为1时效果等同于Shrink

3.3 Constant Physical Size(恒定物理尺寸)

使用 Constant Physical Size 模式时,可按物理单位(如毫米、点或派卡)指定 UI 元素的位置和大小。此模式要求设备正确报告其屏幕 DPI。对于不报告 DPI 的设备,可以指定回退 DPI。

恒定像素 与 恒定物理区别
相同点:UI不缩放 不自适应
不同点:相同尺寸 不同DPI设备下
同样的长度下 DPI大的像素多 每个像素的长度就小
DPI小的像素少 每个像素的长度就大
恒定像素 切换到不同DPI环境下 图片的像素不变化 但显示的尺寸变化
恒定物理 切换到不同DPI环境下 图片的像素和尺寸不变化

3.4 World Space

对于设置为“World Space”的画布,可以使用画布缩放器来控制画布中 UI 元素的像素密度。

四.Graphic Raycaster组件

简单说这个组件用于控制画布中的事件。若移除这个组件后,画布内的按钮将不可点击。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/70003.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue基础知识四:Vue实例挂载的过程

一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么? 过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等 一、分析 首先找到vue的构造函数 源码位置:src\core\instance\…

RocketMQ双主双从同步集群部署

🎈 作者:互联网-小啊宇 🎈 简介: CSDN 运维领域创作者、阿里云专家博主。目前从事 Kubernetes运维相关工作,擅长Linux系统运维、开源监控软件维护、Kubernetes容器技术、CI/CD持续集成、自动化运维、开源软件部署维护…

rocketMq启动broker报错找不到或无法加载主类 Files\Java\jdk1.8.0_171\lib\dt.jar;C:\Program]

假如弹出提示框提示‘错误: 找不到或无法加载主类 xxxxxx’。 1.打开runbroker.cmd 将"%CLASSPATH%"加上英文双引号,切勿别加中文双引号 2.打开runserver.cmd 同理 将"%CLASSPATH%"加上英文双引号,切勿别加中文双引号 3.正常执行即…

音视频学习-音视频基础

文章目录 一、 音视频录制原理二、音视频播放原理三、图像基础概念1.像素2.分辨率3.位深4.帧率5.码率6.Stride跨距 四、RGB、YUV1.RGB2.YUV1. 4:4:4格式2. 4:2:2格式3. 4:2:0格式4. 4:2:0数据格式对比 3.RGB和YUV的转换4.YUV Stride对齐问题 五、视频的主要概念1.基本概念2.I P…

数据结构:栈和队列(超详细)

目录 ​编辑 栈: 栈的概念及结构: 栈的实现: 队列: 队列的概念及结构: 队列的实现: 扩展知识: 以上就是个人学习线性表的个人见解和学习的解析,欢迎各位大佬在评论区探讨&#…

零售行业供应链管理核心KPI指标(三)

完美订单满足率和退货率 完美订单满足率有三个方面的因素影响:订单按时、足量、无损交货。通常情况下零售企业追求线上订单履行周期慢慢达到行业平均水平,就是交付的速度变快了,这个肯定是一件好事情,趋势越来越好。 同时&#…

星际争霸之小霸王之小蜜蜂(一)

目录 前言 一、安装pygame库 1、pygame库简介 2、在windows系统安装pygame库 二 、搭建游戏框架 1、创建游戏窗口 2、改变窗口颜色 总结 前言 大家应该都看过或者都听说过python神书“大蟒蛇”,上面有一个案例是《外星人入侵》,游戏介绍让我想起了上…

2022年电赛C题——小车跟随行驶系统——做题记录以及经验分享

前言 自己打算将做过的电赛真题,主要包含控制组的,近几年出现的小车控制题目,自己做过的真题以及在准备电赛期间刷真题出现的问题以及经验分享给大家 这次带来的是22年电赛C题——小车跟随行驶系统,这道题目指定使用的是TI的单片…

Python web实战之Django 的跨站点请求伪造(CSRF)保护详解

关键词:Python、Web、Django、跨站请求伪造、CSRF 大家好,今天我将分享web关于安全的话题:Django 的跨站点请求伪造(CSRF)保护,介绍 CSRF 的概念、原理和保护方法. 1. CSRF 是什么? CSRF&#…

自动化安装系统(二)

利用PXE实现自动化安装 PXE简介 PXE:Preboot Excution Environment,预启动执行环境,是由Intel公司研发,基于Client/Server的网络模式,支持远程主机通过网络从远端服务器下载映像,并由此支持通过网络启动操…

web连接桌面打开gptmap

一:环境配置 需要的材料: python-3.10.4 我使用的是这个版本的,3.8.10 该版本和以下版本组件组合,验证过能正常运行(python 3.6.8测试异常) websockify 该项目有python版本和node js版本 noVNC 形式的app…

深入解析 Axios Blob 的使用方法及技巧

在 Web 开发中,处理文件传输是一个常见的需求。Blob(二进制对象)是一种表示二进制数据的方式,常用于处理文件和多媒体数据。本文将介绍如何使用 Axios 和 Blob 来处理文件传输。 Axios Blob 概念 在开始之前,让我们先…