网格 101 教程第 3 章:使用网格可视化脚本添加交互性
注意
我们定期更新网格工具包,此视频可能不会反映所有最新更改。 应将本文的内容视为事实来源。
完成设置阶段后,让我们继续使 GameObjects 交互! 在本章中,我们将深入了解网格可视化脚本,可用于向环境添加自定义逻辑。
注意
有两种类型的网格脚本:网格云脚本,它使用 C# 代码和网格视觉脚本,在其中创建脚本图,然后在序列中添加节点(也称为 单元),以创建编码逻辑。 此版本的网格 101 教程使用网格可视化脚本;以前版本使用了网格云脚本。
每个环境不需要网格脚本,但你需要它来添加此处的功能:使按钮交互、触发信息性文本弹出和围绕场景进行传送。
工作站 3.1:创建可交互按钮
对于我们的第一个任务,我们希望创建一个按钮,该按钮将在头像按下时播放视频。 然后,头像可以按相同的按钮停止视频。
- 在 “场景 ”窗口中,导航到包含第 3 章的工作站的 Sphere 露台,并调整视图,以便查看第一个工作站 3.1 - 视频播放,如下所示。
如你所看到的,已经有一个视频屏幕到位,但它需要“播放/停止”按钮。 正如工作站文本框所解释的那样,我们将创建一个包含一些按钮逻辑的脚本图,以便该按钮可用于打开和关闭视频播放器并更改按钮文本。
将按钮添加到场景
在 Unity 中,请确保名为 Chapter3 的 GameObject 及其名为 3.1 的子对象 - 视频已展开。
在 “项目” 窗口中,搜索 ButtonBase prefab。 请确保为搜索筛选器选择 ALL。
从“项目”窗口中拖动 ButtonBase,然后在层次结构中将其拖放到名为 3.1 的 GameObject 上 -- 视频,以便 ButtonBase 作为子级放置到 3.1 -- 视频。
确保 ButtonBase 的转换>位置值为 0、0、0。
ButtonBase 放置在场景中比我们想要的位置要低一点。 现在来解决此问题。
确保在层次结构中选择 ButtonBase。
在检查器中,将转换>位置>Y 值更改为“1”。
太完美了! 现在 ,ButtonBase 位于视频屏幕正下方正确。
重命名按钮
选中 ButtonBase 后,在检查器中,将 ButtonBase 的名称更改为“PlayVideoButton”。
更改按钮的标签
现在,按钮上的文本显示 “标签”。 让我们将它更改为“播放”。
在层次结构中,展开 PlayVideoButton GameObject 以显示其子对象 Button,然后展开 Button 以显示其子对象,然后选择 Label 子对象。
在检查器中,导航到 TextMeshPro -- Text 组件,然后在“文本输入”框中,将文本更改为“播放”。
为按钮创建视觉脚本
在层次结构中,确保已选择 PlayVideoButton。
在检查器中,单击“添加组件”,然后选择“脚本计算机”。
请注意,检查器中添加了两个新组件:脚本计算机和变量。 检查器底部还有一个名为“网格可视化脚本诊断”的新窗口。 此窗口将提供有关视觉脚本的反馈,对于故障排除非常有用。
请注意,在 脚本计算机 组件中,“ 源 ”选项设置为 Graph。 源有两个选项:Graph 和 Embed。 每个都有优点和缺点。 我们将为脚本选择 Graph ,因为 Graph 脚本保存为单独的文件,这提供了更大的灵活性。
提示
Unity 脚本计算机文章更详细地介绍了 Graph 和 Embed。
在脚本计算机组件中,单击“新建”按钮。
在 “保存图形 ”窗口中,创建新文件夹,然后将其重命名为“脚本”。
打开“脚本”文件夹, 然后在“文件名 ”文本框中,键入“PlayVideoButton”。
完成后,单击“ 保存 ”按钮。
在 脚本计算机 组件中,在图形的 “标题 ”字段中输入名称:“视频播放器”。
在图形的 “摘要 ”字段中输入说明:“定义视频播放器如何响应播放/停止操作。
设置脚本图
在脚本计算机组件中,单击“编辑图形”。 这将打开 “脚本图 ”窗口。 将它拖放到“项目和控制台”选项卡旁边(如果尚不存在),以便我们可以同时看到“脚本图和场景”窗口。
添加节点时,可能需要窗口中的更多空间;可以单击三点按钮,然后选择“ 最大化 ”来实现此目的,或单击 窗口右上角的全屏 按钮。
注意
节点也称为 Visual Scripting 中的单元。 在本教程中,我们将继续使用术语 节点。
我们不需要默认 的 OnStart 和 OnUpdate 节点;请将其删除。
脚本图形布局
脚本图将包含两个部分:
第 1 部分:检测何时单击视频播放器“播放/停止”按钮。 第 2 部分:单击时,播放视频。 再次单击该视频时,请停止视频。
下面是最终结果外观的预览:
检测是否单击该按钮
第一部分(检测按钮是否被单击)需要三个节点。 项目中实际“侦听”并响应单击的 GameObject 为 Button。 让我们将它添加到脚本图。
创建 Button 对象变量
在层次结构中,展开 PlayVideoButton。
在 Script Graph Blackboard 中,创建新的对象变量:在“新建变量名称”字段中键入名称“Button”,然后单击“+”按钮。
将对象变量的类型设置为 Game Object。
从“层次结构”中拖动 Button GameObject,然后将其拖放到新变量的“值”字段中。
从 Blackboard 拖动 Button 对象变量,然后将其拖放到脚本图中,将其添加为节点。
提示:建议在此处花点时间检查按钮 GameObject 的一些组件:
网格可交互设置:此组件使 Button 成为可以与之交互的对象。 若要了解详细信息,请参阅 Grab、hold 和 throw with Interactables。
脚本计算机:它有一个名为 Button Base Behaviour 的脚本图。
如果进入“播放”模式,你将看到名为 “网格可交互正文 ”的新组件已添加到 Button。
此组件在运行时自动添加到可交互正文;它向 Visual Scripting(如 IsHovered 和 IsSelected)公开各种属性,这将在一瞬间派上用场。
在脚本图中,让我们添加一个节点,告知我们何时选择按钮。
如果需要,请退出“播放”模式,然后在层次结构中选择 PlayVideoButton,以确保在“脚本图”窗口中看到其图形。
在脚本图中,单击并按住“获取对象变量”节点的端口,然后释放鼠标按钮。 这将打开模糊查找器。 警告:打开模糊查找器后,请勿在 Unity 界面之外的任何位置单击。 这会关闭模糊查找器并在脚本图中导致不可预知的行为。
搜索 “已选中”,然后在列表中选择“ 网格可交互正文:IsSelected”。
注意:此节点输出布尔值;可以在 Graph 检查器中确认此值。
从“所选”节点的输出端口拖动连接器,然后创建一个名为“Microsoft网格:状态已更改”的新节点。 (在模糊查找器中,搜索 状态已更改。
这是我们的三个按钮单击检测节点。 “所选”节点以 False 值开头,但单击该按钮时,该值将更改为 True,并传递到“状态已更改”节点。 然后,此节点将触发接下来要添加的播放/停止节点。
播放或停止视频
如果 “状态更改” 的值为 true,则视频将播放。 如果已播放并按下按钮, 则“状态更改” 更改为 false 值,视频停止播放。 这会影响脚本图第 2 部分中的节点,我们将很快添加该节点以提供可显示的视频和静止图像。
此处的下一步是添加一个 if 节点以确定流。
从“状态更改”节点的“控制输出”端口拖动连接器,然后创建新的 if 节点。 (在模糊查找器中,搜索 if。
将连接器从“状态已更改”节点的数据输出端口拖动到 if 节点的数据输入端口。
创建变量以确定视频是否正在播放
在 Blackboard 中,转到“对象”选项卡,然后创建名为“isPlaying”的变量。将类型设置为“Boolean”,并取消选中“值”复选框。 这为布尔值提供默认值 false。
将“isPlaying”变量拖到 Script Graph,然后将其拖放到 *If 节点的右侧。
从 If 节点的 True Control 输出端口拖动连接器,然后创建新的“设置对象变量”节点。 (在模糊查找器中,搜索 set 对象。
在 “设置对象变量 ”节点中,单击变量名称下拉列表,然后选择 isPlaying。
isPlaying 变量必须在此处执行双重任务。 为了确保 isPlaying 始终具有正确的值,让我们从反门节点为其提供输入。
从“设置对象变量”的 底部数据输入端口拖动连接器:isPlaying 节点,然后创建新的 反门 节点。 (在模糊查找器中,搜索 否定项。
从反门节点的数据输入端口拖动连接器,然后创建新的“获取对象变量”节点。 (在模糊查找器中,搜索 获取对象变量。)
在 “获取对象变量 ”节点中,单击变量名称下拉列表,然后选择 isPlaying。
反门节点使 IsPlaying 的值与当前设置为的项相反。 场景启动时, isPlaying 为 false(默认值)。 单击“播放/停止”按钮时,反门节点导致“设置对象变量”节点中的“播放”设置为 true,这使得视频播放。 再次单击按钮时, Negate 节点将导致 将Play 重置为 false,这会使视频停止。
播放视频或显示静止图像
现在,我们将开始创建脚本图的第 2 部分。 你将添加检测是否 正在播放 更改的节点;这将确定是播放视频还是在 Station 3.1 的 WebSlate 中显示静止图像。
在图形的下半部分,添加 Get Object Variable 节点并将其值设置为 isPlaying。 (可以在图形中右键单击,然后选择 添加 Node。 搜索 get 对象。)
从 Get 对象变量的数据输出端口 拖动连接器:isPlaying 节点,然后创建新的 “状态更改” 节点。 (在模糊查找器中,搜索 状态已更改。
从“状态更改”节点的控制输出端口拖动连接器,然后创建新的 If 节点。 (在模糊查找器中,搜索 if。
从“状态更改”节点的数据输出端口拖动连接器,然后将其连接到 if 节点的数据输入端口。
Video 和 VideoStill (图像) GameObjects
在层次结构中,展开 VideoPlayer GameObject,并注意它有两个子对象:Video 和 VideoStill。
选择“视频”,然后在检查器中记下以下内容:
视频 具有名为 Video Player 的组件,该组件具有风力涡轮机视频的链接。
视频 处于非活动状态(其名称旁边的复选框为空)。
在层次结构中,选择 VideoStill GameObject,然后在检查器中记下以下内容:
VideoStill 还附加了一个图像。
VideoStill 处于活动状态(选中其名称旁边的复选框)。
当场景启动时,视频屏幕会显示静止图像(由于 VideoStill 处于活动状态),并且不播放视频(这是由于视频处于非活动状态)。 当与会者在显示“播放”时按“播放/停止”按钮时,它会使视频处于活动状态,这会导致视频播放,同时使 VideoStill 处于非活动状态,从而隐藏静止图像。 按钮的标签也会从 “播放 ”更改为 “停止 ”,当与会者再次按下按钮时, 视频 处于非活动状态,停止视频, VideoStill 再次处于活动状态,这使得视频屏幕再次显示静止图像。
图形中的剩余节点会使所有这一切发生。
创建视频和 VideoStill (图像) 对象变量
让我们创建一个对象变量,用于保存视频和 VideoStill GameObjects 的值。
在层次结构中,展开 VideoPlayer。
在 Script Graph Blackboard 中,创建新的对象变量:在“新建变量名称”字段中键入名称“Video”,然后单击“+”按钮。
将对象变量的类型设置为 Game Object。
从“层次结构”中拖动 Video GameObject,然后将其拖放到新变量的“值”字段中。
在 Blackboard 中,创建新的对象变量:在 “新建变量名称 ”字段中键入名称“VideoStill”,然后单击“+”按钮。
将对象变量的类型设置为 Game Object。
从层次结构中拖动 VideoStill GameObject,然后将其拖放到新变量的“值”字段中。
脚本图形结构
这是一个很好的位置,可以停止并考虑我们如何设计脚本图第 2 部分的其余部分。 我们的“If”节点将在“true”流和“false”流中分支。 两个流都需要轻松访问对象变量,因此我们将将它们放在流之间的行上,如下所示:
将视频和 VideoStill 对象变量添加到脚本图
从 Blackboard 拖动视频对象变量,然后将其拖放到脚本图中,将其添加为节点。 将其置于 If 节点下。
从 Blackboard 拖动 VideoStill 对象变量,然后将其拖放到脚本图中,将其添加为节点。 将其置于 Get 对象变量:视频节点的右侧。
打开视频
从 If 节点的“True”控件输出端口拖动连接器,然后创建新的游戏对象:设置活动节点。 (在模糊查找器中,搜索 “已设置活动”。)
从“获取对象变量:视频”节点的数据输出端口拖动连接器,然后将其连接到游戏对象的第一个数据输入端口:设置活动节点。
选中节点的 “值 ”复选框,使节点处于活动状态。
从 Get 对象变量:VideoStill 节点的数据输出端口拖动连接器,然后将其连接到游戏对象的第一个数据输入端口:设置刚刚创建的活动节点。
取消选中节点的 “值 ”复选框。 这可确保节点处于非活动状态。
现在,单击按钮时,视频将播放,仍将隐藏图像。 我们需要在这个序列中再做一件事。 由于“播放/停止”按钮是一个切换按钮,因此我们必须确保与会者单击 “播放”后, 按钮的标签将更改为 “停止”, 然后在再次单击时,标签将更改回 播放。 为此,我们需要创建并添加对象变量,然后添加 TextMeshPro 节点。
创建并添加 Label 对象变量
在层次结构中,确保已展开 PlayVideoButton 及其子对象 Button。
在 Script Graph Blackboard 中,创建新的对象变量:在“新建变量名称”字段中键入名称“Label”,然后单击“+”按钮。
将对象变量的类型设置为 Game Object。
从层次结构中拖动 Label GameObject,然后将其拖放到新变量的“值”字段中。
从 Blackboard 拖动标签对象变量,然后将其拖放到脚本图中,将其添加为节点。 将其 置于 Get 对象变量右侧:VideoStill 节点。
添加文本网格 Pro 节点
从游戏对象的控制输出端口 拖动连接器:设置活动 节点,然后创建新的 文本网格 Pro:设置文本 节点。 (在模糊查找器中,搜索 设置文本。将其放置在游戏对象右侧的 上行:设置活动 节点。
从“获取对象变量:标签”节点的数据输出端口拖动连接器,然后将其连接到文本网格 Pro:设置文本节点上的顶部数据输入端口。
在节点的文本字段中,键入“Stop”。
添加节点以使视频停止
只需再有三个节点即可用于此图! 我们需要为按钮设置 false 条件,以便在视频播放时单击该按钮时, isPlaying 变量变为 false,并导致视频停止,按钮标签将再次更改为 “播放 ”。
我们可以在此处使用快捷方式。
按住 Control-单击构成“if true”流的顶部行中的三个节点。
右键单击脚本图,然后在弹出菜单中,选择“ 重复选择”。
将重复的节点向下拖动到图形中,并将其放置在变量行下方。
设置“if false”节点
从“获取对象变量:视频”节点的数据输出端口拖动连接器,然后将其连接到第一个游戏对象的顶部数据输入端口:在节点的底部行中设置活动节点。
在同一个第一个 游戏对象中:设置活动 节点,取消选择 值。
从“获取对象变量:VideoStill”节点的数据输出端口拖动连接器,然后将其连接到第二个游戏对象的顶部数据输入端口:在节点的底部行中设置活动节点。
在该第二 个游戏对象中:设置活动 节点,选择“ 值”。
从“获取对象变量:标签”节点的数据输出端口拖动连接器,然后将其连接到文本网格 Pro 的顶部数据输入端口:将文本节点设置为右侧。
在同一 文本网格 Pro 中:设置文本 节点,将文本从 “停止 ”更改为 “播放”。
从 If 节点的“False”控件输出端口拖动连接器,然后将其连接到第一个游戏对象的控制输入端口:在节点的底部行中设置活动节点。
在体验中与其他人共享视频播放器交互
有时,你可能希望只有触发事件的与会者才能体验脚本的事件,有时你希望场景中的每个人都体验这些事件。 可以使用本地脚本范围组件控制这一点。
在层次结构中,确保已选择 PlayVideoButton。
在检查器中,单击“添加组件”按钮,然后添加本地脚本范围。
在本教程中,我们希望体验中的所有与会者都能看到与视频播放器的任何交互,并观看视频本身播放和暂停。 若要确保这一点,请确保 选中此游戏对象 选项上的“共享视觉脚本变量”。 此选项下方的信息框会告诉你共享的内容以及本地内容。
测试你的工作
在 Unity 中,保存项目,然后按 Unity 编辑器播放按钮。
在 “游戏 ”窗口中,单击视频播放器下方的 “播放 ”按钮。 这会导致按钮上的标签更改为 “停止 ”,以及有关风力涡轮机的简短视频在按钮上方的屏幕上播放。
观看完视频后,按再次编辑的按钮(现在已停止标签)。
按 Unity 编辑器播放按钮退出“播放”模式。
工作站 3.2:触发信息对话框
对于此功能,我们将增强现有视觉脚本,以便在头像按下按钮时显示信息对话框。
在层次结构中,折叠 3.1 - Video GameObject。
在“场景”窗口中,请注意信息对话框触发器站位于 3.1 -- 视频播放站的右侧。 调整视图,以便清楚地看到工作站 3.2。
在检查器中,展开名为 3.2 的 GameObject -- 信息对话框。
在层次结构中,选择 InfoButtonWrapper。
在检查器中,请注意,InfoButtonWrapper 已附加本地脚本范围组件,并且未选中此 Game Object 选项上的“共享”视觉脚本变量。
这是因为与会者单击使信息对话框显示的按钮后,按钮将隐藏给他们。 如果选择了此选项,按钮将隐藏在场景中的每个人,我们不希望这样做。
在检查器中,导航到包含“显示对话框”图的“脚本计算机”组件,然后单击“编辑图形”按钮。
在图中,从 If 节点的 True Control 输出端口拖动连接器,然后创建新的Microsoft网格:显示对话框节点。 (在模糊查找器中,搜索 显示对话框。
在“显示对话框”节点中,单击“消息”字段,然后将“消息”一词替换为以下句子:
你知道世界上最大的风力涡轮机的刀片比足球场长吗?
这是将在信息对话框中显示的消息。
选择当前显示 “确定”的下拉列表,然后在弹出列表中取消选择 “确定 ”,然后选择“ 继续”。 这将向信息对话框添加一个 “继续 ”按钮,用户可以单击该按钮以在阅读完该对话后关闭该对话框。
测试你的工作
在 Unity 编辑器中,保存项目,然后按 Unity 编辑器播放按钮。
使用导航键使头像远离按钮。 请注意,当头像离某个距离时,按钮会旋转且不可选择。
朝按钮走去。 在某个时候,按钮停止旋转,表明你现在可以选择它。
选择 按钮。 将显示信息对话框,并显示前面添加到 “显示对话框” 节点的消息。
注意
在“播放”模式下的信息对话框的外观与网格中的显示方式不同,其显示方式与 Sphere 露台中的其他面板类似。
完成信息对话框后,单击其 “继续 ”按钮。 请注意,单击按钮后,它就会消失。 若要再次使用该按钮,必须退出,然后重新进入“播放”模式。
提示
此处生效的距离和触发元素由 ProximityDetector GameObject 的组件决定。
按 Unity 编辑器播放按钮退出“播放”模式。
工作站 3.3:传送到涡轮机发电机
对于此功能,我们将向脚本图添加一些节点,使场景中的与会者能够进行传送。 当与会者按下该按钮时,他们从站 3.3 的当前位置传送到附加到风力涡轮机发电机的提升平台。 然后,他们可以检查生成器。
更新脚本图
在“场景”窗口中,请注意,3.3 - 到涡轮机站的 Teleport 位于 3.2 -- 信息对话触发站的右侧。 调整视图,以便清楚地看到工作站 3.3。
在层次结构中,折叠 3.2 - 信息对话框 GameObject,然后展开 3.3 - Teleport GameObject。
按钮都是为你设置的---只需在脚本图中添加节点即可为其提供传送行为。
在层次结构中,展开 ChapterLabel GameObject,然后选择 TeleportToWindTurbineButton GameObject。
请注意,在检查器中,有一个名为 Teleport 到位置的脚本机组件,该脚本附加了名为 TeleportToLocationButtonStart 的脚本。 “ 源 ”选项设置为 Graph,这意味着脚本图形以独立文件的形式存储在项目中。
单击“编辑图形”按钮。 就像在上一章中一样,我们的图已经设置了一些节点。
稍后,我们将向此脚本图添加节点。
创建 Travel Point 并添加对它的引用
那么,什么是“旅行点”,你可能会问... 基本上,它是一个组件,可用于定义空间中要生成或传送到的点。 通常,首先创建旅行 组,然后向其添加一个或多个旅行点。 我们已在此项目中为你创建了旅行组,因此在以下步骤中,我们将向该组添加旅行点。 然后,我们将使用该旅行点作为头像在单击 “Teleport ”按钮时将转到的位置。 若要了解详细信息,请参阅名为“创建虚拟形象生成”和“传送点”的文章。
在层次结构中,创建一个新的空 GameObject 作为 TravelGroup 的子对象,然后将其重命名为“TeleportLocationWindTurbine”。
在检查器中,单击“添加组件”按钮,然后搜索并添加旅行点组件。
在 检查器中的 转换 组件中,输入以下值:
位置:
X = 6
Y = 56
Z = 60旋转:
X = 0
Y = 255
Z = 0头像将传送到此位置。
在检查器中,取消选中其名称旁边的复选框,使 TeleportLocationWindTurbine GameObject 处于非活动状态。 如果在运行时激活了多个 TravelPoint 对象,Unity 会随机选取其中一个活动旅行点作为虚拟形象的生成点。 我们希望确保由 TeleportLocationChapter3 GameObject 指示的点处生成头像,因此应是唯一处于活动状态的旅行点。 由于处于非活动状态,TeleportLocationWindTurbine 在层次结构中显示为灰色。
创建并添加 Teleport Location 对象变量
在 Script Graph Blackboard 中,创建新的对象变量:在“新建变量名称”字段中键入名称“TeleportLocation”,然后单击“+”按钮。
将对象变量的类型设置为 Game Object。
从层次结构中,拖动 TeleportLocationWindTurbine GameObject,然后将其拖放到新变量的“值”字段中。
从 Blackboard 拖动 Button 对象变量,然后将其拖放到脚本图中,将其添加为节点。 将其置于 If 节点下方。
添加传送节点
从 If 节点的“True”输出控件端口拖动连接器,然后创建名为 Game Object:Set Active 的新节点。 (在模糊查找器中,搜索 “已设置活动”。)
从 Get 对象变量:TeleportLocation 节点的数据输出端口拖动连接器,然后将其连接到游戏对象的第一个数据输入端口:设置活动节点。
选择节点的 “值 ”选项使其处于活动状态。
添加“旅行点”节点
从游戏对象的控制输出端口 拖动连接器:设置活动 节点,然后创建名为 Travel Point: Travel to Point 的新节点。 (在模糊查找器中,搜索 旅行点:旅行。
从 Get 对象变量的数据输出端口拖动连接器:TeleportLocation 节点,然后将其连接到 Travel Point:Travel to Point 节点的数据输入端口。
这将完成图形。
测试你的工作
在 Unity 编辑器中,保存项目,然后按 Unity 编辑器播放按钮。
转到工作站 3.3,然后单击 “Teleport ”按钮,将传送到风力涡轮机发电机。
在 3.3 - 生成器 信息框中,选择“ 显示/隐藏生成器 ”按钮。 一个窗口在风力涡轮机的一侧打开,你可以在里面看到发电机。
随时靠近发电机,看看。 太酷了! 完成后,导航回去,然后按 “显示/隐藏生成器 ”按钮。 这会关闭窗口。
转到第 4 章
此时,体验中的与会者将准备好继续学习第四章,并了解风力涡轮机活动与物理相关的活动。 就像第 3 章一样,有一个球体露台,其中包含第 4 章的工作站。 若要进入该窗口:
从风力涡轮机发电机向相反的方向旋转,向 3.3 方向走去 - 转到第 4 章信息框。
按 Teleport 到第 4 章按钮。
如广告所述,这会将头像放在第 4 章和网格物理站前。
第 3 章:摘要
在本章中,你使用网格视觉脚本添加功能,使体验中的与会者能够执行以下操作:
按一个按钮,使有关风力涡轮机的教育视频播放。
按一个按钮,触发有关风力涡轮机的信息对话框的显示。
按一个按钮,将与会者从地面传送到连接到风力涡轮机发电机的平台,在那里他们可以仔细检查发电机。