Unity3D学习之UI系统——UGUI

最新推荐文章于 2024-04-22 21:05:34 发布
最新推荐文章于 2024-04-22 21:05:34 发布
阅读量2.5k 收藏 55
点赞数 19
文章标签： 学习 ui 笔记 unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lmz_0314/article/details/135973875
版权
本文详细介绍了Unity游戏引擎中的UGUI系统，包括Canvas的基本功能、渲染模式（如ScreenSpace-Overlay、ScreenSpace-Camera和WorldSpace）、CanvasScaler的缩放控制，以及各种基础和组合控件（如Button、Toggle、InputField等）的使用方法。此外，还涉及了图集制作、UI事件监听、自动布局组件和画布组CanvasGroup等内容。
摘要由CSDN通过智能技术生成

文章目录

1. 前言

在这里插入图片描述
在这里插入图片描述

2 六大基础组件概述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3 Canvas——渲染模式的控制

3.1 Canvas作用

在这里插入图片描述在这里插入图片描述

3.2 Canvas的渲染模式

在这里插入图片描述

3.2.1 Screen Space -Overlay 覆盖模式

在这里插入图片描述

3.2.2 Screen Space - Camera 摄像机模式

在这里插入图片描述
创建专门的摄像机渲染UI
并让主摄像机不渲染UI层

3.2.3 World Space

在这里插入图片描述

4 CanvasScaler ——画布缩放控制器

在这里插入图片描述

在这里插入图片描述
宽高 * 缩放系数 = UI界面大小

在这里插入图片描述
参考分辨率

在这里插入图片描述

4.1 Constant Pixel Size 恒定像素模式

在这里插入图片描述
图片格式要改为Sprite
在这里插入图片描述

恒定像素模式计算公式
在这里插入图片描述

在这里插入图片描述

4.2 Scale With Screen Size 缩放模式

在这里插入图片描述
在这里插入图片描述
会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 Constant Physical Size 恒定物理模式

在这里插入图片描述
在这里插入图片描述

4.4 3D模式

在这里插入图片描述

5 Graphic Raycaster图形射线投射器

在这里插入图片描述
在这里插入图片描述

6 EventSystem和Standalone Input Module

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7 RectTransform

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
获得参数
在这里插入图片描述

8 三大基础控件

8.1 Image 图像控件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.2 Text 文本控件

在这里插入图片描述
在这里插入图片描述
富文本
在这里插入图片描述
在这里插入图片描述

8.3 RawImage 原始图像控件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9 组合控件

在这里插入图片描述

9.1 Button 按钮

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.1.1 代码控制

在这里插入图片描述

9.1.2 监听点击事件的两种方式

1） 托脚本
在这里插入图片描述
2） 代码监控
在这里插入图片描述

9.2 Toggle 开关控件

在这里插入图片描述
在这里插入图片描述
只要三个的toggle group属于同一个Group，就变成了单选框

9.2.1 代码控制

在这里插入图片描述

9.2.2 监听事件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

9.3 InputField 文本输入控件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.3.1 代码控制

在这里插入图片描述

9.3.2 事件监听

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.4 Slider 滑动条控件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.4.1 代码控制

在这里插入图片描述

9.4.2 事件监听

在这里插入图片描述

在这里插入图片描述

9.5 ScrollBar 滚动条

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

9.6 ScrollView 滚动视图

在这里插入图片描述

9.6.1 代码控制

在这里插入图片描述

9.7 Dropdown 下拉列表控件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10 图集制作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
UGUI查看DrawCall
在这里插入图片描述
在这里插入图片描述

11 UI事件监听接口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.1 继承接口和函数

在这里插入图片描述

在这里插入图片描述
拖入相关的
在这里插入图片描述

11.2 事件监听父类

在这里插入图片描述

11.3 练习题

在这里插入图片描述
长按按钮脚本，提供两个事件给外部，让外部进行处理
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12 EventTrigger 事件触发器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12.1 练习题

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
关联函数

