高级拼图参考 - Soft8Soft
Description: 如何使用拼图应用中实现高级功能，如网络、与JavaScript代码的交互、数据转换、状态保存/恢复等。

# 高级 | Advanced

使用这些拼图可以在应用中实现高级功能，如网络、与JavaScript代码的交互、数据转换、状态保存/恢复等。

## 内容

- 拼图参考
  - comment(注释)
  - exec script(可执行脚本)
  - call external function(调用外部函数)
  - load data(载入数据)
  - send data(发送数据)
  - loaded data(已加载的数据)
  - read JSON(读取JSON)
  - read CSV(读取CSV)
  - connector(连接器)
  - connector (slot-based)(基于插槽的连接器)
  - save state(保存状态)
  - undo state(撤销状态)
  - all variable names(所有变量名称)
  - variable value by name(对应名称的变量的值)
  - JavaScript object(JavaScript对象)
  - wait promise(等待promise)
  - promise value(promise值)
  - get procedure(获取过程)
  - call procedure(调用过程)
  - add event listener(添加事件监听器)
  - remove event listener(移除事件监听器)
  - dispatch event(调度事件)

#

## 拼图参考

#

### comment(注释)

这个拼图除了放置一个注释行使脚本更容易理解外，不产生其他作用。此拼图同时会在 visual_logic.js 生成一行JavaScript注释。

#

### exec script(可执行脚本)

此拼图执行指定的JavaScript代码。使用 Ace编辑器 显示和编辑其中的代码内容。请查看相关的键盘快捷键：默认键盘快捷键。可调整大小，以更改编辑器的宽度和高度。

您可以使用以下内置变量：

- app — 应用实例，详见 App
- v3d — 包含所有引擎模块的v3d命名空间
- puzzles — 包含拼图中定义的过程、物理拼图API等的"Puzzles Logic"对象
- VARS — 可以通过该对象访问变量拼图
- PROC — 可以通过该对象访问过程拼图

#### 关于 "Init" 和其他标签使用内置变量的具体细节

- 如果在 Init 标签中使用了此拼图，则 app 内置变量不可用，因为在该阶段应用尚未被正确初始化。
- 在 Init 标签中声明的变量和过程不能通过 VARS 和 PROC 从其他标签访问，反之亦然。

#

### call external function(调用外部函数)

执行一个在应用的JavaScript代码中指定的函数。可以选择传递参数，作为函数参数使用。

为了在JavaScript代码中添加一个函数，用任何文本编辑器打开应用 .js 文件（例如，my_awesome_app.js 位于 applications 文件夹下的 my_awesome_app 文件夹中）。搜索 `prepareExternalInterface` 并在该声明中添加您的函数（在大括号之间），这样它看起来像这样：

`function prepareExternalInterface(app) { app.ExternalInterface.myJSFunction = function(numericArg, textArg) { alert('Got some params from Puzzles: ' + numericArg + ' and ' + textArg); } }`

#

### load data(载入数据)

从指定位置加载数据。检索到的数据可以通过 loaded data(已加载的数据) 拼图进行访问。JSON对象会自动转换为字典，所有其他数据类型以文本值返回。

默认情况下，此拼图检索的结果会被缓存，因此后续调用会返回相同的值。要禁用缓存，请单击齿轮图标并激活 disable caching 复选框。enable "on error" slot 设置用于通过附加的 on error do 槽来处理错误。

#

### send data(发送数据)

使用异步 POST HTTP 请求将指定数据发送到远程位置。检索到的数据可以通过 loaded data(已加载的数据) 拼图进行访问。JSON对象（发送或接收的）会自动转换为字典，form data(表单数据) 值按原样发送，所有其他数据类型以文本值发送/接收。

enable "with headers" slot 用于通过字典对象提供额外的请求头。enable "on error" slot 设置用于通过附加的 on error do 槽来处理错误。

请注意，浏览器可能会出于优化目的保留检索到的资产的本地副本。为避免浏览器缓存，可以使用一个附加参数在每次发出请求时更改URL。要添加此参数，请使用 set URL param(设置URL参数) 和 elapsed total(总耗时) 拼图：

#

### loaded data(已加载的数据)

返回由 load data(载入数据) 或 send data(发送数据) 拼图获取的数据。

#

### read JSON(读取JSON)

将文本（或 数据URL）解释为 JavaScript对象表示法 数据，以字典形式返回。

#

### read CSV(读取CSV)

