Unity技术手册-UGUI零基础详细教程-Canvas详解

news2025/1/19 14:32:01
  • 点击跳转专栏=>Unity3D特效百例
  • 点击跳转专栏=>案例项目实战源码
  • 点击跳转专栏=>游戏脚本-辅助自动化
  • 点击跳转专栏=>Android控件全解手册
  • 点击跳转专栏=>Scratch编程案例
  • 点击跳转=>软考全系列
  • 点击跳转=>蓝桥系列

👉关于作者

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)
有什么需要欢迎底部卡片私我,获取更多支持,交流让学习不再孤单

在这里插入图片描述

👉前提

这是小空坚持写的Unity新手向系列,欢迎品尝。

小空为了方便更多的人(新手)看明白,使用的汉字,真实项目尽量使用英文规则昂。

新手(√√√)

大佬(√)

👉Canvas三种渲染方式

Canvas是展示UI的基础,所有U控件都必须是其子类,所以我们需要详细知道该组件的功能。
当你创建一个UI控件时,如果在Hierarchy(层级窗口)下没有Canvas组件的话,Unity会帮你自动创建一个Canvas,并将你的UI控件放于Canvas下,同时还会自动创建一个EventSystem,这个对象很重要,她是用来处理各种鼠标输入的事件的,是必不可少的一个功能。
在这里插入图片描述

😜Screen Space – Overlay,多用于 3D 游戏

这也是默认模式,这种渲染模式表示Canvas总会铺满整个屏幕,所有的UI控件不管如何永远在屏幕最前面,多数用在是页面效果。
Pixel Perfect:在Canvas中的模糊效果消失,变得相对清晰,主要是会让UI边缘锐利。
Sort Order:的值用来决定不同的Canvas的层级效果,谁的值越大谁在前面。
Target Display:目标显示器

😜Screen Space – Camera,多用于 2D 游戏

这个模式是将画布Canvas全权交给了摄像机来渲染,多个相机的渲染顺序,相机类型等都会对该Canvas的UI内容有影响。此模式下画布的RectTransform不可编辑完全受到相机的ViewPort Rect影响。
这个模式要参考相机,UI和相机的距离。例如,因为linerender是3D的,要把linerender显示在UI层前面才能看见,此时就需要此模式,并且把UI距离调到比linerender Z轴更远处。
如实现在UI层上面绘制linerender(线条渲染),要想看到线条,就得把UI的距离调整的比linerender Z轴还要远。再比如摄像机和 Canvas 之间播放一些粒子特效,一些3D效果。
Pixel Perfect:在Canvas中的模糊效果消失,变得相对清晰,主要是会让UI边缘锐利。
Render Camera(指定相机):在没有指定摄像机的时候,和Sreen Overlay效果完全一样。指定了摄像机以后,画布会自动调整到相机可视范围内,比Canvas更靠近相机的3Dobject会被渲染在前面,比Canvas远离相机的3dObject会被遮挡
Plane Distance:表示画布Canvas距离相机的距离。
Sorting Layer:排序层,可以选择其他排序层
Order in Layer:设置Canvas在指定Sorting Layer排序层中的层级关系,谁的值越大谁在前面。和Sort Order一样。显示优先级显示Sorting Layer(谁级高谁在前)再是Order in Layer(同Sorting Layer谁大谁在前)确定。
在这里插入图片描述
如果相机是透视模式(Projection为Perspective)的话,可以调整Canvas内某些元素的旋转角度,产生透视和深度效果。
而且可以通过不同相机的sorting layer和渲染的图层来实现在UI上方的粒子特效等不错的效果。
在这里插入图片描述

😜 World Space,世界控件模式

这种模式下的Canvas和普通的3D物体没什么区别,将UI视为平面渲染。其他对象可以位于UI后面、中间穿透、前面等各种位置。画布大小取决于与相机视角和距离。可以随意控制它的大小,旋转,缩放等属性。如
我们创建个Cube,然后在个Canvas将其放到Cube的子集中,然后在Canvas下创建一个Text,简单的人物头顶的名称就实现了,还有例如显示在人物头顶的血条,气泡,人物头顶对话等效果。
EventCamera:该选项决定了这个Canvas是接受哪个相机的事件,如果该项为None,则默认接受主相机的事件。如果指定某个相机,则只接受该相机的事件。
Sorting Layer:排序层,可以选择其他排序层
Order in Layer:设置Canvas在指定Sorting Layer排序层中的层级关系,谁的值越大谁在前面。和Sort Order一样。显示优先级显示Sorting Layer(谁级高谁在前)再是Order in Layer(同Sorting Layer谁大谁在前)确定。

👉Canvas缩放的三种方式

当Canvas的Render Mode为非Word Space的时候,才能随意更改UI Scale Mode属性。
在这里插入图片描述

😜Constant Pixer Size —— 恒定像素

这种模式UI是以像素为大小,同样的像素在不同的分辨率下尺寸是不一样的。显示设备屏幕像素密度越高,尺寸越小。比如你手机上的照片像素是4000*5000的,在手机上看着很小是因为手机屏幕像素密度大,把照片放到电脑上一般是1920*1080的像素,就会显的照片很大。

