Mesh 101 教程第 3 章：使用网格可视化脚本添加交互性

项目
04/24/2024

现在，我们已经完成了设置阶段，让我们继续使 GameObjects 具有交互性！在本章中，我们将深入探讨网格可视化脚本，可用于将自定义逻辑添加到环境中。

注意

有两种类型的网格脚本：使用 C# 代码的网格云脚本和网格可视化脚本，可在其中创建脚本图，然后添加节点 (也称为单元) 序列来创建编码逻辑。此版本的 Mesh 101 教程使用网格可视化脚本;以前的版本使用了网格云脚本。
并非每个环境都需要网格脚本，但对于我们将在此处添加的功能，你将需要它：使按钮交互、触发信息性文本弹出窗口以及围绕场景传送。

工作站 3.1：Create可交互按钮

对于第一个任务，我们希望创建一个按钮，该按钮将在头像按下视频时播放视频。然后，虚拟形象可以按同一按钮来停止视频。

在 “场景 ”窗口中，导航到包含第 3 章工作站的 Sphere 露台，然后调整视图，以便查看第一个工作站 3.1 - 视频播放，如下所示。

Unity场景窗口中视频播放窗口的屏幕截图，其中显示了环境中的第一个工作站

如你所看到的，已有一个视频屏幕，但它需要一个“播放/停止”按钮。如工作站的文本框所述，我们将创建具有一些按钮逻辑的脚本图，以便该按钮可用于打开和关闭 VideoPlayer 并更改按钮文本。

将按钮添加到场景

在 Unity中，确保展开名为 Chapter3 的 GameObject 及其名为 3.1 - Video 的子对象。
在 “项目 ”窗口中，搜索 ButtonBase 预制件。请确保为搜索筛选器选择“全部”。
从“项目”窗口拖动 ButtonBase，然后在“层次结构”中将其拖放到名为 3.1 的 GameObject 上，以便将 ButtonBase 作为子级放置到 3.1 -- Video。

确保 ButtonBase 的转换>位置值为 0、0、0。

ButtonBase 放置在场景中的位置比我们想要的位置要低一点。让我们来解决这个问题。
确保在“层次结构”中选择“ButtonBase”。
在 检查器中，将 “转换>位置>Y ”值更改为“1”。

太完美了！现在 ButtonBase 正确位于视频屏幕正下方。

显示 BackplateBase 对象下方的 ButtonBase 的Unity屏幕截图

重命名按钮

选中 ButtonBase 后，在 检查器中，将 ButtonBase 的名称更改为“PlayVideoButton”。

更改按钮的标签

现在，按钮上的文本显示 “标签”。让我们将它更改为“播放”。

在 层次结构中，展开 PlayVideoButton GameObject 以显示其子对象 Button，然后展开 Button 以显示其子对象，然后选择 Label 子对象。
在 检查器中，导航到 TextMeshPro -- Text 组件，然后在“ 文本输入 ”框中，将文本更改为“播放”。

Create按钮的可视化脚本

在 “层次结构”中，确保已选择 PlayVideoButton 。
在 检查器中，单击“ 添加组件”，然后选择“ 脚本计算机”。

请注意， 检查器中添加了两个新组件： 脚本计算机 和变量。 检查器底部还有一个名为“网格可视化脚本诊断”的新窗口。此窗口将提供有关可视化脚本的反馈，可用于故障排除。
请注意，在 “脚本计算机” 组件中， “源” 选项设置为 “图形”。源有两种选择：Graph 和 Embed。单击“ 源 ”下拉列表，然后选择“ 嵌入”。

提示

图形和嵌入各有优缺点;可以在Unity脚本计算机一文中详细了解它们。我们选择在此处使用 Embed ，因为除其他事项外，你可以直接引用场景节点，而无需创建中间对象变量。
在 “脚本计算机” 组件中，在图形的 “标题 ”字段中输入一个名称：“视频播放器行为”。
在图形的 “摘要 ”字段中输入说明：“视频播放器行为定义”。

设置脚本图

在 “脚本计算机” 组件中，单击“ 编辑图形”。这将打开 “脚本图 ”窗口。将其拖放到“ 项目和 控制台 ”选项卡（如果尚未出现）旁边，以便我们可以同时查看脚本图和场景窗口。

