Unity UGUI入门

已于 2024-05-13 21:53:25 修改
阅读量1.1k 收藏 12
点赞数 31
分类专栏： Unity入门篇 文章标签： unity 游戏引擎
于 2024-04-19 19:29:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58870988/article/details/137974918
版权
本文详细介绍了Unity中的UGUI系统，包括RectTransform、UI定位、锚点、Pivot、缩放和旋转等概念，以及Canvas、RenderMode、CanvasScaler、DPI管理、图形射线检测、UI层级排序、各种组件如Image、Text、Toggle等的使用方法和注意事项。
摘要由CSDN通过智能技术生成
UGUI
  • RectTransform: （RectTransform是transform的子类）
  • UI位置：是在锚点为原点的二维坐标，决定了UI在屏幕的显示位置，最基础的属性UI大小：UI在屏幕中的长和宽
  • 锚点(Anchors)：的位置决定了物体的对齐方式，对齐某个点或者某个边。
  • Pivot：UI对图片的对应点，中心点
  • 缩放：修改UI的缩放大小。旋转：UI的旋转角度
  • Unity 提供的快速对齐方案，可以选择对应的位置快速设置锚点， 按住 ALT 件可以直接设置   ， 锚点可以适配屏幕的某一部分

Unity组件入门篇总目录----------点击导航

Canvas:（画布）

  • Render Mode: Screen Space -Overlay

            

  • Render Mode: Screen Space -Camera

            

  • Render Mode: world Space

            

  • Canvas Scaler：

  • UI scale mode ：Constant Pixel Size

            
            当遇到不适配的情况
            GetConponent<CanvasScaler>().scalerFactor = （比例）

  • UI scale mode ：scale with screen size

            

  • screen match mode：

  • match width Screen Size：根据屏幕的高和宽匹配。
  • Expand：不会让屏幕尺寸小于标准尺寸，会往外扩展
  • Shrink ：画布大小不会高于屏幕分辨率，会压缩

UI scale mode ：Constant Physical Size

  • DPI：一平方英尺的屏幕点数
  • Fallback screen DPI：当无法找到物理的DPI的时候，就使用后面的默认值
  • Default sprite DPI ：默认的 DPI

GraPhic Raycaster（图形射线）

Ignore Revered Graphics ：忽略颠倒的图形，在图形旋转后射线就不响应，反之则响应
Blocking Objects ：阻挡的对象类型（判断依据是2D还是3D 的碰撞体，和本来的物体无关）
      •   None ：任何物体都不会阻挡
      •   Two D: 仅 2D 物体阻挡
      • Three D ：仅 3D 物体阻挡
      • All ：所有物体都会阻挡
Blocking Mask ： 对应的那些层可以阻挡UI的射线。

Canvas Group:（画布组）

Blocks Raycasts:所管理的射线是否可以进行射线检测。
Ignore Parent Group ：忽略父物体的管理

UI渲染层级的基本概念：（挺重要的，可以帮助理解）

UI 的渲染层级，后渲染的会在先渲染的前面，这就是 UI 的层级排列顺序，谁后渲染就会显示在屏幕前面。决定 UI 层级有四个种因素
1 ，摄像机：
摄像机的位置决定了UI的显示，当看不到的UI的位置，UI就不会显示，不同的摄像机，可能显示的UI也不同，在相机中有Depth的参数，这个参数决定了显示的顺序，就是UI的渲染顺序。
2 ， Sorting Layer
是自定义的渲染层级，会根据你自定义的渲染层进行排序，决定UI组件的先后顺序。
3 ， Order in Layer
当物体在同一个层级的时候，如何决定物体的渲染顺序，就用到的order in Layer它的参数大小就决定的UI的渲染顺序
4 ，自然顺序
UI的排列顺序和Hlerarchy的排队有关的，在上面的UI组件会先渲染，会在最开始出现在屏幕的最后面，在后面的UI组件会后渲染，显示在屏幕的前面，在不调整层的情况下会这样显示。

Image：（图片）

Raycast Target ： 决定了当前 UI 是否会进行射线检测，决定触发事件，能否按键响应。
注意点： 导入的必须是精灵（ sprite ）格式。
Image Type ：（图片类型）
  • Simple ： 基础默认的图片，无特殊处理
  • Sliced: 九宫格分割的图片（ fill center 填充中心）
  • Tiled : 平铺
  • Filled: 填充
  • Fill Method 决定了填充的模式， Fill Orgin 决定的填充的原点。
  • Fill Amount 填充的百分比。 Clockwise ：顺时针方向
  • Preserve Aspect ：保留方面