设置向量长度为遥感能移动的长度

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13 屏幕坐标转UI相对坐标

在这里插入图片描述

在这里插入图片描述

13.1 练习题

在这里插入图片描述
在这里插入图片描述

14 Mask遮罩

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
maskable要钩勾上
在这里插入图片描述
是否显示遮罩的图
在这里插入图片描述

15 模型和粒子显示在UI之前

15.1 3D模型在UI之前

在这里插入图片描述
这部分在Camere前面有
还有另一个方法
通过图片显示
使用一个单独的摄像机渲染该层，然后转化成照片
在这里插入图片描述
在这里插入图片描述
拖入到taget camera
在这里插入图片描述
在UI里创建RawImage
在这里插入图片描述

15.2 粒子特效在UI之前

在这里插入图片描述
粒子特效和3D物体基本一致

16 异形按钮

点击图片按钮的空白区域也会响应，所以要设置异性按钮
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改变点击后影响的控件 target Graphic
在这里插入图片描述
在这里插入图片描述

通过代码改变图片的透明度
在这里插入图片描述
在这里插入图片描述

17 自动布局组件

在这里插入图片描述

17.1 布局属性

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

17.2 水平垂直布局组件

在这里插入图片描述
给父对象添加
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置之后会自动调节子对象的大小
在这里插入图片描述
在这里插入图片描述
会是否强制扩展子对象

添加 Layout Element 组件，规则会按布局元素进行设置，
在这里插入图片描述
父对象最小后，会按子对象的大小显示
在这里插入图片描述
父对象变大后，会出现上图情景

17.3 水平布局组件

和垂直布局差不多
在这里插入图片描述

17.4 网格布局组件

在这里插入图片描述在这里插入图片描述
添加后
在这里插入图片描述
在这里插入图片描述

17.5 内容大小适配器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
和ScrollView配合使用
在这里插入图片描述

在这里插入图片描述

17.6 宽高比适配器

在这里插入图片描述

在这里插入图片描述

18 画布组Canvas Group

在panel 组件 添加，管理画布中所有的组件
在这里插入图片描述
在这里插入图片描述

19 UGUI源代码

在这里插入图片描述

