Unity UI——UGUI

这篇具有很好参考价值的文章主要介绍了Unity UI——UGUI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

包名:com.unity.ugui

Canvas:

  容纳所有UI元素的区域。

  一种带有画布组件的游戏对象。

  使用EventSystem对象来协助消息系统。

绘制顺序:

按照在 Hierarchy 中显示的顺序绘制,由上到下。

如果两个 UI 元素重叠,则后一个元素将显示在前一个元素之上

渲染模式:(Render Mode)

Screen Space-Overlay:此渲染模式将 UI 元素放置于在场景之上渲染的屏幕上。如果调整屏幕大小或更改分辨率,则画布将自动更改大小来适应此情况。

Unity UI——UGUI,Unity,unity,ui,游戏引擎

Screen Space-Camera:UI 元素由此摄像机渲染,这意味着摄像机设置会影响 UI 的外观。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变,则画布也将自动更改大小来适应此情况。

Unity UI——UGUI,Unity,unity,ui,游戏引擎

World Space:画布大小可用矩形变换进行手动设置,而 UI 元素将基于 3D 位置在场景中的其他对象前面或后面渲染。此模式对于要成为世界一部分的 UI 非常有用。这种界面也称为“叙事界面”。

Unity UI——UGUI,Unity,unity,ui,游戏引擎基本布局:锚点

矩形的不同角可以锚定到父矩形中的不同点。

锚点的位置以父矩形宽度和高度的分数(或百分比)定义。

如果在拖动锚点时按住 Shift 键,矩形的相应角将与锚点一起移动。

左下角锚点位置百分比为(0,0)

Anchor Min:左下角的锚点手柄

Anchor Max:右上角的锚点手柄 锚点在一起:产生固定的宽高,显示的字段为 Pos X、Pos Y、Width 和 Height。Pos X 和 Pos Y 值指示枢轴相对于锚点的位置。 锚点分开:和父矩形一起拉伸,字段可以部分或全部更改为“左”、“右”、“上”和“下”。这些字段定义由锚点定义的矩形内的填充。如果锚点水平分离,则使用“左”和“右”字段,如果垂直分离,则使用“顶部”和“底部”字段。

Image: (图像) Type:

  • Simple:均匀缩放整个精灵

  • Sliced:使用3*3分区,拉伸中心部分

  • Tiled:类似Slided,平铺中心部分

  • Filled:与Simple相同的显示方式,可以规定显示方式、开始方向、显示百分比来控制精灵填充显示

Unity UI——UGUI,Unity,unity,ui,游戏引擎Sprite Editor能够将图像分成9个区域。

Toggle Group:(开关组) 创建:为已创建的Toggle创建一个Empty Parent,为其添加Toggle Group组件。 Allow Switch Off:是否允许选择的开关关闭

动画集成:可以使用Unity的动画系统完全的动画化控件不同状态之间的过渡。

使用:

  1. Transition属性 ->Animation

  2. 将动画器组件附加到控制器元素 单击“Auto Generate Animation”,会生成一个动画控制器

  3. 自定义动画 Window>Animation打开编辑

    1. 点击录制按钮

    2. 添加关键帧

    3. 退出录制

ps:任何数量的属性都可以在这一个关键帧中设置其参数。

自动布局:布局元素 + 布局控制器

布局元素:具有矩形变换以及其他可选组件的游戏对象

  布局元素不直接设置自身的大小,而是可由用作布局控制器的其他组件使用布局元素提供的信息来计算布局元素要使用的大小。

属性:

  • 最小大小(Min Width、Min Height),常规单位

  • 偏好大小(Preferred Width、Preferred Height),常规单位

  • 灵活大小(Flexible Width、Flexibe Height),相对单位(同级填充的可用空间比例)

ps:

  • 完全分配所有偏好大小之后,才分配灵活大小。

  • 指定了灵活大小但未指定偏好大小的布局元素将保持其最小大小,直到其他布局元素已扩展到完整偏好大小为止,仅在此后才基于额外的可用空间开始扩展。

布局控制器:可以控制自己的布局元素(其本身所在的同一游戏对象),或者也可控制子布局元素

用作布局控制器的组件本身也可以同时用作布局元素。

Aspect Ratio Fitter:(宽高比适配器) Aspect Mode:

  • None:不适应宽高比

  • Width Controls Height:根据宽度自动调整高度

  • Height Controls Width:根据高度调整宽度

  • Fit In Parent:使矩形适应父项的矩形,同时保持宽高比。父矩形中可能有一些空间不会由此矩形覆盖。(contain )

  • Envelope Parent:自动调整宽度、高度、位置和锚点,使矩形覆盖父项的整个区域,同时保持宽高比。此矩形可能比父矩形延伸更广。(cover)