UV 坐标的概念：（ Raw image ）
Raw Image 不同于 UIImage ，它是直接添加 Texture 图片，不需要转化成 sprite 类型。 UV 类似于建模中的贴图，决定了贴图的偏移和平铺

Text（文本组件）

Rich Text ：富文本
在一个文本中有不同类型的字体格式，类似于 <b>text</b> 的格式
<i> 斜体 </i>    <size=50> 大小 </size>
<color=red> 颜色 </color>
<color=#ff000000> 颜色 </color>

Unity遮罩（Mask组件）

作用可以遮挡子物体的显示，当子物体超过父物体的大小的时候就会隐藏超出范围的显示，事项遮罩的功能。（mask组件会增加性能消耗,）
尽量使用Rect Mask 2D实现的效果和Mask类似，但是不会增加性能消耗。

Selectable(交互组件的基类)

Color Tint
  • color multiplier 彩色乘法器
  • fade duration 衰减持续时间

Sprite Swap

Animation（UI动画）

可以用 DOtween 插件实现。

Button组件

使用方法：
将物体拖入 None(Object) 中，就可以在右边的位置选择函数方法，然后点击按钮就可以调用方法。

Toggle（复选框）

Toggle Group （复选框组）
Toggle Group 的作用是把多个 Toggle 组成一个组，然后选择的时候就可以单选其中得到一个，其它的就会取消 ， 这个组件的使用方法是拖入需要管理的 Toggle 的 Groupde 的属性中然后就可以一起管理多个组件。

Slider（滑动条）

Whole Numbers ：
这个参数的勾选在移动滑动条的时候一定会是整数，就近取整实现一步一步的滑动，滑动条的主要是控制 value 的值，控制着滑动条的填充。

Scrollbar（滚动条）

Number Of Steps ：
这个参数的值决定了这个滑动条几步可以滑动完，移动的时候可以自适应位置。

ScrollView（滚动框）

Movement Type( 移动模式 ) ：
  • Unrestiricted:无限制的，可以随意拖动。
  • Elastic：有弹性的
  • Clamped：无弹性的，在限定的氛围内移动
  • Visibillty（可见性）
  • Permanent：常驻，就是这个滑动条一直都在。
  • Auto Hide：自动隐藏
  • Auto Hide And Expand Viewport：自动隐藏并且填充。

Dropdown（下拉框）

模板： Template
模板的就像预制体可以以它复制其它的部分
Alpha Fade Speed ：
  • 阿尔法衰减通道，作用是在选择下拉菜单的时候菜单的显示隐藏的渐变时间。
Options ：
  • 选项，是下拉框的选项，在这里添加，删除或赋值下拉框的选项。

Input field：输入框

输入框在日常项目的制作中常常使用，熟练的使用每一个参数可以提高项目的制作效率，输入类型限制了输入的参数，可以修改输入类型满足不同的需求

Content Type（内容类型）：

  • Standard: 标准的可以输入任意字符
  • Autocorrected: 可以自动更正用户的输入
  • Integer Number: 只允许输入整数
  • Decimal Number: 小数，允许输入数字和小数点后一位
  • Alphanumeric: 允许字母和数字，不允许输入符号
  • Name: 名字，自动将每个单词的首字母大写
  • Email Address: 电子邮件地址，允许输入包含 @ 的字母数字字符串
  • Password: 可以输入任何字符，会用‘ * ’隐藏
  • Pin: 仅为整数，会用‘ * ’隐藏
  • Custom: 自定义类型，输入类型，默认键盘类型，字符验证
  • Single Line ： 输入的内容是一条直线不会换行
  • Multi Line Submit ： 输入的内容可以换行，按回车结束
  • Multi Line Newline ： 输入的内容可以换行，按回车换行

Horizontal Layout group（横向对齐）

  • Spacing ： 元素之间的间距
  • Reverse arrangement ： 反转排序
  • Control child size: 控制子物体的大小，勾线后就不可以修改子物体的大小，由父物体统一控制
  • Use child size ： 考虑子物体大小对物体的排序的影响
  • Child force expand ： 是否填充满，会根据大小平均分配

Vertical Layout group（纵向对齐）

参数同横向排列。
注意点 control child size 和 child force expand 必须成对出现，不然会出现 UI 消失的情况，（自动 UI 的长或者宽变成 0 ，在 UI 上就显示不出来）

Grid layout Group（网格排序）