添加节点时，你可能需要窗口中更多的空间;可以单击三点按钮，然后选择 “最大化 ”来实现此目的，或单击窗口右上角的 “全屏 ”按钮。
我们不需要默认的 OnStart 和 OnUpdate 节点;删除它们。

检测是否单击了按钮

我们可以将此脚本图视为有三个main目标：

检测何时单击视频播放器“播放/停止”按钮。
单击它时，播放视频。
再次单击时，停止视频。

第一个目标（检测单击按钮的时间）需要三个节点。项目中实际“侦听”并响应单击的 GameObject 为 Button。让我们将它添加到脚本图中。

注意

节点也称为可视化脚本中的单元。在本教程中，我们将继续使用术语节点。

从层次结构拖动按钮，然后将其拖放到脚本图中。
在 “节点 ”菜单中，选择“ 按钮”。将引用该对象的 游戏对象文本 节点添加到图形中。

提示：可能需要花点时间检查 Button GameObject 的某些组件：

网格可交互设置：这使 Button 成为可以与之交互的对象。此组件有助于跟踪交互-请注意，在下图中，它选择了一些“悬停”设置。可以在名为 使用可交互对象抓取、按住和引发的文章中了解有关此组件的详细信息。

Unity的屏幕截图，其中显示了“网格可交互设置”窗口和包含的设置。

脚本计算机：具有名为“按钮基本行为”的脚本图。

如果进入“播放”模式，你将看到名为 “网格可交互正文 ”的新组件已添加到 “按钮”。

Unity的屏幕截图，其中显示了添加到 Button 组件的新组件 Mesh 可交互正文。

此组件在运行时自动添加到可交互的主体中;它向可视化脚本（如 IsHovered 和 IsSelected）公开各种属性，它们稍后会派上用场。

在脚本图中，让我们添加一个节点，让我们知道何时选择该按钮。

如果需要，请退出“播放”模式，然后在“层次结构”中选择“PlayVideoButton”，以确保在“脚本图”窗口中看到嵌入的图形。
在脚本图中，单击并按住 游戏对象 节点的输出端口，然后松开鼠标按钮。这将打开模糊查找器。警告：打开模糊查找器后，请勿单击Unity界面外部的任何位置。这会关闭模糊查找器，并导致脚本图中出现不可预知的行为。
搜索为“已选中”，然后在列表中选择“网格可交互正文： IsSelected”。

注意：此节点输出布尔值;可以在 Graph 检查器中确认这一点。
从 “已选择” 节点的输出端口拖动连接器，然后创建名为 “Microsoft Mesh： On State Changed”的新节点。 (在模糊查找器中，搜索 状态已更改。)

这些是三个按钮单击检测节点。 “ 被选中” 节点的开头值为 False，但单击按钮时，该值将更改为 True，并传递到“ 状态已更改” 节点。然后，此节点会触发接下来要添加的播放/停止节点。

播放或停止视频

如果 On State Changed 的值为 true，则视频将播放。如果它已在播放并且按下了按钮， 则“状态更改”将 更改为 false 值，并且视频将停止播放。下一步是添加 if 节点以确定此流。

从“ 状态已更改 ”节点的“控制输出”端口拖动连接器，然后创建新的 if 节点。 (在模糊查找器中，搜索 if.)
将连接器从“ 状态已更改 ”节点的“数据输出”端口拖动到 if 节点的数据输入端口。

Create变量来确定视频是否正在播放

在 Blackboard 中，转到“对象”选项卡，然后创建名为“isPlaying”的变量。将类型设置为“布尔值”，并将“值检查”框保留为未选中状态。这为布尔值提供默认值 false。
从 If 节点的 True Control 输出端口拖动连接线，然后创建新的“设置对象变量”节点。 (在模糊查找器中，搜索 set object.) 。
在 “设置对象变量 ”节点中，单击变量名称下拉列表，然后选择“ isPlaying”。

isPlaying 变量必须在此处执行双重职责。为了确保 isPlaying 始终具有正确的值，让我们从 Negate 节点为其提供输入。
从 “设置对象变量： isPlaying ”节点的数据输入端口拖动连接器，然后创建新的 “否定” 节点。 (在模糊查找器中，搜索 negate.)
从 “否定” 节点的数据输入端口拖动连接器，然后创建新的 “获取对象变量” 节点。 (在模糊查找器中，搜索 get object variable.)
在 “获取对象变量 ”节点中，单击变量名称下拉列表，然后选择“ isPlaying”。

