如何使用 Twine 和 SugarCube 创建互动冒险游戏

了解如何开始使用开源工具 Twine 和通用的多媒体库 SugarCube。
514 位读者喜欢这个。
Open gaming news on Opensource.com

Opensource.com

讲故事是人类天性的一部分。它是一种闲暇消遣,一种艺术形式,一种交流工具,一种治疗和联结的形式。我们都喜欢讲故事——你现在就在读一个——我们拥有的最强大的技术通常是那些使我们能够表达创造性想法的东西。开源项目 Twine 就是为此而生的工具。

Twine 是一个互动故事生成器。它使用 HTML、CSS 和 Javascript 来创建独立的冒险游戏,其精神与 ZorkColossal Cave 等经典游戏一脉相承。由于 Twine 在很大程度上是几种开放技术的结合,因此它足够灵活,可以进行许多多媒体技巧,使游戏更像 HyperCard,而不是你通常对 HTML 的期望。

安装 Twine

你可以在线使用 Twine,也可以从其网站本地下载。解压下载的文件,然后单击 Twine 应用程序图标启动它。

默认的起始界面非常直观。阅读其介绍性材料,然后单击右侧大的绿色 +Story 按钮以创建新故事。

Hello world

基础知识很简单。新的故事板包含一个节点,或在 Twine 术语中称为“段落”,名为 Untitled passage。将鼠标悬停在此段落上以查看节点的选项,然后单击铅笔图标以编辑其内容。

命名段落以指示其在故事中的位置。在 Twine 的先前版本中,起始段落必须命名为 Start,但在 Twine 2 中,任何标题都可以。最好还是使其有意义,因此坚持使用类似 StartHomeinit 的名称。

对于这个故事的文本内容,输入

Hello [[world]]

如果你熟悉 wikitext,你可能已经猜到此段落中的单词“world”实际上是另一个段落的链接。

你的编辑会自动保存,因此完成后你可以直接关闭编辑对话框。回到故事板中,Twine 检测到你已创建一个链接,并为你提供了一个新的段落,名为 world

developing story in Twine

在 Twine 中开发故事

打开新段落进行编辑并输入文本

This was made with Twine.

要测试你非常短的故事,请单击 Twine 窗口右下角的播放按钮。

不多,但这是一个开始!

你可以通过在双括号中添加另一个链接来添加更多导航选择,这将生成一个新的段落,直到你讲述你想要讲述的任何故事。它真的就这么简单。

要发布你的冒险,请单击故事板窗口左下角的故事标题,然后选择 发布到文件。这将把你的整个项目保存为一个 HTML 文件。将这一个文件上传到你的网站,或将其发送给朋友并让他们在 Web 浏览器中打开,你就刚刚制作并交付了你的第一个文本冒险。

高级 Twine 技巧

仅了解构建这个 hello world 故事的知识,你就可以制作一个由探索和选择组成的精彩的基于文本的冒险。作为快速入门,这还不错。像所有优秀的开源技术一样,这没有上限,你可以通过一些额外的技巧使其更进一步。

Twine 项目之所以能很好地工作,部分原因是名为 Harlowe 的 JavaScript 后端。它添加了所有漂亮的过渡效果和一些 UI 样式,处理基本的多媒体功能,并提供了一些特殊的宏来减少你必须为某些高级任务编写的代码量。不过,这是开源的,所以自然而然地存在替代方案。

SugarCube 是 Twine 的一个替代 JavaScript 库,它可以处理媒体、媒体播放功能、段落的高级链接、UI 元素、保存文件等等。它可以将你的基本文本冒险变成一场多媒体盛宴,媲美《Myst》或《Beneath the Steel Sky》等冒险游戏。

安装 SugarCube

要为你的项目安装 SugarCube 后端

  • 下载 SugarCube 库。即使 Twine 附带了早期版本的 SugarCube,你也应该下载最新版本。
  • 下载后,解压存档并将其放在一个合理的位置。如果你不习惯整理文件或为项目开发 管理创意资产,请将解压后的 SugarCube 目录放入你的 Twine 目录中以确保安全。

  • SugarCube 目录仅包含几个文件,实际代码在 format.js 中。如果你使用的是 Linux,请右键单击该文件并选择 复制

  • 在 Twine 中,通过单击 Twine 窗口左下角的房屋图标返回你的项目库。

  • 单击 Twine 右侧边栏中的 格式 按钮。在 添加新格式 选项卡中,粘贴到 format.js 的文件路径,然后单击绿色 添加 按钮。

    Install Sugarcube add format

    安装 Sugarcube:单击添加按钮以在 Twine 中添加新格式

    如果你不是在 Linux 上,请手动键入此格式的文件路径

    file:///home/你的用户名/path/to/SugarCube-2/format.js