Constraint ：自定义排列
  • Flexible ： 没有限制的，自动排序
  • Fixes column count ： 横向设定有多少列
  • Fixes row count ： 纵向设定有多少行
网格排序在功能上可以替代横向和纵向排序，在实际的项目制作中网格排序也应用的很常见。

Layout Element （布局元素）

  • Flexible Height ： 给在一个网格排序的组下，按照比例进行高度缩放，比例是参数的大小
  • Flexible Width ： 给在一个网格排序的组下，按照比例进行宽度缩放，比例是参数的大小
注意事项：在勾线最小高度或者宽度的时候，勾线 child force expand 会出现在显示原本的 UI 在最小高度的情况下再平分。

Aspect ratio fitter（横竖比值）

  • Width controls Height: 宽高适配，根据宽度设置高度，高度不可修改
  • Height Controls Width: 宽高适配，根据高度设置宽度，宽度不可修改
  • Fit In Parent: 图像不会超过父物体，限制在父物体内。
  • Emvelope Parent: 根据宽高比完全覆盖父物体。

Content size fitter（内容尺寸适配）

  • Unconstrained ： 不做任何适配
  • Min size ： 根据最小值大小适配
  • Perferred size ： 根据初始值大小适配
小技巧：可以应用在文本输入框中，会自动适配文本大小，将显示不出来的文字显示出来，实现对应的需求。

作者的一点废话：

 Unity UGUI要想熟练使用，还是得经常的去做各种练习，熟能生巧嘛，现在记不到各种参数也没关系，记住常用的就行，有些生僻的参数确实在实际的项目中也不一定用的到，想不起来就回来查查嘛，之后有新的更新，我会更新这篇文章（先把坑埋这里，后面来填），觉得有用的话就点个赞吧( ´･∀･｀)

日志：

2024/4/19 19:28  //基础文章初版上传