Scale Factor:缩放因子,会按这个数值缩放画布中的所有 UI 元素。

Reference Pixels Per Unit:单位面积像素数量,

😜Scale With Screen Size —— 屏幕尺寸比例

这种模式下UI元素的位置与大小按当前屏幕分辨率和设置的分辨率来取相对值。如果屏幕的分辨率大于/小于预设的屏幕分辨率,则画布依然是按设置屏幕分辨率布局,然后放大/缩小来适应屏幕,这就造成致UI被不均匀的拉伸或缩小,页面看起来就不美观了。

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

Screen Match Mode:该属性控制在当前分辨率的宽高比不适应参考分辨率时,按照什么模式来缩放。

Match Width or Height–以宽度、高度或二者的某种平均值作为参考来缩放画布区域。

Expand–水平或垂直扩展画布区域,使画布不会小于参考。

Shrink–水平或垂直裁剪画布区域,使画布不会大于参考。

Match:是个滑动条,确定是否以宽度、高度或二者的某种平均值作为参考进行缩放。如果是两头那就是要么宽度,要么高度

Reference Pixels Per Unit:每一个 Unity 单位对应的 像素数,具体效果我没有很好的例子,欢迎大佬提出。

😜Constant Physical Size —— 恒定尺寸

这种模式下 UI以像素为大小,在不同的分辨率下尺寸不一样

Physical Unit:用于指定位置和大小的物理单位,有Centimenters厘米,Millimeters毫米,Inches英寸,Points点(1point=0.3527毫米=1/72英寸),Picas派卡(1in = 2.54cm = 25.4 mm = 101.6Q = 72pt = 6pc = 96px)。

Fallback Screen DPI:在屏幕DPI未知时采用的 DPI。

Default Sprite DPI:用于精灵的每英寸像素,使其“Pixels Per Unit”设置与“Reference Pixels Per Unit”设置匹配。

Reference Pixels Per Unit:每一个 Unity 单位对应的 像素数,具体效果我没有很好的例子,欢迎大佬提出。

👉其他

📢作者:小空和小芝中的小空
📢转载说明-务必注明来源:https://zhima.blog.csdn.net/
📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。

👑评论区抽奖送书

最后在评论区进行抽取幸运的小伙伴 送书籍。
在这里插入图片描述
清华社【秋日阅读企划】领券立享优惠

IT好书 5折叠加10元 无门槛优惠券:https://u.jd.com/Yqsd9wj

活动时间:9月4日-9月17日,先到先得,快快来抢

点击跳转=>书单链接

🎁抽奖规则

给本篇博客文章点赞 收藏 评论三连,在文章发文5天后,我会将三连的朋友放到随机抽奖小工具中抽取并进行公布。中的几率还是很大的哦~ 想看书的小伙伴参与起来!
没抽到的,但是喜欢这本书的小伙伴也可以在网上自行购买哈,官方正品商店购买即可!

温馨提示点击下方卡片获取更多意想不到的资源。
空名先生

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1275MPaMJ螺纹螺栓 最新标准 学习记录

声明 本文是学习GB-T 42850-2023 1275MPaMJ螺纹螺栓. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 10 min~15 min。 A.1.5.8 水冲洗 表面清理后迅速将零件放在21℃~93℃自来水中冲洗,自来水应符合GB5749 的要求。 A.1.6 表…

【qiankun乾坤】从0到1搭建微前端

微前端是一种将一个大型单体应用拆分成多个小型应用的架构方式。它可以让不同的团队独立开发部署自己的应用,同时这些应用可以集成到一个统一的底座应用中,对用户来说就是一个完整的应用。 qiankun 是阿里开源的一个微前端实现框架,可以帮助我们比较容易地实现微前端架构。 下…

Linux中执行bash脚本报错/bin/bash^M: bad interpreter: No such file or directory

文章目录 参考博客: Linux中执行bash脚本报错/bin/bash^M: bad interpreter: No such file or directory 首先在此对这位博主表示感谢。 运行bash脚本会出现两个文件,1037.err和1037.out。 1037.err的文件内容如下: /data/home/user12/.lsbat…

5.11.Webrtc接口的设计原理

在上节课中呢,我向你介绍了web rtc的接口宏,那有很多同学会产生疑问啊,那觉得web rtc为什么要把接口设计的这么复杂?还非要通过宏来实现一个代理类,再通过代理类来调用到web rtc内部。 那为什么要这么设计呢&#xf…

Vulnhub系列靶机---HarryPotter-Fawkes-哈利波特系列靶机-3

文章目录 信息收集主机发现端口扫描dirsearch扫描gobuster扫描 漏洞利用缓冲区溢出edb-debugger工具msf-pattern工具 docker容器内提权tcpdump流量分析容器外- sudo漏洞提权 靶机文档:HarryPotter: Fawkes 下载地址:Download (Mirror) 难易程度&#xff…

SpringBoot/SpringCloud开源项目,快速开发提高效率80%