Negate 节点使 IsPlaying 的值更改为它当前设置为的相反值。当场景启动时， isPlaying 为 false (默认) 。单击“播放/停止”按钮时，“否定”节点会导致“设置对象变量”节点中的 isPlaying 设置为 true，从而播放视频。再次单击该按钮时， “否定” 节点将导致 isPlaying 重置为 false，这会使视频停止。

打开或关闭视频

现在，我们将添加节点，用于检测 是否正在播放 更改;视频将基于该更改播放或停止。

在图形的下半部分，添加 “获取对象变量” 节点并将其值设置为 isPlaying。 (可以在图形中右键单击，然后选择“ 添加 Node”。)
从 “获取对象变量： isPlaying” 节点的数据输出端口拖动连接器，然后创建新的 “状态已更改” 节点。 (在模糊查找器中，搜索 状态已更改。)
从“ 状态已更改 ”节点的控件输出端口拖动连接器，然后创建新的 If 节点。 (在模糊查找器中，搜索 if.)
从“ 状态已更改 ”节点的数据输出端口拖动连接器，然后将其连接到 if 节点的数据输入端口。

播放视频

在 层次结构中，展开 VideoPlayer GameObject 和，请注意它有两个子对象： Video 和 VideoStill。
选择“ 视频 ”，然后在 “检查器”中注意以下事项：
- 视频具有名为 Video Player 的组件，该组件附加了名为 WindTurbine 的视频。
- 视频处于非活动状态， (其名称旁边的检查框为空) 。
在 “层次结构”中，选择 “VideoStill GameObject”，然后在 “检查器”中注意以下事项：
- VideoStill 附加了静止图像。
- (选择其名称旁边的检查框 ) ，VideoStill 处于活动状态。