布局组:水平布局组、垂直布局组、网格布局组

富文本:类似HTML

We are <b>absolutely <i>definitely</i> not</b> amused

ps:标签参数不能包含空格。

Unity支持的所有标签

标签 描述 示例 注意事项
b 以粗体显示文本。 We are <b>not</b> amused.
i 以斜体显示文本。 We are <i>usually</i> not amused.
size 根据参数值设置文本的大小(以像素为单位)。 We are <size=50>largely</size> unaffected. 尽管此标签可用于 Debug.Log,但如果大小设置得太大,您会发现窗口栏和控制台中的行间距看起来很奇怪。
color 根据参数值设置文本的颜色。可使用传统的 HTML 格式指定颜色。#rrggbbaa …其中的字母对应于十六进制数字对,表示颜色的红、绿、蓝和 Alpha(透明度)值。例如,完全不透明的青色将指定为 color=#00ffffff…

可通过大写或小写形式指定十六进制值;#FF0000 等效于 #ff0000。
We are <color=#ff0000ff>colorfully</color> amused 另一种选择是使用颜色的名称。这种方法更容易理解,但当然,颜色范围受限,并始终假设颜色完全不透明。<color=cyan>some text</color> 下表中列出了可用的颜色名称。
material 这仅对文本网格有用,使用参数指定的材质渲染文本部分。值为 Inspector 显示的文本网格材质数组的索引。 We are <material=2>texturally</material> amused
quad 这仅对文本网格有用,渲染与文本内联的图像。采用指定图像材质的参数、图像高度参数(以像素为单位)以及另外四个表示待显示图像的矩形区域的参数。与其他标签不同,quad 不会包裹一段文本,因此没有结束标签;斜杠字符放在初始标签的末尾,表示“自动关闭”。 <quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5> 这将选择渲染器材质数组中位置的材质,并将图像的高度设置为 20 像素。图像的矩形区域由 x、y、宽度和高度值决定,这些值全部表示为纹理的未缩放宽度和高度的一定比例

支持的颜色

下表列出了可以在 <color> 富文本标签中使用名称而不是十六进制值的颜色。

颜色名称 十六进制值
aqua(等同于 cyan) #00ffffff
black #000000ff
blue #0000ffff
brown #a52a2aff
cyan(等同于 aqua) #00ffffff
darkblue #0000a0ff
fuchsia(等同于 magenta) #ff00ffff
green #008000ff
grey #808080ff
lightblue #add8e6ff
lime #00ff00ff
magenta(等同于 fuchsia) #ff00ffff
maroon #800000ff
navy #000080ff
olive #808000ff
orange #ffa500ff
purple #800080ff
red #ff0000ff
silver #c0c0c0ff
teal #008080ff
white #ffffffff
yellow #ffff00ff

事件系统:事件系统模块之间通信的管理器和协调器

主要作用:

  • 管理视为选中状态的游戏对象

  • 管理正在使用的输入模块

  • 管理射线投射(如果需要)

  • 根据需要更新所有输入模块

消息系统:https://docs.unity.cn/cn/2022.3/Manual/MessagingSystem.html

输入模块:

  • 独立输入模块(Standalone Input Module)

  • 触摸输入模块 (TouchInputModule) :已弃用

支持的事件

  • IPointerEnterHandler - OnPointerEnter - 当指针进入对象时调用

  • IPointerExitHandler - OnPointerExit - 当指针退出对象时调用

  • IPointerDownHandler - OnPointerDown - 在对象上按下指针时调用

  • IPointerUpHandler - OnPointerUp - 松开指针时调用(在指针正在点击的游戏对象上调用)

  • IPointerClickHandler - OnPointerClick - 在同一对象上按下再松开指针时调用

  • IInitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用,可用于初始化值

  • IBeginDragHandler - OnBeginDrag - 即将开始拖动时在拖动对象上调用

  • IDragHandler - OnDrag - 发生拖动时在拖动对象上调用

  • IEndDragHandler - OnEndDrag - 拖动完成时在拖动对象上调用

  • IDropHandler - OnDrop - 在拖动目标对象上调用

  • IScrollHandler - OnScroll - 当鼠标滚轮滚动时调用

  • IUpdateSelectedHandler - OnUpdateSelected - 每次勾选时在选定对象上调用

  • ISelectHandler - OnSelect - 当对象成为选定对象时调用

  • IDeselectHandler - OnDeselect - 取消选择选定对象时调用

  • IMoveHandler - OnMove - 发生移动事件(上、下、左、右等)时调用

  • ISubmitHandler - OnSubmit - 按下 Submit 按钮时调用

  • ICancelHandler - OnCancel - 按下 Cancel 按钮时调用