前言 SpringBoot 是一个非常流行的 Java 框架,它可以帮助开发者快速构建应用程序。他不仅继承了 Spring 框架原有的优秀特性,而且还通过简化配置来进一步简化了 Spring 应用的整个搭建和开发过程。下面我将来介绍若干个项目,带你来快速开发。…

ChatGPT OpenAI 完成Excel组合函数Vlookup+match多条件查找

ChatGPT OpenAI 现在已经助力职场办公。 我们现在有这样一个Excel需求: 根据姓名与科目查找对应的分数。可以使用Vlookup+match组合函数一起来实现 。 我们将公式复制到Excel中来进行验证。 ChatGPT生成的Excel函数公式可以直接进行使用。 更多实战内容。

找不到msvcp140_codevet_ids.dll,无法继续执行代码的解决方法分享

在使用 Photoshop(简称 PS)时,很多用户都遇到过找不到 msvcp140_codevet_ids.dll 的问题。这使得他们无法正常运行 PS,给工作和生活带来了诸多不便。本文将详细介绍 msvcp140_codevet_ids.dll 的相关知识,以及如何解决…

2023-09-13 LeetCode每日一题(检查骑士巡视方案)

2023-03-29每日一题 一、题目编号 2596. 检查骑士巡视方案二、题目链接 点击跳转到题目位置 三、题目描述 骑士在一张 n x n 的棋盘上巡视。在 有效 的巡视方案中,骑士会从棋盘的 左上角 出发,并且访问棋盘上的每个格子 恰好一次 。 给你一个 n x …

TypeScript类型系统层级

🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 1. 顶层类型(Top Type) 1.1 any 类型 1.2 unknown 类型 2. 底层类型(Bottom …

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析 1 linux原始设备驱动信息1.1 设备树节点信息1.2 linux设备驱动1.3 makefile1.4 Kconfig1.5 对应的defconfig文件 2 修改之后的linux设备驱动2.1 修改之后的设备树节点信息2.2 原始test_fw.c出现的问题以及原因分析…

学习Bootstrap 5的第十四天

目录 Toast 如何创建 Toast 实例 打开 Toast 实例 滚动监听(Scrollspy) 如何创建滚动监听 实例 侧边栏导航(Offcanvas) 如何创建 Offcanvas 侧边栏 实例 侧边栏的方向 实例 设置背景及背景是否可滚动 实例 侧边栏案例 实例 Toast Toast 组件类似警告框&#…

抽奖界面及功能

1.代码 <template><view class"container"><view class"container_circle" v-for"(v,i) in circleList" :key"i":style"{top:v.topCirclerpx,left:v.leftCirclerpx,background-color:(i%2 0)?oneCircleColor:t…

大厂面试题:有了 G1 还需要其他垃圾回收器吗?

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 今天我们主要来看下这两个高频的面试考题&#xff1a; G1 的回收原理是什么&#xff1f;为什么 G1 比传统 GC 回收性能好&#xff1f; 为什么 G1 如此完美仍然会有 ZGC&#xff1f; 我们在上一篇中&#xff0c;简要…

Flask+pyecharts结合,html统计图呈现在前端页面

是我,是你 在网上看到这样一段话: “很多时候,你必须接受这世界上突如其来的失去。洒了的牛奶,遗失的钱包,走散的爱人,断掉的友情。当你做什么都于事无补的时候,唯一能做的,就是让自己努力好过一点。” <

iptables 目标地址转换

目录 一、实验准备 二、配置web服务器 三、配置web防火墙网卡 四、配置客户机网卡 五、测试 1、开启防火墙功能&#xff0c;设置源地址转换&#xff0c;通过改变我客户机的地址身份为web服务器同网段来实现访问 2、通过改变目标地址&#xff08;客户机&#xff09;的地址…

无法加载文件xxx,此系统上禁止运行脚本

在 VsCode 跑一个前端项目的时候出现如下错误&#xff1a;此系统上禁止运行脚本 解决&#xff1a;在终端执行指令设置 脚本执行策略 为 RemoteSigned 以管理员身份运行vs code&#xff1b;查看当前执行策略&#xff1a;get-ExecutionPolicy&#xff0c;如显示 Restricted 则表…

element UI table横向树结合checkbox进行多选,实现各个节点的[全选,半选,不选]状态附带模拟数据

element UI table横向树结合checkbox进行多选&#xff0c;实现各个节点的[全选&#xff0c;半选&#xff0c;不选]状态&#xff0c;包含模拟数据 思路&#xff1a; 步骤一、后端返回tree格式数据&#xff0c;先结合element-ui的table的数据格式要求&#xff0c;将tree转换成ta…

第30章_瑞萨MCU零基础入门系列教程之IRDA红外遥控实验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

苹果iPhone 15/Pro新机发布,毫米波5G仍然只限美国版

苹果公司今日发布了 iPhone 15 系列新机&#xff0c;共四款&#xff0c;分别是 iPhone 15、iPhone 15 Plus、iPhone 15 Pro 和 iPhone 15 Pro Max。这些新机型都配备了 USB-C 接口和灵动岛&#xff0c;而 Pro 版还有更多的特色功能&#xff0c;如 A17 Pro 芯片、轻质钛金属框架…