将文本（或 数据URL）解释为逗号分隔值。返回一个表格行的列表，每行表示为一个值的列表。分隔符可以通过下拉选择，以对应CSV文件的导出设置。from row 值表示从顶部开始跳过多少行。

表的行和值通过它们的数字索引从 `0` 开始访问。

#

### connector(连接器)

此拼图便于将其他拼图相互连接，使其更方便移动、删除和在其他拼图中使用。最典型的应用是将 load sound(加载声音) 或 load video(加载视频) 拼图连接成一个组，以组织应用中媒体资源的预加载。

#

### connector (slot-based)(基于插槽的连接器)

此拼图便于将其他拼图相互连接，使其更方便移动、删除、注释以及在库中使用。

#

### save state(保存状态)

保存指定对象的状态和/或由其名称指定的变量值。对象被克隆并存储在内存中。变量的值被检索并存储在内存中，每个指定的变量名称都是如此。

如果此拼图被多次调用，状态将依次保存，这样就可以通过 undo state(撤销状态) 拼图返回到之前的任一状态。

#

### undo state(撤销状态)

恢复用 save state(保存状态) 拼图保存的对象和/或变量的状态。

如果此拼图被多次调用，状态将从保存的序列中恢复（如果有的话），这使得可以从堆栈中返回到任何先前保存的状态。有时您需要处理撤销历史中没有保存状态的情况，例如在UI中进行更改。为此，请使用状态计数器变量：

#

### all variable names(所有变量名称)

返回一个包含拼图中使用的所有变量名称的列表。

#

### variable value by name(对应名称的变量的值)

返回指定名称的变量的值。此拼图的工作方式与标准的变量值拼图类似，但不需要从预定义的下拉菜单中选择一个变量。

#

### JavaScript object(JavaScript对象)

返回一个给定的JavaScript对象。

使用此拼图可获得以下JavaScript对象：

arguments

  返回当前执行的函数的参数列表。可以用来获取拼图过程的参数或传递给拼图内部回调的额外参数。

  例如，当使用 when clicked(当点击...时) 拼图时，您可以通过在 do 插槽后面执行的回调的第一个参数来获得触发拼图逻辑的内部JavaScript事件。在下面的例子中，我们使用这个事件来获取鼠标指针的X和Y坐标：

  以下拼图支持高级选项：

  - when clicked，when hovered，when dragged — 触发 do 插槽中拼图的鼠标或触摸事件。
  - after，set timer — 由拼图的 setInterval() 调用返回的定时器ID。
  - every frame — 间隔时间delta和总耗时。
  - on event of — 事件对象。
  - on session event — WebXR事件对象。
html element

  返回一个表示指定HTML元素的DOM对象的字典。这对于访问 set property 或 get property 拼图尚不支持的HTML元素属性很有用。

form data
  获取 `<form>` 元素的FormData对象。例如，您可以用它来发送自定义表单到电子邮件。
this
  JavaScript中 `this` 关键字所代表的值。
window

  返回顶层的 `window` 对象作为字典值。

#

### wait promise(等待promise)

等待promise被 resolved 或 rejected，并在 promise value(promise值) 拼图中返回其值（或拒绝原因）。

此拼图可用于获取 export to gltf(导出到gltf) 和 generate normal map(生成法线贴图) 拼图的值。这些拼图本质上是异步的，不会立即返回解析值。相反，它们返回 promise 值，这些值在它们被用作输入的拼图中被隐式解析。但在少数情况下，这种解析并没有发生。在这些情况下，您应该使用 wait promise 来解析promise值。

#

### promise value(promise值)

已解析的promise值（在promise已实现的情况下）或错误字符串（在promise被拒绝的情况下）。

#

### get procedure(获取过程)

此拼图可用于获取拼图中定义的过程。返回的值可以分配给一个变量或作为参数传递给另一个过程，然后通过 call procedure(调用过程) 拼图稍后执行。

#

### call procedure(调用过程)

执行通过 get procedure(获取过程) 拼图获得的拼图过程。可选地传递参数作为过程参数。"call procedure(调用过程)" 拼图有2种变体 — 有返回值和无返回值。

#

### add event listener(添加事件监听器)

为指定的事件类型添加一个监听器，即在引发指定的事件类型时执行通过 get procedure(获取过程) 拼图获得的拼图过程。

#

### remove event listener(移除事件监听器)

从指定的事件类型中移除监听器，即从事件类型监听器中移除给定的过程。

#

### dispatch event(调度事件)

触发指定类型的事件。可选地传递参数作为过程参数（即每个过程的参数相同）。

## 在使用拼图时遇到困难？

欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。