Unity UI——UGUI,Unity,unity,ui,游戏引擎射线投射器:(Raycaster)

  • Graphic Raycaster(图形射线投射器):用于 UI 元素,位于画布上,并在画布中搜索

  • Physics 2D Raycaster(2D 物理射线投射器):用于 2D 物理元素

  • Physics Raycaster(物理射线投射器):用于 3D 物理元素

设计用于多种分辨率的 UI:

  • 确定位置:使用锚点来适应不同的宽高比

  • 大小缩放:画布缩放器 (Canvas Scaler),随屏幕大小缩放(Scale With Screen Size)

画布缩放器

属性:

UI Scale Model:(确定画布中的 UI 元素的缩放方式)

  • Constant Pixel Size:无论屏幕大小如何,UI 元素都保持相同的像素大小。

  • Scale With Screen Size:屏幕越大,UI 元素越大。

  • Constant Physical Size:无论屏幕大小和分辨率如何,UI 元素都保持相同的物理大小。

Scale With Screen Size

原理:默认将宽度或当前分辨率与画布缩放器的宽度比较,将结果作为所有内容的的缩放因子.

目前横向分辨率 960 x 640 的宽度是纵向画布缩放器 640 x 960 的 1.5 倍,因此布局的比例增大到了 1.5。

Unity UI——UGUI,Unity,unity,ui,游戏引擎

属性: 功能:
Reference Resolution UI 布局设计的目标分辨率(设计图尺寸)。如果屏幕分辨率较大,则 UI 会放大,如果较小,则 UI 会缩小。
Screen Match Mode 在当前分辨率的宽高比不适应参考分辨率时,用于缩放画布区域的模式。
Match Width or Height 以宽度、高度或二者的某种平均值作为参考来缩放画布区域。
Expand 水平或垂直扩展画布区域,使画布不会小于参考。
Shrink 水平或垂直裁剪画布区域,使画布不会大于参考。
Match 确定是否以宽度、高度或二者的某种平均值作为参考进行缩放。
Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置,则精灵中的每个像素将覆盖 UI 中的一个单位。

使 UI 元素适应其内容的大小:内容大小适配器 (Content Size Fitter)

原理:文本组件充当布局元素,可提供有关最小大小和偏好大小的大小信息。在手动布局中,不会使用此信息。内容大小适配器是一种布局控制器,可监听布局元素提供的布局信息,并根据此信息控制矩形变换的大小。

适应其内容的大小的同时添加填充:水平布局组/垂直布局组 + 内容大小适配器

  • 将 Horizontal Fit 和/或 Vertical Fit 设置为 Preferred 设置。

  • 使用水平布局组/垂直布局组中的填充属性来添加和调整填充。

原理:

  1. 布局组会监听该组内的子项提供的布局信息。布局组将确定该组必须为多大(最小大小和偏好大小)才能够包含所有子项,并充当布局元素来提供这些有关最小大小和偏好大小的信息。

  2. 内容大小适配器会监听同一游戏对象上的任何布局元素提供的布局信息,此处由水平(或垂直)布局组提供。根据设置,内容大小适配器随后会基于此信息控制矩形变换的大小。

使布局组的子项适应各自的大小:禁用布局组上的 Child Force Expand 开关。如果子项本身也是布局组,可能还需要禁用这些子项上的 Child Force Expand 开关。

原理:一个游戏对象可以有多个组件,每个组件都提供有关最小大小、偏好大小和灵活大小的布局信息。优先级系统将确定哪些值优先于其他值。布局元素组件的优先级高于文本、图像和布局组组件,因此可用于覆盖它们提供的任何布局信息值。

如果希望某些子项进行扩展以便填充额外的可用空间,而其他子项不扩展,该怎么办?

向需要扩展的子项添加布局元素组件并在这些布局元素上启用 Flexible Width 或 Flexible Height 属性,即可轻松控制此行为。父布局组仍应禁用 Child Force Expand 开关,否则所有子项将灵活扩展。

原理:布局组监听子项提供的布局信息时,还会考虑覆盖的灵活大小。然后,在控制子项的大小时,布局组不会让子项的大小超过偏好大小。但是,如果布局组启用了 Child Force Expand 选项,则始终会使所有子项的灵活大小至少为 1

通过脚本创建UI元素: https://docs.unity.cn/cn/2022.3/Manual/HOWTO-UICreateFromScripting.html

  1. 创建预制体

  2. 实例化:Instantiate方法,在设置实例化的 UI 元素的父项时,建议使用 Transform.SetParent 方法并将 worldPositionStays 参数设置为 false。

  3. 定位:借助其矩形变换 (Rect Transform) 定位

  4. 自定义:获取各种组件并更改其属性