使用 SugarCube

要将项目切换到 SugarCube,请输入你的项目的故事板模式。

在故事板视图中,单击 Twine 窗口左下角的故事板标题,然后选择 更改故事格式

在出现的 故事格式 窗口中,选择 SugarCube 2.x 选项。

Story format sugarcube

在故事格式窗口中选择 SugarCube

图像

在向 Twine 项目添加图像、音频或视频之前,创建一个项目目录,在其中保存你的资产副本。这至关重要,因为这些资产与 Twine 导出的 HTML 文件是分开的,因此创建故事的最后一步是将导出的 HTML 文件放在它所需的所有媒体旁边。如果你习惯于编程、视频编辑或 Web 设计,这将是一种熟悉的规范,但如果你是这种内容创作的新手,你可能以前没有遇到过这种情况,因此请特别注意组织你的资产。

在某个地方创建一个项目目录。在此目录中,为你的图像创建一个名为 img 的子目录,为你的音频创建一个 audio 子目录,为视频创建一个 video 子目录,依此类推。

Create a directory in Twine

在 Twine 中为你的项目文件创建子目录

在此示例中,我使用了来自 openclipart.org 的图像。你可以使用这个,或类似的东西。无论你使用什么,都将你的图像放在你的 img 目录中。

继续 hello_world 项目,你可以使用 SugarCube 的图像语法将图像添加到其中一个段落

<img src="https://open-source.net.cn/img/earth.svg" alt="An image of the world." />
Hello [[world]].

如果你在添加图像后尝试播放你的项目,你会发现所有图像链接都已损坏。这是因为 Twine 位于你的项目目录之外。要测试多媒体 Twine 项目,请将其导出为文件并将该文件放在你的项目目录中。不要将其放在你创建的任何子目录中;只需将其放在你的项目目录中并在 Web 浏览器中打开它。

View media in sugarcube

预览添加到 Twine 项目的媒体文件

其他媒体文件的功能基本相同,利用 HTML5 媒体标签来显示媒体,并利用 SugarCube 宏来控制播放何时开始和结束。

变量和编程

你可以通过引导玩家根据他们做出的选择进入一个段落或另一个段落来做很多事情,但你可以通过使用变量来减少所需的段落数量。

如果你以前从未编程过,请花一些时间阅读我的 编程概念介绍。这篇文章使用了 Python,但所有相同的概念都适用于 Twine 以及你可能遇到的任何其他编程语言。

例如,由于 hello_world 故事最初设置在地球上,因此故事的下一步可能是提供前往其他世界的各种旅行。每次读者返回地球时,游戏都可以显示他们访问过的世界的计数。这在线性情况下基本上是不可能实现的,因为你永远无法知道读者在探索中采取了哪条路径。例如,一位读者可能首先访问火星,然后访问水星。另一位读者可能永远不会去火星,而是访问木星、土星,然后访问水星。你必须为每种可能的组合制作一个段落,而这种解决方案根本无法扩展。

但是,使用变量,你可以跟踪读者的进度并相应地显示消息。

要使此功能生效,你必须在读者到达新星球时设置一个变量。在 hello_world 游戏的宇宙中,星球实际上是开源项目,因此每次用户访问有关开源项目的段落时,都设置一个变量来“证明”读者已访问过。

SugarCube 语法中的变量使用 <<set>> 宏设置。SugarCube 有很多宏,它们都非常方便。此示例项目使用了一些。

更改你创建的第二个段落,为读者提供一些新的探索选项

This was made in [[Twine]] on [[Linux]].
<<choice Start "Return to Earth.">>

你在这里使用了 <<choice>> 宏,它将任何文本字符串直接链接回给定的段落。在本例中,<<choice>> 宏将字符串“返回地球”链接到 Start 段落。

在新段落中,插入此文本

Twine is an interactive story framework. It runs on all operating systems, but I prefer to use it on [[Linux]].