2024年5月13日 21：53//添加unity入门篇总目录
真的是这样的吗_
关注
  • 31
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UGUI实例合集
02-14
使用UGUI的入门实例合集，可实现大部分界面需求的制作
UGUI 官方资源包
11-16
官方uguidemo，新手入门很好的资源，免费推荐给大家。
Unity技术手册-UGUI零基础详细教程-Text文本（打字、阴影、渐变）_unity 文字特效(1)
最新发布
2401_84165919的博客
05-14 985
众所周知，人生是一个漫长的流程，不断，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，！！！专注于和各种游戏开发技巧，以及（网站、工具、素材、源码、游戏等）有什么需要欢迎私我，交流群让学习。
Unity之UGUI详解
热门推荐
BraveRunTo的博客
06-09 3万+
UGUI 文章目录UGUI六大基础组件概述Canvas对象上依附的：CanvasCanvas ScalerGraphic RaycasterRectTransformEventSystem对象上依附的：EventSystemStandalone Input ModuleCanvas画布组件Screen Space overlayScreen Space CameraWorld SpaceCanvasScaler画布缩放控制器组件学前准备：Constant Pixel Size恒定像素模式Scale With
【Unity基础】ugui的基础知识篇
qq_41094072的博客
09-26 6822
这里主要学习UGUI的可视化组件 参考资料:https://docs.unity3d.com/cn/2021.3/Manual/UIVisualComponents.html。
Unity3D的UI系统（UGUI）初级入门
03-21
本课程主要介绍Unity3d的UI系统（UGUI），先对UGUI做一个总体概述，之后对每个UI控件逐一进行详细讲述，内容包括控件的作用、设置方法、使用场景及属性细节，帮助大家熟练使用UGUI设计游戏的交互界面。
Unity基础UGUI学习
wangwen_22的博客
11-06 2216
2.多个Canvas使用相同Camera时，优先根据SortingLayer显示，当SortingLayer相同时，再次根据OrderInLayer显示。使用 UGUI来开发UI，离不开Canvas组件，所有的 UI 元素，一般都是放在包含 Canvas 组件的节点。Sort Order：Canvas 深度，多个 Canvas时，Sort Order 值大的在上层。Sorting Layer：Canvas深度，可以手动添加，决定显示的优先级，列表下面的优先级越高。这篇文章很详细，可以看看，
Unity3D学习之UI系统——UGUI
Lmz_0314的博客
02-05 2825
创建专门的摄像机渲染UI并让主摄像机不渲染UI层。
Unity零基础入门教程.rar
06-30
总之，Unity零基础入门教程将引导你逐步探索这个强大的工具，从安装Unity到创建你的第一个游戏场景，再到编写交互逻辑，最终实现一个简单但完整的游戏项目。通过不断实践和学习，你将能够熟练掌握Unity，并具备开发...
UGUI 官方案例
03-25
在"UGUI 官方案例"中，你将找到一系列使用UGUI的入门实例，这些实例涵盖了UGUI系统的各种核心组件和功能。以下是一些关键知识点的详细介绍： 1. **Canvas**：这是UGUI的基础，它定义了UI元素的渲染空间。Canvas有三...
击落UFO的unity小游戏
05-07
总之，“击落UFO的Unity小游戏”是一个集Unity入门、C#编程和游戏开发基础知识于一体的实践项目，对于想要学习Unity的初学者来说，是一个很好的起点。通过实际操作和修改代码，你可以深入理解游戏开发的基本流程和...
Unity3D学习之UI系统——使用UGUI制作游戏登陆界面
Lmz_0314的博客
02-20 3324
设置 Canvas不被删除，将eventSystem和Camera（渲染UI的）拖入Canvas。在LoginPanel中提供方法设置用户名和密码（用于注册成功后，自动填写。修改一下显示面板的逻辑，如果已经创建，则不需要再显示面板。在LoginData里增加一个记录上次登陆服务器的内容。串联登陆面板，在登陆面板的点击注册事件中添加显示。重写ShowMe函数，让其显示的时候显示服务器。在点击进入游戏后，存储选择的服务器信息。在创建新面板时，得到Canvas对象。设置一个事件，让淡出完成时删除自己。
【Unity 3D】UI系统中UGUI各个组件的详细讲解（附源码 超详细）
showswoller的博客
01-04 5559
【Unity 3D】UI系统中UGUI各个组件的详细讲解（附源码 超详细）
Unity中的UI系统之UGUI
K_CRACKING的博客
04-22 1861
UGUI是什么UGUI是Unity引擎内自带的UI系统官方称之为:Unity UI是目前Unity商业游戏开发中使用最广泛的UI系统开发解决方案它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能不能用于开发Unity编辑器中内置的用户界面如何在Unity中使用UGUI直接在Hierarchy窗口中右键选择UIUI中所有内容都是UGUI相关控件六大基础组件1、Canvas对象上依附的:①Canvas:画布组件,主要用于渲染UI控件②。
Unity 如何把UGUI做到极致的优化
你只管努力，其他的，交给天意！
07-01 6903
在日常工作中，UI的性能往往是被忽略的一点，他其实看似影响不大，但当一个项目达到了性能瓶颈的时候，你反过来在去优化UI，你会发现你大部分的性能，内存，包体全都的原因都处于UI系统。 一个没有提前考虑性能和优化的UI系统带来的问题会有很多，比如： Apk包体过大 界面之间切换不流畅 动画卡顿掉帧 内存占用过大（会导致应用闪退） Draw Call过多导致GPU渲染压力大游戏掉帧 顶点过多造成游戏卡顿 这只是一部分在游戏中很常见的性能问题。 那么究竟是什么原因造成了我们的UI性能下降。 首先，要知道为什么会
【unity之UI专题】—UI如此简单之UGUI六大组件（GIF思维导图详解）
秩沅
04-08 2200
思维导图式详解
[UGUI]Unity背包系统制作详细步骤
leoysq的博客
11-23 2363
创建空物体作为网格内容容器，相对父亲居中，700*450像素，为他再添加一个组件UI -image，铺满作为背包背景图。滑动框是由三部分组成：横向和纵向滑动块、被关联的滑动内容（这个内容可以是任何UI，文本、图片、视频，只认UI）在创建一个顶部image做LOGO（宽度和父亲一样，高是50像素），里面创建子文本写上内容。选中BG，找到他的锚点设置，按住Alt键，点击右下角的适配，让锚点和内容都匹配画布。然后把位置调整好，把刚才做好的背包关联到滑动面板的内容变量里面。然后开始添加子物体，可以看到自动排列了。
Unity-UGUI
qq_50682713的博客
09-23 1088
1. 控件值改变的入参Single为float，选择最上方Dynamic中的方法 2. Button控件 方法 描述 onClick.AddListener() 添加监听点击的事件 3. Slider控件 方法 描述 onValueChanged.AddListener(float) 添加监听值改变的事件 4. Dropdown控件 方法 描述 onValueChanged.AddListener(int) 添加监听值改变的事件 5. Toggle
UGUI学习
guapiyipian的博客
02-13 825
UGUI学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值