Unity UGUI Canvas画布中文详解-Chinar

最新推荐文章于 2023-07-10 14:17:42 发布
最新推荐文章于 2023-07-10 14:17:42 发布
阅读量7.8k 收藏 40
点赞数 9
分类专栏： Unity 3D UGUI 文章标签： Unity canvas画布 unity Canvas Unity Canvas中文详解 unity ugui canvas Canvas画布模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinarcsdn/article/details/90432076
版权
Unity 3D 同时被 2 个专栏收录
178 篇文章 255 订阅
订阅专栏
UGUI
15 篇文章 14 订阅
订阅专栏

Chinar blog ：www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI-Canvas 画布

本文提供全流程，中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新！

助力对 Unity UGUI Canvas 有一个全面的认知

为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：
在这里插入图片描述

文章目录

全文高清图片，点击即可放大观看 (很多人竟然不知道)

1

Presentation —— 介绍


  • Canvas 画布，所有的UI组件都是在它的子集里面，
  • 如果UI不放在它的子集中，那么这个UI将不能正常显示在 Game 视窗中

我们创建一个 Canvas 组件看一下它的属性：

在Unity的 Hierarchy 面板上右键–>UI–>Canvas
举个例子
在这里插入图片描述

2

Canvas Attribute —— Canvas 属性


选中我们创建的 Canvas 对象，我们来了解下位于Inspect面板上的 Canvas 画布的属性

我们从 Render Mode / 渲染模式 说起

2.1 Screen Space-Overlay —— 屏幕空间覆盖模式


  • 覆盖模式：表示 Canvas 下的所有的 UI永远位于屏幕的前面，覆盖掉相机渲染场景显示的元素。
  • ( 不管有没有相机去渲染场景 )

在这里插入图片描述

属性功能
Pixel Perfect使UI元素像素对应，效果就是边缘清晰不模糊
Sort Order多个Canvas时，数值越大越后渲染。值大的 画布，会挡住值小的
Target Display目标显示器，如果有多个屏幕的话可以选择

举个例子

  • 1.我们在 Main Camera 视角范围内放一个 Cube

  • 2.再创建一些 UI 元素，用于测试 覆盖模式的效果

结果发现 Game 视窗并没有看到 Cube,**

在这里插入图片描述

2.2 Screen Space-Camera —— 相机模式

  • 这种渲染模式 Canvas 和 摄像机之间有一定的距离 , 可以在摄像机和 Canvas之间放置一些模型或粒子特效

在这里插入图片描述

属性功能
Pixel Perfect使UI元素像素对应，效果就是边缘清晰不模糊
Render Camera渲染的相机
Sort Layer画布的深度,指定了相机的渲染顺序
Order In Layer值越大，该UI越显示在前面

举个例子
在这里插入图片描述

2.3 World Space —— 世界模式

  • 这种模式下 Canvas 就和普通的 3D 物体一样了 , 可以控制它的大小,旋转,缩放等，其属性与 Camera 模式一致

举个例子
我们创建一个 Cube,然后在创建一个 Canvas 将其放到 Cube 的子集中，然后在 Canvas 下创建一个 Text，
调整大小后会是这个效果：
在这里插入图片描述

3

Canvas Scaler —— 画布的缩放

缩放模式有三种，我们来一一介绍一下

3.1 Constant Pixer Size —— 恒定像素

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

在这里插入图片描述

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

  • 这种模式下UI元素的位置与大小按当前屏幕分辨率和设置的分辨率来取相对值。
  • 若当前屏幕分辨率大于/小于设置屏幕分辨率，则Canvas依然是按设置屏幕分辨率布局，然后放大/缩小来适应屏幕，
  • 这会导致 UI 被不均匀的拉伸或缩小，导致界面混乱

在这里插入图片描述

3.3 Constant Physical Size —— 恒定尺寸

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

在这里插入图片描述

Cancas Scaler核心内容请参考这位大神的博客

4

Graphic Raycaster —— 射线检测

在这里插入图片描述

属性功能
Ignore Reversed Graphics是否忽略反方向图形，勾选此选项时反转180°的图形将不接受射线检测，否则正反面都接受
Blocking Objects屏蔽指定对象类型，None 都不屏蔽 Two D 屏蔽具有2D碰撞体的2D物理对象，Three D 屏蔽具有3D碰撞体的3D物理对象， All 屏蔽所有物体对象
Blocking Mask使屏蔽对象中的指定层不参与射线检测