千殃sama
关注
  • 19
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uGUI源文件unity3D
01-04
Unity3D作为一款强大的游戏开发引擎，其用户界面（UI）系统——uGUI，自2014年引入以来，为开发者提供了高效、灵活的界面构建工具。uGUI是Unity在早期OnGUI系统基础上的重大升级，旨在为开发者提供更现代、更直观的...
Unity3d换装系统项目、详细注释
08-07
1. **UGUI（Unity Graphic User Interface）**：Unity3D从4.6版本开始引入UGUI，这是一个全新的图形用户界面系统，用于创建游戏内的菜单、界面和交互元素。在换装系统中，UGUI可以用于设计和实现服装选择界面，展示...
Unity中的UI系统之UGUI
最新发布
K_CRACKING的博客
04-22 1409
UGUI是什么UGUI是Unity引擎内自带的UI系统官方称之为:Unity UI是目前Unity商业游戏开发中使用最广泛的UI系统开发解决方案它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能不能用于开发Unity编辑器中内置的用户界面如何在Unity中使用UGUI直接在Hierarchy窗口中右键选择UIUI中所有内容都是UGUI相关控件六大基础组件1、Canvas对象上依附的:①Canvas:画布组件,主要用于渲染UI控件②。
【Unity基础】ugui的基础知识篇
qq_41094072的博客
09-26 6798
这里主要学习UGUI的可视化组件 参考资料:https://docs.unity3d.com/cn/2021.3/Manual/UIVisualComponents.html。
【Unity3D编辑器扩展】Unity3D中实现UI界面控制，UI界面的显示和隐藏实现
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
12-30 7265
在开发中，可能遇到管理很多的UI界面，但是需要切换UI界面的情况。这种情况下，通常就是在Hierarchy视图中勾选需要显示的UI界面，关闭不需要显示的UI界面。这种操作很麻烦，所以就写了一个直接在脚本组件中控制UI界面的功能，可以直接切换UI界面，提升效率。
Unity UGUI系统
jkkk_的博客
03-09 2952
UI系统对比 对 UI 系统的选择取决于是为 Unity 编辑器开发 UI，还是为游戏或应用程序开发运行时 UI。 UI 的类型 UI 工具包 Unity UI(uGUI) IMGUI 注意事项 运行时（调试） ✔ * ✔ ✔ 这指用于调试用途的临时运行时 UI。 运行时（游戏内） ✔ * ✔ 不推荐 出于性能原因，Unity 不推荐将 IMGUI 用于游戏内运行时 UI。 Unity Editor ✔ ❌ ✔ 不能使用 Unity UI 为 Unity 编辑器创建 UI。 当然
Unity学习笔记之UI
Pepper的博客
07-31 2387
Panel一般位于Canvas子物体，四锚点在四角，边距为零，所以Panel和Canvas一样大，Canvas和屏幕一样大，所以Panel和屏幕一样大，元素显示处理在Panel中正常，则屏幕中也正常。先通过Sorting Layer排序，若一样再根据层内顺序，排序关系：配置的排序层顺序，越靠下，显示越靠前；键盘导航，可以通过按键切换选中可交互UI，Visualize开启后，能够看到导航线，Navigation可以选择横向移动、纵向移动、自动匹配移动、指定上下左右移动，手机游戏可以关闭导航。
UnityUI系统 - GUI
m0_61939767的博客
02-24 975
region 知识点一 全局颜色//全局的着色颜色 影响背景和文本//按钮是偏红，字体全红//文本着色颜色 会和全局颜色相乘//背景元素着色 会和全局颜色相乘GUI.Button(new Rect(0, 0, 100, 30), "测试按钮");GUI.Label(new Rect(0, 50, 100, 30), "测试按钮");//style 自定义后也会被全局改变，改回白色可以变回去。
背包系统——基于Unity3DUGUI.zip
03-15
总的来说，“背包系统——基于Unity3D UGUI”项目涵盖了Unity3D的UI设计、数据结构设计、事件处理和性能优化等多个方面，是学习和实践游戏开发技能的好素材。通过深入理解并实践这个项目，开发者可以提升自己在Unity...
【unity3d】滑块滑动翻页插件3合一(UGUI SuperScroll/PageView/Fscroll)
07-08
本篇将详细介绍标题所提及的三款Unity3D滑动翻页插件——UGUI SuperScroll、PageView和Fscroll。 1. UGUI SuperScroll UGUI（Unity Graphic User Interface）是Unity内置的UI系统，它基于Material Design风格，提供...
Unity 科幻风格的全息交互界面UI（内含多个Demo）
01-24
Unity 科幻风格的全息交互界面UI（内含多个Demo），若有报错，请在AssetStore下载 LegacyImageEffects，导入即可使用
UNITY3D的UGUI的UI图之类的
10-19
UNITY3D的UGUI的UI图之类的，有一些预制体和一些UI图片
Unity3D4.6UGUI开发设计及案例讲解
10-20
Unity3D 4.6 引入了全新的用户界面（UI）系统——UGUI（Unity Graphic User Interface），这个系统的引入极大地改善了Unity中2D界面的设计和交互性。UGUI的出现使得开发者能够更轻松地创建复杂且高性能的UI元素，...
Unity3D学习之UI系统——NGUI
Lmz_0314的博客
01-26 2546
资源商店搜索学习版自行搜索导入即可创建UI管理渲染相关内容UI模式是根据组件深度处理事件World模式 根据距离著摄像机的远近来响应排序（这两个的主要区别在 眼睛看到在前面的，进行交互时UI模式点击看起来在被前面的窗口压在后面的，但被压在的那一层层级更高，会先相应被压在下面的UI）EventMask 决定哪个层级接受事件Debug就是测试时，你点击这个UI，会打印出来交互的时什么对象点击New 新建选择 加入图集的文件创建图集，一般存放在Resources文件夹内，方便读取。
Unity 3D 开发中需要掌握的数学基础知识概要整理（一）
仙魁XAN
10-28 3567
目录 Unity 3D 开发中需要掌握的数学基础知识概要整理（一） 学习目的： 一、3D 数学基础知识介绍 二、Unity 中的几种常用坐标系 三、向量的基本概念 Unity 3D 开发中需要掌握的数学基础知识概要整理（一） 学习目的： 3D数学：研究在3D几何世界中的数学问题。被广泛的应用于使用计算机来模拟3D世界的领域，比如图形学，游戏，虚拟现实和动画等。 ...
Unity3D学习之UI系统——用NGUI制作游戏登陆界面
Lmz_0314的博客
01-30 2419
不是由玩家产生的 已经由设计者配置好的数据 在游戏中读取到配置文件，再通过配置文件内容改变游戏中的部分内容。玩家登陆后，如果没有上次选择服务器，会直接跳转到选择服务器界面，如果选择了就跳转到进入游戏界面。创建成功后，给list里增加刚创建的Gameobject。更新 点击左侧按钮后的事件监听，点击后更新右侧面板更新。创建初始化时调用的函数，用于读取单个服务器的数据。在LoginData中有一个上次登陆的ID的属性。创建函数 记录点击的是哪个服务器到哪个服务器。会省略一些东西，可以看我的NGUI的博客。
[转]Unity3D新手教学，让你十二小时，从入门到掌握！（一）
小小姑娘
12-05 3483
这个是游戏的主摄像机，也就是说我们玩游戏的视图都是这个东西拍摄下来的游戏引擎里的游戏对象。首先声明一下，我用的Unity版本是4.6.6，编译环境是VS2010，其余的我会慢慢介绍，安装的过程这里我就不做讲解了，度娘那会做的比我详细。**避免出现不必要的Bug。创建脚本前以防我们的工程文件会很乱，所以我们要新建一些文件夹，为我们的资源分类，我分了这些类，并且创建了一个。这个我用着不方便，按照我个人的习惯，变成了这样的布局，当然这是个人喜好，可以不用模仿我。好了，运行游戏，你的Player已经可以移动了。
unity 3d ui gui ugui
05-10
Unity 3D是一款基于三维物理引擎的游戏开发引擎，Unity 3D UI GUI UGUI是其中一部分。在游戏开发中，UI界面是非常重要的，Unity中的UI系统由GUI和UGUI两种，其中GUI是比较老的系统，在Unity3D 4.x版本时就开始应用，而UGUI则是在Unity 3D 4.6中开始加入。 Unity的GUI系统主要用于2D游戏开发，并且只支持屏幕坐标计算，而且使用起来较为麻烦，开发者需要自己编写所有UI元素和事件的代码。而UGUI系统则是专为3D游戏开发设计的，UI界面可以随意在3D场景中放置并进行交互，开发者只需操作可视化的编辑器就可以完成UI的制作，而不用写代码。 在UGUI系统中，一个UI元素是一个GameObject，UI元素之间的嵌套关系也像GameObject之间的嵌套一样，这个设计使得UI的制作和修改变得非常直观。而且UGUI中内置了许多可以直接调用的UI组件，如Image、Text、Button、InputField、Scrollbar等，它们可以极大地节省开发者的时间。如果需要更加复杂的UI元素，开发者也可以自己编写UI组件。 总之，Unity 3D UI GUI UGUI是游戏开发中必不可少的元素。随着UGUI系统的加入，UI界面的制作将变得更加简单、快捷、直观。而且UGUI系统还支持多种平台，包括PC、手机、平板等，能够满足不同平台游戏的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值