首页 > 其他分享 >Unity+Pico 与UI的交互

Unity+Pico 与UI的交互

时间:2023-03-04 14:55:39浏览次数:77  
标签:精灵 UnityEvent 画布 Unity Pico UI 组件 交互

一、Canvas

画布 (Canvas)是应该容纳所有UI元素的区域。画布是一种带有画布组件的游戏对象,所有UI元素都必须是此类画布的子项。画布使用EventSystem对象来协助消息系统。

创建新的UI素(如使用菜单GameObject > UI > Image创建图像)时,如果场景中还没有画布,则会自动创建画布。UI元素将创建为此画布的子项。

1、绘制元素的顺序

画布中的UI元素按照它们在Hierarchy中显示的顺序绘制。首先绘制第一个子项,然后绘制第二个子项,依此类推。如果两个UI 素重叠,则后一个元素将显示在前一个元素之上。

要更改元素的显示顺序,只需在Hierarchy中拖动元素进行重新排序。也可以通过在变换组件上使用以下方法从脚本控制顺序:SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。

2、渲染模式

画布具有渲染模式 (Render Mode)设置,可用于在屏幕空间或世界空间中进行渲染。

1、Screen Space - Overlay

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

2、Screen Space - Camera

此渲染模式类似于Screen Space - Overlay,但在此模式下,画布放置在指定摄像机前面的给定距离处。UI元素由此摄像机渲染,这意味着摄像机设置会影响 UI 的外观。如果摄像机设置为正交视图,则UI元素将以透视图渲染,透视失真量可由摄像机视野控制。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变,则画布也将自动更改大小来适应此情况。

3、World Space

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


 

二、可视组件

随着UI系统的引入,添加了各种新组件来帮助创建GUI特定功能。这里介绍了可创建的组件的基本信息。

1、文本(Text)

文本组件也称为标签 (Label),有一个文本区域可用于输入要显示的文本。可以设置字体、字体样式、字体大小以及文本是否支持富文本功能。

有一些选项可以设置文本的对齐方式、水平和垂直溢出的设置(控制文本大于矩形的宽度或高度时会发生什么情况)以及一个使文本调整大小来适应可用空间的Best Fit选项。

2、图像(Image)

图像具有矩形变换组件和图像组件。可在 Target Graphic 字段下将精灵应用于图像组件,并可在 Color 字段中设置其颜色。还可将材质应用于图像组件。Image Type 字段可定义应用的精灵的显示方式,提供的选项包括:

Simple - 均匀缩放整个精灵。

Sliced - 使用 3x3 精灵分区,确保大小调整不会扭曲角点,而是仅拉伸中心部分。

Tiled - 类似于 Sliced,但平铺(重复)中心部分而不是对其进行拉伸。对于完全没有边框的精灵,整个精灵都是平铺的。

Filled - 按照与 Simple 相同的方式显示精灵,但不同之处是使用定义的方向、方法和数量从原点开始填充精灵。

选择 Simple 或 Filled 时显示的 Set Native Size 选项会将图像重置为原始精灵大小。

通过从“Texture Type”设置中选择 Sprite (2D/UI),可以将图像导入为 UI 精灵。与旧的 GUI 精灵相比,现在的精灵有额外的导入设置,最大的区别是增加了 Sprite Editor(精灵编辑器)。Sprite Editor 提供图像 9 切片选项,此选项将图像分成 9 个区域,如此一来,如果精灵调整大小,角点就不会拉伸或扭曲。

3、原始图像(Raw Image)

图像组件采用精灵,但原始图像采用纹理(无边框等)。只有在必要时才应使用原始图像,否则大多数情况都适合使用图像。

4、遮罩(Mask)

遮罩不是可见的UI控件,而是一种修改控件子元素外观的方法。遮罩将子元素限制(即“掩盖”)为父元素的形状。因此,如果子项比父项大,则子项仅包含在父项以内的部分才可见。


 

三、交互组件

本部分将介绍 UI 系统中的交互组件,这些组件可用于处理交互,例如鼠标或触摸事件以及使用键盘或控制器进行的交互。

交互组件本身不可见,必须与一个或多个可视组件组合才能正常工作。

1、通用功能

大多数交互组件都有一些共同点。这些组件是可选择的组件,这意味着它们具有共享的内置功能,可用于对状态(正常、突出显示、按下、禁用)之间的过渡进行可视化,也可用于通过键盘或控制器导航到其他可选择的组件。

交互组件至少有一个UnityEvent,当用户以特定方式与组件交互时将调用该UnityEvent。UI系统会捕获并记录从附加到UnityEvent的代码传出的任何异常。

2、按钮(Button)

按钮有一个OnClick UnityEvent用于定义单击按钮时将执行的操作。

3、开关(Toggle)

开关有一个Is On复选框用于确定开关当前是打开还是关闭状态。当用户单击开关时,此值将反转,并可相应打开或关闭可视复选标记。按钮还有一个OnValueChanged UnityEvent 用于定义更改该值时将执行的操作。