创建屏幕过度:动画控制器 + 两个状态(Open/Closed)+ 布尔参数(Open)

管理屏幕(Scene):SceneManager

查看Scene索引:File—>Build setting

使用LoadScene加载Scene

//第二个参数AddSceneMode.Additive表示当前场景不销毁,并加载需要的场景

SceneManager.LoadScene("SceneName", LoadSceneMode.Additive);

//LoadSceneMode.Single:销毁当前场景,加载要加载的场景

SceneManager.LoadScene(Scene索引,LoadSceneMode.Single);文章来源地址https://www.toymoban.com/news/detail-860965.html

到了这里,关于Unity UI——UGUI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI一键绑定UI控件工具(编辑器拓展)

    全为一键生成 实现自动生成代码绑定UI控件 并生成字典保存UI控件 减少自己拖拽 和手动书写过程 适用动态加载面板 建议搭配UI框架使用 根据当前选中的gameobject 查找其下方是否有对应类型的控件 有就保存到字典中 然后通过向上递归拼凑地址,然后生成到粘贴板 直接粘贴到目

    2024年04月23日
    浏览(62)
  • Unity3D学习之UI系统——UGUI

    3.2.1 Screen Space -Overlay 覆盖模式 3.2.2 Screen Space - Camera 摄像机模式 创建专门的摄像机渲染UI 并让主摄像机不渲染UI层 3.2.3 World Space 宽高 * 缩放系数 = UI界面大小 参考分辨率 图片格式要改为Sprite 恒定像素模式计算公式 会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量

    2024年02月21日
    浏览(261)
  • Unity中UI方案。IMGUI、UIElement、UGUI、NGUI

    引言         unity中有很多ui方案,各种方案有什么优势劣势,这里一一列举一下,知识扩充一下。 UI方案 适用范围 IMGUI 仅用于Editor扩展,或运行时Debug UIElement 可用于发布运行时和Editor UGUI Runtime,两大主流 UI 解决方案之一 NGUI Runtime,两大主流 UI 解决方案之一,现已较少

    2024年02月09日
    浏览(54)
  • 【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

    一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。 https://github.com/Ankh4396/UIEffect 让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控

    2024年02月04日
    浏览(46)
  • 【Unity之UI编程】如何用UGUI搭建一个登录注册面板

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 : UI_Unity专栏 🅰️ **** 逻辑:没有输入账号密码按下登录的时候打开提示面板,按下确定后返回并移除面板(淡入淡出效果显示) 逻辑:

    2024年01月23日
    浏览(49)
  • 【unity之UI专题】—UI如此简单之UGUI六大组件(GIF思维导图详解)

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 : unity常用API 👽 ScreenSpace —overlay(覆盖模式) UI组件一直显示在屏幕前,覆盖所有 对应图示: 👽 ScreenSpace—Camera 摄像机模式 摄像机不

    2023年04月11日
    浏览(60)
  • 【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)

    UI设计又称界面设计,是指对软件的人机交互、操作逻辑、界面美观的整体设计,UI就相当于人可以看到的界面,并且可以对UI进行交互。 Unity  3D的UI,分为UGUI和GUI,UGUI主要是图形渲染界面,搭建方便,学习比较容易,GUI主要是代码渲染界面,需要在编写代码时就思考如何完

    2024年02月03日
    浏览(42)
  • 【Unity编辑器扩展】(三)PSD转UGUI Prefab, 一键拼UI解放美术/程序(完结)

    解放UI程序/美术? psd文件一键转ui prefab 支持所有ui类型 支持textmeshpro psd一键转ugui prefab工具 设计原理和详细使用方法 第一步,把psd图层转换为可编辑的节点树,并自动解析UI类型、自动绑定UI子元素:  第二步, 点击“生成UIForm\\\"按钮生成UI预制体 (若有UI类型遗漏可在下拉菜单

    2024年02月13日
    浏览(40)
  • 【100个 Unity实用技能】☀️ | UGUI中 判断屏幕中某个坐标点的位置是否在指定UI区域内

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 🌲Unity实战100例专栏推荐:Unity 实战100例 教程 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📆 未来很长

    2024年01月25日
    浏览(68)
  • Unity - 搬砖日志 - UGUI合批优化 - Overlap(UI AABB 有重叠), Z != 0 照样合批的方案

    Unity : 2020.3.37f1 Pipeline : BRP (另一个项目在 2021.1.xx 的 LTS 下的 URP 管线同样如此,目测:因为 UGUI 不受渲染管线切换而变化) 便于索引,记录搬砖 可以看到,下图 Canvas 的 Render Mode 在使用: Screen Space - Overlay 模式下的DC为 8 这里导致合批失败的有两个问题: 图片显示有相互的

    2024年02月13日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包