Unity入门-UGUI详解-画布

最新推荐文章于 2024-09-02 16:45:45 发布
最新推荐文章于 2024-09-02 16:45:45 发布
阅读量1.7k 收藏 23
点赞数 3
分类专栏： UnityUGUI 文章标签： unity ugui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44705559/article/details/117930448
版权
本文详细介绍了Unity的UGUI系统中画布的使用，包括其渲染模式：覆盖渲染、摄像机渲染和世界空间渲染，以及Canvas Scale组件在不同模式下的设置，如固定像素尺寸、随屏幕缩放和恒定物理尺寸。此外，还讨论了画布缩放组件的作用和参数，确保UI在不同分辨率下保持良好显示效果。
摘要由CSDN通过智能技术生成

快速导航

  • UI组件

    • 画布

    • 图片

    • 文本

    • 按钮

    • 单选框

    • 滑动条

    • 滚动条

    • 下拉菜单

    • 输入框

    • 视频播放

  • 控制组件

    • 矩形变换组件
    • 布局元素组件
    • 布局控制组件

  • UI事件

  • 图集

  • 渲染顺序

1. 画布

1.1 简介

画布组件是UI渲染最主要的组件。

我们可以将画布组件理解成一个容器，其他UI元素都必须填充到该容器中，最终形成我们看到的一个UI界面。

如果场景中没有画布，那么我们创建任何一个UI元素，都会自动创建画布，并且将新元素置于其下。

因此可以游戏中用到画布组件的地方均可以作为一个独立的游戏界面。

当容器的渲染属性发生改变时，所有子物体均会受到影响。

1.2 特点

  • 只有放在画布组件下的子物体才会参与UI的渲染。
  • 形状大小取决于屏幕分辨率， 创建出来的画布组件是一个矩形，我们可以修改Game窗口的分辨率选项来修改矩形的大小。

窗口分辨率默认设置为Free Aspect我们可以把它切换成90像素x1080像素这样具体数值的分辨率，这样我们的界面就不容易易出现变形。

  • 子物体的渲染层级取决于UI元素在层次结构中出现的顺序
    两个UI元素在位置上重叠，层级结构下方的UI元素会遮挡上方的UI元素

1.3 渲染模式

三种渲染模式的区别：

渲染模式 画布对应屏幕 摄像机 像素对应 适合类型
Screen Space-Overlay 是 不需要 可选 2D UI
Screen Space-Camera 是 需要 可选 2D UI
World Space 否 需要 不可选 3D UI

1.3.1 覆盖渲染模式

Screen Space-Overlay（屏幕控件-覆盖模式）的画布会填满

最低0.47元/天 解锁文章
卖烤麸烤饼儿
关注
专栏目录
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-26 1万+
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875   大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 很早就想分享这个系列的文章，但是总是没有机会，最近就将这个系列整理一下，大家一起学习交流。 一、前言 首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开.
【Unity3D-UGUI系列】（十一）Toggle 开关组件详解
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-30 1万+
一、前言 首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。 UGUI的特点： 灵活 快速 可视化 对于开发者来说有很多的优点，比如说： 效率高 实现效果好 易于使用和拓展 与Unity编辑器的兼容性高 这是本系列文章的第一篇： 二、Toggle 开关组件介绍 Toggle 开关组件顾名思义，就是用来模拟控制开发的组件。 主要使用的场景有，开关声
Unity照片墙插件UnityUGUIPhotoWall-非积分
12-23
Unity照片墙插件UnityUGUIPhotoWall
Unity2019学习：常用功能--Canvas画布
wuyt2008的专栏
01-05 1751
Canvas（画布）游戏对象是其他Unity UI的基础，其他的Unity UI必须是Canvas（画布）游戏对象的下级游戏对象。 当UI内容发生变化的时候，是以画布为单位进行重绘，合理的将内容分配到不同的画布可以提高性能。 Render Mode（渲染模式） Screen Space Overlay（屏幕空间-覆盖） 屏幕空间-覆盖是根据屏幕分辨率进行渲染，不参考场景中的任何游戏对象或者摄像机，渲染之后将其绘制在其他所有内容之上。 Screen Space Camera（屏幕空间-摄像机） 屏幕空间-摄像
Unity(2022.3.41LTS) - UI详细介绍-画布
最新发布
一然明月的博客
09-02 1772
在 Unity 中，画布（Canvas）是构建用户界面（UI）的基础组件。一、画布的作用容器：画布是所有 UI 元素的根容器。所有的 UI 组件，如文本、按钮、图像等，都必须是画布的子对象才能在游戏中显示。渲染模式：决定了 UI 元素在屏幕上的渲染方式。Unity 提供了三种主要的画布渲染模式：Screen Space - Overlay：UI 元素直接渲染在屏幕上，无视场景中的相机。这种模式下，UI 始终在最前面，并且大小与屏幕分辨率直接相关。
Unity笔记之UGUI画布设置问题
qq_43815828的博客
07-06 817
需求：实现不同分辨率UI适配 问题：UI的设置都对了，但是无论如何都没办法适配上。最后解决的办法竟然是修改一个参数就好了！！！ 我这之前是0.5，这样的话，画布改变就会是上下左右等比的去进行缩放适配。而这样达不到我想要的效果，我想要的是让它只有上下才进行缩放适配，所以改成0就可以实现了。 ...
Unity照片墙插件UnityUGUIPhotoWall
蒙双眼看世界
09-18 2490
UnityUGUIPhotoWall一款结合DoTween做的照片墙效果插件。BaseInput用来检测鼠标输入事件。
Unity UGUI Photo Wall 照片墙效果
12-26
Unity UGUI Photo Wall 照片墙效果 1、里面包含DoTween 插件； 2、导入Unity，里面有完整测试工程； 3、Unity UGUI 实现； 4、可以支持 UGUI Canvas 的 Render Mode 任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space；
【Unity-UGUI控件全面解析】| ScrollView 滚动视图组件详解
热门推荐
努力前行，总会成为自己心中的那道光
05-17 2万+
ScrollView 是一个滚动显示内容的组件，当有大量内容需要显示时，就可以使用ScrollView来进行滚动显示，如正常浏览网页时的滚动显示内容等。 在Hierarchy视图中选择 Create -> UI -> ScrollView 新建一个ScrollView 滚动视图组件：
【Unity3D-UGUI系列】（二）Text文本组件详解
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-27 1万+
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875   大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 很早就想分享这个系列的文章，但是总是没有机会，最近就将这个系列整理一下，大家一起学习交流。 一、前言 首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开.
Unity UGUI效果 之 动态照片墙效果
仙魁XAN
12-26 9867
Unity UGUI效果 之 动态照片墙效果 目录 Unity UGUI效果 之 动态照片墙效果 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、相关代码 七、代码工程 一、简单介绍 UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。 照片墙效果，即是动态的生成图片，效果，选择对...
unity之UGUI系统基础
weixin_39923777的博客
10-15 3151
                                                              UGUI系统基础 一.UGUI 简介： ①.Unity3D4.6 版本开始，Unity 引擎内出现了一个自己的完整 UI 系统。在此之 前，国内 90%以上的 Unity 项目，项目 UI 界面都是使用 NGUI 插件制作的。 ②.旧版 UI：GUITexture，GUI...