4、开关组(Toggle Group)

开关组可用于整合一组互斥的开关。属于同一组的开关将受到约束,即一次只能选择其中一个开关:选择其中一个开关便会自动取消选择所有其他开关。

5、滑动条(Slider)

滑动条具有十进制数值,用户可以在最小值和最大值之间拖动。滑动条可以是水平或垂直的。滑动条也有一个OnValueChanged UnityEvent用于定义更改该值时将执行的操作。

6、滚动条(Scrollbar)

滚动条具有一个介于 0 和 1 之间的十进制数值。当用户拖动滚动条时,该值将相应变化。

滚动条通常与滚动矩形 (Scroll Rect) 和遮罩 (Mask) 一起用于创建滚动视图。滚动条具有一个介于0和1之间的Size值,该值用于确定控制柄的大小(占整个滚动条长度的一个比例)。滚动条通常由另一个组件控制,旨在指示滚动视图中可见的内容比例。滚动矩形组件可自动执行此过程。

滚动条可以是水平或垂直的。滑动条也有一个OnValueChanged UnityEvent用于定义更改该值时将执行的操作。

7、下拉菜单(Dropdown)

下拉选单有一个可供选择的选项列表。可为每个选项指定文本字符串和可选的图像,可在Inspector中进行此设置,也可从代码中进行动态设置。下拉选单有一个OnValueChanged UnityEvent用于定义当更改当前选择的选项时将执行的操作。

8、输入字段(Input Field)

输入字段用于使文本元素的文本可由用户编辑。输入字段有一个OnValueChanged UnityEvent用于定义当更改文本内容时将执行的操作,另一个EndEditUnityEvent用于定义用户完成编辑后将执行的操作。

9、滚动矩形/滚动视图(Scroll Rect/Scroll View)

当占用大量空间的内容需要在小区域中显示时,可使用滚动矩形。滚动矩形提供了滚动此内容的功能。

通常情况下,滚动矩形与遮罩 (Mask) 相结合来创建滚动视图,在产生的视图中只有滚动矩形内的可滚动内容为可见状态。此外,滚动矩形还可与一个或两个可拖动以便水平或垂直滚动的滚动条 (Scrollbar) 组合使用。


 

四、Pico与UI的交互

为了实现Pico与UI的交互,需要在场景中加入UI Canvas,并将UI组件放到此canvas。同时,要使用UI EventSystem代替传统的EventSystem。这样,当射线与交互组件交互时,就可以触发不同交互组件对应的UnityEvent。

至于触发UnityEvent时的回调函数,可以参考Unity+Pico 物体响应射线事件注册回调函数的操作过程。

标签:精灵,UnityEvent,画布,Unity,Pico,UI,组件,交互
From: https://www.cnblogs.com/zerotoinfinity/p/17178266.html

相关文章

  • pythonUI自动化之浏览器启动参数设置
    网上的文章对小白不友好呀,都是给你一堆参数,都不教你怎么使用,直接跳过了最重要的部分,写下该文章希望对后续人有指导性作用 什么参数都不设置时的启动方式importtimef......
  • Unity ‘xxx Class’ is missing the class attribute 'ExtensionOfNativeC
    Unity‘xxxClass’ismissingtheclassattribute'ExtensionOfNativeClass翻译:‘xxxClass’缺少类属性`ExtensionOfNativeClass`这个就是当脚本继承了MonoBehaiour,......
  • 使用element-ui+vue2实现oss直传上传图片
    <template><div><el-upload:action="dataObj.host":data="dataObj"list-type="picture":multiple="false":show-file-list="showFile......
  • unity3D控制手枪的旋转05
    新建脚本文档要达到鼠标控制手枪的旋转确定枪的旋转角度usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassGunManage......
  • easyui在datagrid只想选择一条
    <tableclass=""id="jgrid"data-options="fitColumns:true,rownumbers:true,singleSelect:true">singleSelect:true......
  • Unity无限滑动列表
      //解释下Start里的代码 ......
  • unity3D使用协程控制怪物的生命周期
    分析九个坑位要随机生成怪物,随机时间生成类似打地鼠协程(Coroutines)协程:协程是一个分部执行,遇到条件(yieldreturn语句)时会挂起,直到条件满足时才会被唤醒继续执行后面的......
  • unity3D控制怪物的随机生成
    对target创建脚本逻辑梳理控制目标显示与隐藏控制被射击是否显示死亡动画创建怪物数组usingSystem.Collections;usingSystem.Collections.Generic;usingUni......
  • One UI 5.1 更新来了
    之前一直在关注OneUI5.0里提到的视频通话背景功能模块,结果5.0版本推送的时候没有引入,有先行者计划博主说是5.1里肯定会有的;前一两天OneUI5.1更新来了,然而该功能还是没有......
  • Element-UI
    Element-UIhttps://blog.csdn.net/weixin_48884617/article/details/123077247?spm=1001.2014.3001.55021.环境配置1.1vue安装首先使用以下命令卸载旧版本:npmuninst......