在 VS Code 中编写 Yarn

现在您已经安装了 Visual Studio Code 和 Yarn Spinner for Visual Studio Code，是时候学习如何使用它来编写 Yarn Spinner 脚本了。

使用 VS Code 编写纺纱机脚本

Yarn Spinner for Visual Studio Code 设计用于处理文件夹，而不是单个文件。

您应该始终在逐个项目的基础上使用包含您的项目的文件夹 .yarn 文件中的一个或多个文件，即使您的叙述只有一个 .yarn 文件，将其放在自己的文件夹中。

[！警告] 如果您正在开发属于游戏（例如 Unity 游戏）一部分的纱线纺纱机脚本，您可能会在项目结构中拥有一个用于叙述/对话的文件夹。

如果您使用 VS Code 作为 Unity 的 C# 编辑环境，则可以通过在 Unity 中选择“资源”菜单 →“打开 C# 项目”来访问您的 Yarn Spinner 脚本，然后导航到 VS Code 中的相应文件夹以使用您的 Yarn Spinner 脚本。

如果您不使用 VS Code 作为 Unity 的 C# 编辑环境，您仍然可以使用 VS Code 打开 Narrative 文件夹来使用 Yarn Spinner 脚本。

打开文件夹

对于此示例，我们假设您有一个要用于处理故事的文件夹。我们示例中的文件夹名为 YSDocsDemo 。在此文件夹中，我们制作了一个名为“Yarn Spinner Script”的脚本 Chat.yarn.

[！警告] 您还可以打开一个空文件夹，并在 VS Code 中创建 Yarn Spinner 脚本。

如果我们打开 VS Code，默认屏幕中间会有一个“打开”按钮。

单击此按钮，或选择“文件”菜单 →“打开文件夹…”，然后打开包含您的文件的文件夹 .yarn 文件：

当文件夹打开时，您将看到 VS Code 的侧边栏发生变化以反映文件夹的内容。您可以点击 .yarn 文件以在文本编辑器中打开它：

您还可以使用“文件”菜单在文件夹内创建一个新文件：

然后 VS Code 会要求您命名新文件：

在 Visual Studio Code 中使用 Yarn

与一个 .yarn 在 VS Code 中打开文件后，您可以通过查看屏幕右下角并找到“Yarn Spinner”字样来验证 Yarn Spinner for Visual Studio Code Extension 是否处于活动状态：

[！信息] 仅当安装了适用于 Visual Studio Code 的 Yarn Spinner 扩展且当前活动文件被识别为 .yarn 文件的扩展名。

您可以使用文本编辑视图来处理 .yarn，并写下你的叙述。 Visual Studio Code 扩展的 Yarn Spinner 提供了各种功能来简化此过程。

[！信息] 文档的这一部分将讨论 Yarn Spinner 脚本功能，例如 <<jump>>以及其他您尚未遇到过的情况。回顾一下，然后当你完成时脚本基础知识和高级脚本，重新访问此页面并了解您所了解的功能如何与纺纱机编辑器配合使用。