Unity基础UGUI学习
wangwen_22的博客
11-06 2265
2.多个Canvas使用相同Camera时，优先根据SortingLayer显示，当SortingLayer相同时，再次根据OrderInLayer显示。使用 UGUI来开发UI，离不开Canvas组件，所有的 UI 元素，一般都是放在包含 Canvas 组件的节点。Sort Order：Canvas 深度，多个 Canvas时，Sort Order 值大的在上层。Sorting Layer：Canvas深度，可以手动添加，决定显示的优先级，列表下面的优先级越高。这篇文章很详细，可以看看，
unity UI 的简单入门制作
poplar_cool的博客
05-15 3079
unity UI 的简单入门制作 作为unityUI入门，首先要了解UI是什么，UI简单来说就是一个在游戏中作为菜单状的一个东西，上面每个按钮，每个背景都是我们去设计的，并且实现的功能 在unity中对于UI的制作，首先要先创建一个canvas画布，然后在画布上开始用自己拥有的素材开始制作UI。 在这里注意几点问题，一是canvas画布大小不需要去改变，虽然看起来它比地图大了很多，但是我们只需要再创建一个新的相机即可，不需要去改变画布的的大小，如果将画布的大小设置成与地图大小一致，则会出现很多麻烦，比如Te
Unity GUI组件定位
delete_you的博客
09-19 697
canvas画布中的组件定位拉伸问题的较详细解答
unity中创建UI组件后无法在Scene视图显示
Wene_Zheng的博客
10-16 1万+
今天在unity添加了个Image，然而突然在Scene视图不显示了，但是在Game视图却看的见 如下图： 后来查了一下发现原来是把Layer给设置成UI了，只要把Canvas的Layer改回Default就可以了，不然你添加的UI组件都无法在Scene中看到
UE4RenderTarget应用1——画布
JMXIN422的博客
06-12 1844
1. 使用渲染目标绘画 绘制方法 为了确定在哪里绘制渲染目标，需要从摄像机向前画一条线。如果线条击中画布，可以在UV空间中得到击中位置。例如，如果画布是完美的UV映射，在中心的点击将返回值(0.5,0.5)。如果它击中右下角，将得到一个值(1,1)。然后可以使用一些简单的数学计算绘制位置。 需要设置一个纹理作为参数，这样就可以传递渲染目标。为此，创建一个TextureSampleParameter2D并命名为RenderTarget。然后，将它连接到BaseColor。 创建RT 更好的方法是使用蓝图创建渲
unity-ugui制作表格
10-27
Unity-UGUI是Unity游戏引擎中的一个UI系统，可以用来创建和管理用户界面。它提供了丰富的功能和工具，使得开发者能够轻松地制作各种表格。 使用Unity-UGUI制作表格的步骤如下： 1. 创建Canvas对象：在Unity中，首先需要创建一个Canvas对象，作为UI渲染的容器。选择GameObject -> UI -> Canvas，即可创建一个Canvas对象。 2. 添加Table组件：选择Canvas对象，在Inspector面板中点击"Add Component"按钮，然后在搜索栏中输入"Table"，选择适合的Table组件，点击添加。 3. 设置表格的行列数：在Table组件的Inspector面板中，设置表格所需的行数和列数。 4. 设置表格样式：可以在Inspector面板中设置表格的颜色、大小等属性，以满足具体需求。 5. 添加表格内容：可以通过代码或者拖拽方式，向表格中添加所需的文本或图片。可以通过操作表格的行列索引，将内容放置在特定的位置。 6. 设置表格的交互性：可以为表格中的每个单元格添加点击事件或其他交互效果，提升用户体验。 7. 调整表格布局：可以通过调整Canvas的大小、位置，或者改变组件之间的层次关系，来调整表格的布局。 8. 完善表格功能：可以根据具体需求，添加更多表格的功能，比如排序、过滤、搜索等。 9. 测试和优化：在表格制作完成后，可以进行测试，查看表格的显示效果和交互效果，并进行优化。 总之，使用Unity-UGUI制作表格，只需简单的操作和设置，就能够创建出各种样式、功能丰富的表格，满足游戏或应用程序的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值