<<set $twine to true>>
<<choice Start "Return to Earth.">>

在此代码中,你使用 <<set>> 宏创建一个名为 $twine 的新变量。此变量是一个布尔值,因为你只是将其设置为“true”。你很快就会明白这为什么很重要。

Linux 段落中,输入此文本

Linux is an open source [[Unix]]-like operating system.

<<set $linux to true>>
<<choice Start "Return to Earth.">>

Unix 段落中

BSD is an open source version of AT&T's Unix operating system.

<<set $bsd to true>>
<<choice Start "Return to Earth.">>

现在故事有五个段落供读者探索,是时候使用 SugarCube 来检测每次读者返回地球时设置了哪个变量了。

要检测变量的状态并相应地生成 HTML,请使用 <<if>> 宏。

<img src="https://open-source.net.cn/img/earth.png" alt="An image of the world." />

Hello [[world]].
<<nobr>>
<<ul>>
<<if $twine is true>><<li>>Planet Twine<</li>><</if>>
<<if $linux is true>><<li>>Planet Linux<</li>><</if>>
<<if $bsd is true>><<li>>Planet BSD<</li>><</if>>
<</ul>>

为了测试目的,你可以按右下角的“播放”按钮。你将看不到你的图像,但为了测试的利益,请忽略它。

complex story board

更复杂的故事板

浏览故事,定期返回地球。请注意,每次返回时,你访问的每个地点的计数都会出现在 Start 段落的底部。

但是,没有任何解释为什么访问地点的列表会显示出来。你能弄清楚如何向读者解释已探索段落的计数吗?

你可以只在计数列表前面加上一个介绍性句子,例如“到目前为止,你已访问过:”,但当用户第一次到达时,列表将为空,因此你的介绍性句子将介绍空内容。

更好的管理方法是使用另一个变量来指示用户已离开地球。

更改 world 段落

This was made in [[Twine]] on [[Linux]].

<<set $offworld to true>>
<<choice Start "Return to Earth.">>

然后使用另一个 <<if>> 宏来检测 $offworld 变量是否设置为 true

Twine 解析 wikitext 的方式有时会导致比你预期的更多的空行,因此为了压缩访问地点的列表,请使用 <<nobr>> 宏来防止换行。

<img src="https://open-source.net.cn/img/earth.png" alt="An image of the world." />

Hello [[world]].
<<nobr>>
<<ul>>
<<if $twine is true>><<li>>Planet Twine<</li>><</if>>
<<if $linux is true>><<li>>Planet Linux<</li>><</if>>
<<if $bsd is true>><<li>>Planet BSD<</li>><</if>>
<</ul>>
<</nobr>>  

再次尝试播放故事。请注意,读者在离开地球后才会被欢迎回到地球。

探索一切

SugarCube 是一个强大的引擎。使用它通常是一个了解可用功能的问题,而不是没有能力做某事。幸运的是,它的文档非常好,因此请经常参考其 列表。

你可以通过更改 CSS 样式表对你的项目进行进一步修改。为此,请在故事板模式下单击你的项目标题,然后选择 编辑故事样式表。如果你熟悉 JavaScript,你也可以使用 编辑故事 JavaScript 编写你的故事脚本。

Twine 作为你的互动小说引擎的功能是无限的。它可以创建文本冒险,并且可以作为更复杂的游戏、点击式 RPG、商业演示、深夜脱口秀补充内容 以及几乎任何你能想到的东西的原型。探索 Twine wiki,查看 互动小说数据库 上其他人的作品,然后制作你自己的作品。

Seth Kenlon
Seth Kenlon 是一位 UNIX 极客、自由文化倡导者、独立多媒体艺术家和 D&D 爱好者。他曾在电影和计算行业工作,通常同时从事这两个行业。

2 条评论

您好,先生,

此代码不起作用

    <>
    <>
    <>

如果我将其更改为

    <>
  • Twine 星球
  • <>
    <>

  • Linux 星球
  • <>
    <>

  • BSD 星球
  • <>

有时到 Start 段落的链接会断开。
你能帮忙吗?

我最近一直在玩 Twine,发现它是讲述小型、优美故事的绝佳方式。感谢你提供关于 SugarCube 设置的信息。我打算尝试一下。

© . All rights reserved.