例如，如果您按住 Command 键（在 macOS 上）或 Control 键（在 Windows 或 Linux 上）并将鼠标悬停在节点名称上，例如 `<<jump>> 语句，您将能够单击它们将编辑器视图移动到代表该节点的 Yarn：

您还将获得基于项目中存在的节点名称的自动完成建议。例如，如果您创建一个新的 <<jump>> 声明，您将能够从节点中进行选择：

如果您的 Yarn Spinner 脚本也使用变量（您很快就会了解），那么适用于 VS Code 的 Yarn Spinner 也会有所帮助。例如，当您 <<declare>> 一个新变量，您可以添加三个注释 / 在它前面提供变量的描述：

然后，当您使用该变量时，您可以在 VS Code 中将鼠标悬停在该变量上，以提醒其用途（及其默认值）：

当您尝试使用变量名称时，它们也会自动完成，如果存在类型问题，则会显示错误。所以，如果你 <<declare>> 变量是某种类型，例如 boolean:

…然后尝试以会产生错误的方式使用该变量。例如，通过尝试为其分配一个数字，Yarn Spinner for Visual Studio Code 将显示错误：

您还可以查看游戏 C# 源代码中定义的命令的文档注释：

[！警告] 节点可以分布在尽可能多的地方 .yarn 根据需要将文件放在一个文件夹中。

使用节点

虽然 Yarn Spinner 是一种基于文本的语言，但我们的 Yarn Spinner for Visual Studio Code 扩展提供了方便的图形视图。

您可以打开任意一个的图形视图 .yarn 单击右上角的“图表视图”按钮，查看您当前正在使用的文件：

您可能会注意到，当您第一次查看图形视图时 .yarn 文件中，所有节点都相互堆叠在一起，如下所示：

为了理解事物并更好地理解事物 <<jump>> 在节点之间使用，您可以通过单击并将节点拖动到您想要的任何位置来重新排列节点：

任何时候 <<jump>> 使用命令时，它将被可视化为带有箭头的线，指向要跳转到的音符。如果你 <<jump>> 到另一个节点 .yarn 文件中，它将被可视化为一条通向小圆圈的线：

节点的位置将存储在每个节点的标头中：

您可以使用图形视图顶部的“添加节点”按钮来添加新节点。新节点将出现在图形视图和文本编辑器中：

双击图形视图中的节点将跳转到文本视图中的该节点：

如果您有很多节点，您可以使用图形视图右上角的跳转到节点菜单，将图形视图跳转到特定节点：

您也可以随时单击文本视图中每个节点上方的“在图形视图中显示”，将图形视图跳转到该节点：

自定义图表视图

您可以向每个节点的标题添加一些额外的元数据来自定义图形视图，以便于理解脚本区域之间的关系。

着色节点

例如，如果您添加 color 字段添加到标题中，您可以对节点进行颜色编码：

[！信息] 你可以使用 red, green, blue, orange, yellow，或者 purple。您看到的颜色可能会有所不同，具体取决于您的 VS Code 主题。

的`

颜色field works like any other header element, and goes below the标题and above the---`:

title: NodeName
color: purple
---

===

分组节点

您还可以通过添加以下内容对节点进行分组 group 字段到您的节点标头。例如，如果您添加 group: Main_Options 到的标题 Volcanos, Dogs，和 Trees 节点，你最终会得到这样的结果：

便利贴

您还可以使用“图表视图”顶部的“添加便笺”按钮将便笺添加到您的 Yarn Spinner 脚本中：

便签就像普通节点一样，但风格独特，因此您可以使用它们为自己或您的团队留下便笺，为您的叙述添加上下文：

因为粘滞节点只是带有额外标头字段的普通节点（当您添加时它们会变成粘滞便笺） style: note 到他们的标题），你可以使用 color: 字段来设置它们的颜色。例如，上面屏幕截图中的注释是使用以下 Yarn Spinner 脚本创建的：

title: Note_Evil
style: note
position: 521,336
---
TODO: Add more evil options in here.
===
 
title: Note_Love
style: note
color: red
position: -128,171
---
I don't like the fact that the witch is totally unaware of what love is. Can we give them some more lines here?
===

使用命令面板

VS Code 命令面板还具有许多有用的 Yarn Spinner 功能。通过按 Shift + Command + P (Mac) 或 Ctrl + Shift + P (Windows/Linux) 或选择“视图”菜单 → 命令面板…来调用命令面板，然后键入“Yarn Spinner”以筛选由 Yarn Spinner for Visual Studio Code Extension 提供的可用命令：

从这里您可以预览对话，这将允许您在 Visual Studio Code 中播放您的叙述。要了解更多相关信息，请阅读 previewing-your-dialogue.md.

“将对话导出为 HTML…”选项会将叙述的独立可玩版本导出为 HTML 文件，这与预览时获得的体验相同。

将对话导出为图表…选项将允许您导出 .dot 你的图表文件。要了解 .dot 文件，查看 GraphViz 文档： https://graphviz.org/doc/info/lang.html

最后，“将对话导出为录制电子表格…”选项将允许您导出电子表格，这对于配音演员录制对话非常有用。

[！信息] 您还可以使用命令面板关闭所有 Microsoft 提供的“AI”功能，方法是键入 Chat: Hide Copilot 并按回车键/回车键。

Infant God

Explorer

writing-yarn-in-vs-code