下面来解释一下 Blocking Mask 中的类型

属性功能
Nothing都不屏蔽
Everything全部屏蔽
Default使默认层
TransparentFX透明的游戏对象
Ignore Raycast反方向图形
Water水物体
UIUI层
PostProcessing后处理中的游戏对象

至此：您已完美征服了 UGUI - Canvas

Unity UGUI 完整系列教程 (Chinar中文图解)

支持

May Be —— 开发者，总有一天要做的事！


拥有自己的服务器，无需再找攻略

Chinar 提供一站式《零》基础教程

使有限时间 具备无限可能！

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

Chinar
END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址

Chinarcsdn
关注
  • 9
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新版-Unity-UGUI-拼音对齐中文-PinYin(小学课本)
11-15
最新版-ugui-拼音与中文对齐-PinYin,小学课本拼音与中文对齐,居中显示拼音和中文对齐,
Unity技术手册-UGUI零基础详细教程-Canvas详解
最新发布
空名先生
09-13 6042
Canvas是展示UI的基础，所有U控件都必须是其子类，所以我们需要详细知道该组件的功能。 当你创建一个UI控件时，如果在Hierarchy（层级窗口）下没有Canvas组件的话，Unity会帮你自动创建一个Canvas，并将你的UI控件放于Canvas下，同时还会自动创建一个EventSystem，这个对象很重要，她是用来处理各种鼠标输入的事件的，是必不可少的一个功能。
NGUI Camera 照相机看不到物体解决办法
FireGhost57的专栏
03-31 5943
解决NGUI相机看不到物体问题
Unity日志输出 Unity-Logs-Viewer
10-13
Unity日志输出插件，在手机和pc上均有用，能很清晰的看到日志打印，非常好用。 使用这个工具，你可以很容易地在游戏内部检查你的编辑器控制台日志!在移动端同样有效! 支持unity2017.4.29 or 更高版本
Unity UGUI无限循环列表
12-26
Unity UGUI实现无限循环滑动列表功能，如果要做循环滑动列表可以参考。直接导入Unity里面有示例场景。运行即可。
H5 Canvas益智类填色画游戏 - A5源码.zip
03-15
适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。
使用Unity做出在固定大小区域显示主摄像机看不到的画面
。。。。。。
04-10 5403
使用Unity做出在固定大小区域显示主摄像机看不到的画面 前言： ​  这次的标题好长啊。但是我也不知道怎么写这样个标题。最近做项目刚好遇到了这个需求，所以标题就是按照需求写的。这个项目后面转给同事了。不过我觉得这个要求挺有意思的，所有我就做了一个Demo。这篇文章希望能给要做这种要求的你提供一个思路。 项目的要求 ​​  这次我做的项目要求我做一面照妖镜。然后角色可以使用这个照妖镜去照射出妖怪的样子。所以我需要在一个固定大小的区域中显示出主摄像机看不到的画面。即玩家操纵一个UI，然后UI里面要显示出主摄像
Unity Canvas 详解
TravelerTD_剑，酒与行者
09-09 7939
文章目录三种画布渲染模式Canvas ScalerConstant Pixel SizeScale With Screen SizeConstant Physical SizeCanvas GroupUI 自适应原理解决方法 三种画布渲染模式 Screen Space - Overlay（屏幕控件 - 覆盖模式）多用于 3D 游戏 画布会填满整个屏幕空间，并将画布下面的所有的 UI 元素置于...
04:canvas的三种渲染模式
weixin_33950757的博客
08-04 1600
什么是Canvas 使用UGUI来进行UI开发，离不开Canvas组件，所有的 UI 元素，要么自己包含 Canvas 组件，要么是 Canvas 组件所在 GameObject 的子节点。 2.Canvas 组件的参数 RenderMode，有三个选项：Screen Space - Overlay、Screen Space - Camera、World Space。 Screen Spa...
Unity UGUI的Canvas（画布）组件的介绍及使用
alianblank的博客
07-10 3156
Canvas（画布）是Unity UGUI系统中的一个重要组件，用于在屏幕上绘制UI元素。它是UI元素的容器，可以包含各种UI元素，如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。
Unity UGUI Text竖排显示
07-11
很不错
Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换
03-29
Unity-UGUI制作的小地图-可放大缩小相机视角，大地图喝小地图切换。分享出来一起学习。
unity-ugui-XCharts-master.zip
12-10
unity插件 带各种常用的图表 饼图 折线图 柱状图等等 可以适用于2d和3d展示 开放了所有接口 可以自定义
unity-ugui-scrollview:ugui-example
05-12
unity-ugui-scrollview ugui-example
unity UGUI图片任意截取和裁剪
04-07
使用ugui对图片进行任意角度，大小，缩放，以及任意位置进行截取和裁剪，还可以设置圆角或者矩形方式操作
Unity3D UGUI下拉菜单/Dropdown组件用法、总结
热门推荐
ChinarCSDN的博客
05-09 4万+
Unity3D UGUI下拉菜单/Dropdown组件用法、总结 Unity3D中UGUI实现下拉菜单 Chinar-本文提供全流程，中文翻译。 助力快速使用 UGUI 实现 下拉菜单 UGUI 最初是没有下拉菜单的组件的 动态添加监听事件 后来更新加入后，用起来方便，可快速创建大量选择项，无需开发者自己写脚本实现 创建页面布局 1. 创建下拉菜单模板 右键层次列表→ UI → Dropdown 即可完成一个下拉菜单的创建 扩展 Dropdown 组件，开启被选择按钮，再次被点击仍然可
Unity UGUI 完整系列教程-Chinar中文图解
ChinarCSDN的博客
05-18 4万+
本文提供全流程，中文翻译。 助力系统性完成 Unity UGUI 的开发、学习、使用 为初学者节省宝贵的时间，避免采坑！ 1 Intro —— 简介 2 Text —— 文本 3 Image —— 图片 4 Button —— 按钮 5 Toggle —— 开关 5.1 Toggle Group —— 开关组 6 Dropdown —— 下拉菜单 6.1 Dropdown Ex —— 下拉菜单( 每次点击可用 ) 7 InputField —— 输入框 8 Raw Image —— 未加工图片 9 Canv
Unity 3D UGUI Toggle用法教程
ChinarCSDN的博客
05-11 2万+
Unity 3D UGUI Toggle用法教程 UGUI Toggle用法教程 Chinar-本文提供全流程，中文翻译。 由此： Toggle 组件诞生了，方便且简单的解决了上述问题 用法上和 Button 几乎没有区别，且动态的了模拟现实中开关按钮，为开发者提供了一个良好的解决方案 强大的 Unity 在降低开发难度的路上，真是越走越远，甩的同行看不见屁股（有点夸张了） Unity 提供了非常简单的创建 Toggle 方式： 1. Graphic ：用来控制 Toggle 开关图片的显示/隐藏
Unity UGUI Layout自动排版组件用法介绍
ChinarCSDN的博客
08-31 1万+
Unity UGUI Layout自动排版组件用法介绍 Unity UGUI布局组件 本文提供全流程，中文翻译 助力快速理解 Unity UGUI Layout 布局组件的使用场景 需要将某个板块中的信息，图标给整理，整齐的进行排版 Unity 为我们提供了 Layout 布局组件 可以非常方便的实现此类需求 Grid Layout Group 网格布局 —— 支持竖向、横向排列 Horizontal Layout Group 网格布局 —— 仅支持横向排列 Vertical Layout Group
unity UGUI
08-23
Unity UGUI是Unity游戏开发中常用的用户界面实现方法。UGUI是Unity自带的用户界面系统，可以通过创建UI元素来构建游戏的界面。在Unity中，UGUI可通过创建Button、Text、Image等UI组件来实现交互和展示。 在UGUI中，通常选择ISO模型进行2D平面开发。通过锁定界面可以防止镜头发生偏移，确保界面的稳定性。 添加Button点击事件的方法如下： 1. 在Hierarchy面板中创建一个空物体GameObject。 2. 在Project面板中创建一个新的C#脚本，命名为OnClickButton，并将该脚本添加到GameObject上。 3. 双击OnClickButton脚本，在打开的脚本编辑器中输入相应的代码。该代码的作用是在点击按钮后输出"You click the button."和若干次"Yes"。 4. 在Click方法中使用print函数输出相关信息，并通过循环打印"Yes"特定次数。 5. 完成脚本的编写后，将脚本保存并返回Unity编辑器界面。 以上是关于Unity UGUI的简要介绍和Button点击事件的添加方法。希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [超详细的Unity UGUI教学](https://blog.csdn.net/qq_37701948/article/details/106682377)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值