当场景启动时，由于 VideoStill) 处于活动状态，视频屏幕显示静态图像 (，并且不会播放视频 (这是由于视频处于非活动状态) 。当与会者 在显示“播放”时按下“播放/停止”按钮时，会激活 “视频 ”，这会导致视频播放，同时使 VideoStill 处于非活动状态，从而隐藏静止图像。当与会者再次按下按钮时，该按钮的标签也会从“播放”更改为“停止”，“视频”变为非活动状态，停止视频，VideoStill 再次处于活动状态，从而使视频屏幕再次显示静止图像。

图中的剩余节点使所有这些操作都发生。

从 if 节点的 True Control 输出端口拖动连接器，并创建新的 Game Object： Set Active 节点。 (在模糊查找器中，搜索 设置 active.)
在 “游戏对象：设置活动 ”节点中，单击 GameObject 字段中的圆形按钮，然后在 “选择 GameObject” 窗口中搜索并选择“ 视频”。
选择节点的“值检查框，使节点处于活动状态。
从 游戏对象：设置活动 节点的控制输出端口拖动连接器，然后创建另一个新的 游戏对象：设置活动 节点。
在新的 “游戏对象：设置活动 ”节点中，单击当前显示“ 此 () ”的 GameObject 字段中的圆形按钮，然后在 “选择 GameObject” 窗口中搜索并选择“ VideoStill”。
保持“值检查”框未选中状态。这会使节点处于非活动状态。

现在，单击按钮时，视频将播放，静止图像将被隐藏。在这个序列中，我们只需要一件事。由于“播放/停止”按钮是一个切换开关，因此必须确保在与会者单击“播放”后，该按钮的标签将更改为“ 停止”， 然后在再次单击时，标签将更改回 “播放”。为此，我们将添加 一个 TextMeshPro 节点。
从最后一个 游戏对象“设置活动” 节点的“控制输出”端口拖动连接线，并创建新的 “文本网格 Pro：设置文本 ”节点。 (在模糊查找器中，搜索 设置的 text.)

我们需要将此节点的目标 GameObject 设置为 Label。但是，项目中有很多“Label”GameObject，它们在节点的弹出列表中看起来都相同，因此让我们使用拖放方法添加此对象。
从 Hierarchy 拖动作为 Button 对象的子对象的 Label GameObject，然后将其放在“设置测试”节点的第一个字段中。
在节点的文本字段中，键入“停止”。

使视频停止

对于此图，只需再创建三个节点！我们需要为按钮设置 false 条件，以便在播放视频时单击该按钮时， isPlaying 变量变为 false，并导致视频停止，按钮标签再次更改为 “播放 ”。

我们可以在此处使用快捷方式。

按住 Control 并单击添加的最后三个节点。这会选择它们。
右键单击脚本图，然后在弹出菜单中选择“ 重复选择”。
将重复的节点拖到图表中重复节点正下方的空白区域。
从最后一个 if 节点的 False 控件输出端口拖动连接器，并将其连接到第一个 Game Object： Set Active 节点在重复的节点集中的控制输入端口。
在同一第一个 游戏对象中， ( 包含视频) 的活动节点，取消选择 “值”。
在第二个 游戏对象：设置 重复集中的活动节点 (包含 VideoStill) 的节点中，选择 “值”。
在 “设置文本” 节点中，将文本从 “停止” 更改为 “播放”。

有时，你可能希望只有触发事件的与会者才能体验脚本的事件，而有时你希望场景中的每个人都能体验事件。可以使用 本地脚本范围 组件控制此操作。

在 层次结构中，确保已选择 PlayVideoButton 。
在 检查器中，单击“ 添加组件 ”按钮，然后添加 “本地脚本范围”。

在本教程中，我们希望体验中的所有与会者都能看到与视频播放器的任何交互，并查看视频本身的播放和暂停。若要确保这一点，请确保选中“ 在此游戏对象上共享可视脚本变量 ”选项。此选项下方的信息框将告诉你共享的内容和本地保留的内容。

测试你的工作

在Unity中，保存项目，然后按“Unity 编辑器播放”按钮。
在 “游戏 ”窗口中，单击视频播放器下方的“ 播放 ”按钮。这会导致按钮上的标签更改为 “停止 ”，并在按钮上方的屏幕上播放有关风力涡轮机的简短视频。
观看视频完成后，再次按下已编辑的按钮， (它现在具有“ 停止) ”标签。
按“Unity 编辑器播放”按钮退出“播放”模式。

工作站 3.2：触发信息对话框

对于此功能，我们将增强现有可视脚本，该脚本会在头像按下按钮时显示信息对话框。

在 层次结构中，折叠 3.1 -- 视频游戏 对象。
在 “场景 ”窗口中，请注意，信息对话框触发器工作站位于 3.1 - 视频播放 站的右侧。调整视图，以便可以清楚地看到工作站 3.2。
在 检查器中，展开名为 3.2 的 GameObject - 信息对话框。
在 “层次结构”中，选择“ InfoButtonWrapper”。

在 检查器中，请注意 ，InfoButtonWrapper 附加了 本地脚本范围 组件，并且未选择“ 在此游戏对象上共享可视脚本变量 ”选项。

这是因为，在与会者单击显示信息对话框的按钮后，该按钮将隐藏。如果选择此选项，该按钮将隐藏给场景中的所有人，我们不希望这样做。
在检查器中，导航到包含“显示对话框”图的“脚本计算机”组件，然后单击“编辑图形”按钮。
在图中，从 If 节点的 True Control 输出端口拖动连接器，然后创建新的 Microsoft 网格：显示对话框节点。 (在模糊查找器中，搜索 显示对话框。)
在 “显示对话框” 节点中，单击“ 消息 ”字段，然后将 “消息 ”一词替换为以下句子：

你知道世界上最大的风力发电机的刀片比足球场长吗？

这是将显示在信息对话框中的消息。
选择当前显示 “确定”的下拉列表，然后在弹出列表中取消选择“ 确定 ”，然后选择“ 继续”。这会向信息对话框添加一个“ 继续 ”按钮，用户可以单击该按钮以在阅读完该对话框的消息后关闭该对话框。

测试你的工作

在Unity 编辑器保存项目，然后按“Unity 编辑器播放”按钮。
使用导航键使头像远离按钮。请注意，当你的头像距离一定距离时，按钮会旋转且不可选择。
向按钮走去。在某个时间点，按钮停止旋转，并发出信号，表明你现在可以选择它。
选择该按钮。此时将显示信息对话框，并显示之前添加到“ 显示对话框” 节点的消息。

注意

信息对话框在“播放”模式下的外观与它在网格中的显示方式不同，网格中的显示方式与 Sphere 露台中的其他面板非常类似。
完成信息对话框后，单击其“ 继续 ”按钮。请注意，单击按钮后，它会消失。若要再次使用该按钮，必须退出，然后重新进入“播放”模式。

提示

此处生效的距离和触发元素由 ProximityDetector GameObject 的组件确定。
按“Unity 编辑器播放”按钮退出“播放”模式。

工作站 3.3：传送到涡轮机发电机

对于此功能，我们将向脚本图添加一些节点，该图允许场景中的与会者进行传送。当与会者按下该按钮时，他们将从位于工作站 3.3 的当前位置传送到连接到风力涡轮机发电机的提升平台。然后，他们可以检查生成器。

自动生成的包含户外、文本、屏幕截图、风车说明的图片

更新脚本图

在 “场景 ”窗口中，请注意 3.3 -Teleport to Turbine 工作站位于 3.2 -- 信息对话框触发 站的右侧。调整视图，以便可以清楚地看到工作站 3.3。
在 层次结构中，折叠 3.2 - 信息对话框 GameObject，然后展开 3.3 - Teleport GameObject。

按钮已为你全部设置---我们只需在脚本图中添加节点，以便为它提供传送行为。
在 层次结构中，展开 ChapterLabel GameObject，然后选择 TeleportToWindTurbineButton GameObject。

请注意，在 检查器中，有一个 脚本机 组件，其中包含名为 Teleport to Open Air Platform 的脚本图。 “ 源 ”选项设置为 “嵌入”，这意味着脚本图嵌入到场景中。
单击 “编辑图形” 按钮。与上一章一样，我们的图中已经为你设置了一些节点。

稍后我们将向此脚本图添加节点。

Create旅行点并添加对它的引用

那么，什么是“旅行点”，你可能会问...？基本上，它是一个组件，可用于定义空间中要生成或传送到的点。通常，首先创建 一个旅行组，然后向其添加一个或多个旅行点。我们已在此项目中为你创建了旅行组，因此在以下步骤中，我们将向该组添加旅行点。然后，我们将使用该旅行点作为虚拟形象单击“ 传送” 按钮时将转到的位置。若要了解详细信息，请参阅名为 Create 虚拟形象生成和传送点的文章。

在 层次结构中，创建一个新的空 GameObject 作为 TravelGroup 的子对象，然后将其重命名为“TeleportLocationWindTurbine”。
在 检查器中，单击“ 添加组件 ”按钮，然后搜索并添加 “旅行点 ”组件。
在检查器的转换组件中，输入以下值：

位置：

X = 6
Y = 58
Z = 61

旋转：

X = 0
Y = 270
Z = 0

头像将传送到此位置。
在检查器中，通过取消选择其名称旁边的“检查”框，使 TeleportLocationWindTurbine GameObject 处于非活动状态。如果有多个 TravelPoint 对象在运行时处于活动状态，Unity随机选取其中一个活动旅行点作为头像的生成点。我们希望确保头像在 TeleportLocationChapter3 GameObject 指示的点处生成，因此应是唯一活动的旅行点。由于处于非活动状态， TeleportLocationWindTurbine 在 层次结构中显示为灰显。

添加传送节点

在 Teleport to Open Air Platform 脚本图中，从 If 节点的 True 输出控制端口拖动连接器，然后创建名为 Game Object： Set Active 的新节点。 (在模糊查找器中，搜索 set active.)
从“层次结构”拖动 TeleportLocationWindTurbine 对象，然后将其拖放到“游戏对象：设置活动”节点中显示的字段中。
选择节点的 “值” 选项，使其处于活动状态。

添加“旅行点”节点

从游戏对象的控件输出端口拖动连接器 ：设置活动 节点，然后创建一个名为 “旅行点：旅行到点”的新节点。 (在模糊查找器中，搜索 旅行点：travel.)
在“ 旅行点：前往点 ”节点中，单击显示“ 此”的字段中的圆形按钮，然后在 “选择 TravelPoint” 窗口中，选择“ TeleportLocationWindTurbine”。