才疏学浅,欢迎指正。标*内容为译者增添,可略过。希望大家都能像写 Markdown 一样,轻松写出互动小说。个人建议:简单学习基础部分,认真看下“编织”部分,粗略看下高阶部分。
原文 https://www.inklestudios.com/ink/web-tutorial / 文稿 https://www.yuque.com/inky/pcke0w/gix3ga
特别感谢:Saryta 与 jaxyong
适合初学者!
编写互动小说从未如此简单,因为我们有很多可用的创作工具。Twine 因其对用户友好,用其可视化的"贴便笺与字符串"来规划故事,因此在创作基于 Web 的互动小说中很受欢迎。
相比之下,INK 最初不是为 Web 设计的工具,它被设计成集成到传统的游戏引擎中的插件。在 Inkle,我们几乎把它用于我们所创造的一切,从 80 Days(最初为移动端)到即将到来的 Heaven’s Vault 的 PS4与 PC 版。由于我们的开源,它也被用于一系列受人瞩目的独立游戏,像 Bury Me My Love 和 Where the Water Tastes Like Wine,两者都在2018年被 IGFs 提名。
但是用 INK 为 Web 写故事是很容易的!到目前为止,缺少的是一个简单的教程,提供了用 INK 写故事的方法,将其发布到网络上并供人浏览基础知识。
本教程假定你对 INK 或 Web 技术的经验知识为零,缺乏技术的作者能从这拥有入门所需的一切。但如果你希望深入了解某个主题,我们将在整个过程中随时提供切入点。
下面是本教程大致的主体。随意跳过或浏览你已熟悉的任何主题:
- 上手 INK :下载工具并编写一个简单的故事。
- 导出为 Web - 如何为你的故事创建可共享网页。
- 可选:自定义页面的外观,包括 CSS 基础知识的说明。
- 发布到网页*:上传你的作品到供他人游玩的完美场所。
INK 入门
这有一个 官方文档,告诉你关于 INK 所有需要知道的,从基础知识到复杂强大的结构。
但本指南将略过这些,指出其中最容易理解的功能,以便你能上手编写一个简单的故事。当然,如果你想尝试更高级的内容,请随时进入官方文档。
下载 Inky
我们将用 Inky 编写——用于创作 INK 脚本的官方编辑器。所以,请继续前进,并点击这里下载它!支持 Widows、Mac、Linux(如果你习惯 VS code *,也有用于支持编辑 INK 的插件)。
启动它时,你将看到一个双栏窗口。左侧编写故事,右侧可预览故事的运行。
首先要了解 INK,从本质上讲,它只是纯文本,并带有特殊的注释(“标记”)使其具有交互性。所以请继续,在左侧试着写一个句子,你会看到它出现在右边的预览区。也可以试着写多个段落看看。
重要*,写作时记得经常保存项目(Save Project),以防发生意外造成不必要的损失。
举个例子
现在,让我们看门见山,来看一个简单的故事示例。
若你以前从未接触过编程(很多符号!),下方截屏中的蓝色标记最初可能让人望而生畏。但我们会逐步介绍它们,以便你了解它们的组合方式。
请将下方内容复制到 Inky 的左栏中,然后在右栏中预览。右上角的单箭头是后退,双箭头是重置预览的故事。
伦敦,1872年 Phileas Fogg 先生的住所。 -> london === london === //这是节点 Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机! “领航,” 他喊到。 "我们去环游世界!" + “环游世界,先生?” 我大吃一惊。 -> astonished + [点头。] -> nod === astonished === “你在开玩笑!” 我认真地对他说。“你一定是在和我开玩笑,先生。” “我很认真。” + “好吧。” -> ending === nod === 我点了点头,但不相信一个字。 -> ending === ending //这也是节点 # CLASS: end “我们将在八十天内环游地球。” 他很平静地提出了这个近乎疯狂地计划“我们8:25去巴黎。一小时后。” -> END
预览时,调整左栏的内容,右栏预览也会实时更新,即使你正处于故事中。你甚至可以点击右栏中的某个单词,它会选中左栏中的源文本(当故事变得非常复杂时,这非常有用!)。你也可以先看这个故事,用默认模板发布到到网页的效果,点我运行体验。
学会注释*
好记性不如烂笔头。你可以在任何地方,用 // ,或 /* …… */ 帮你插入注释,记住你想记住的东西,避免一觉醒来就忘记“这是什么东西”。注释内容不会在故事运行时显示给玩家,也不会影响周围的其他内容。
“你怎么看?” 她问。 // 一行注释 “我无法评论,”我答。 /* …… 或者一段注释 */
还有一种更强的注释 TODO: ,帮你提醒要做什么。
TODO: 认真写这一节!
在这个简单的故事中,你只需要简单的了解三个部分:结点、跳转和选项。
1. 结点 knots
故事是由多个相互链接的部分构成的,在 INK 中我们称其为结点(knots)。结点名称的左侧至少需要两个等号(==)进行标记,右侧的则是可选的(例如 === london ===)。Inky 中会用蓝色突出显示已识别的标记,提示书写正确,并与其他内容区分。结点标记下面的内容都属于这个结点。
=== london === //这是节点 Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机! “领航,” 他喊到。 “我们去环游世界!”
2. 跳转 divert
现在谈谈链接,我们称之为跳转(divert)。-> london
使用跳转箭头(输入"减"与"右尖括号"),告诉故事去另一个结点。运行故事时,跳转是自动的且不会显示给玩家。
因此,在故事的开头,显示了介绍性段落之后,就有 -> london 的跳转,可将玩家直接跳入该名称的结点中。
伦敦,1872年 Phileas Fogg 先生的住所。 -> london //这是跳转 === london === //这是节点 Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机! “领航,” 他喊到。 “我们去环游世界!”
特殊:END
这个故事的结尾,还有一种特殊的跳转。如果你跳转到“ END”,会告诉 INK 我们完成了,这里是结局。
=== ending //这也是节点 开始 “我们将在八十天内环游地球。” 他很平静地提出了这个近乎疯狂地计划“我们8:25去巴黎。一小时后。” -> END //特殊的跳转 结局
试着删除例子中该有的 -> END ,Inky 将在边缘显示错误。若将鼠标悬停在警告上,会提示你“loose end”。
这是 Inky 的一个重要的帮助功能,当你故事越来越复杂时,这些警告可提醒你仍要编写哪些部分。
胶水* glue
如必须让内容在同一行显示,还可以使用胶水(glue) <> 将其强制黏在同一行。
我们回家<> -> to_savile_row === to_savile_row === 去萨维尔街<> -> as_fast_as_we_could === as_fast_as_we_could === 尽可能的快
你会在预览看到 我们回家去萨维尔街尽可能的快 ,而非分三行显示。
3. 选项 choices
谈到分歧,为了使互动小说更有趣,我们需要的最后一个关键功能当然是选项(choices):
+ “环游世界,先生?”
选项看起来是 INK 中最重要的元素。通常它们会与跳转直接结合在一起,以便能创造一个直接跳转到故事其他地方的选项。
+ [点头。] -> nod
我们编写这些内容时,需要注意几件事:
通常,你输入的选项内容既会成为可点击的选项,也会成为你点击后出现的文本的一部分。但是,如果你想要一个“无声的”(如动作)选项,则可以将选项放在[方括号中],如上方第二个示例所示。
这可以用于某些形式,像是不同的叙述风格。例如:
+ [草率的点头] -> nod + 我草率的点了点头, -> nod == nod == 这有些不可思议。
你还可以在选项下添加额外的文本行。这将在选择后显示。例如:
+ “环游世界,先生?” 我大吃一惊。 “你在开玩笑!” 我认真地对他说。“你一定是在和我开玩笑,先生。” -> astonished === astonished === 略……
等同于——
+ “环游世界,先生?” -> astonished === astonished === 我大吃一惊。 “你在开玩笑!” 我认真地对他说。“你一定是在和我开玩笑,先生。” 略……
INK 是非常灵活的,它可以让你有很多不同的方式来构建你的故事。
事实上*,] 之前的部分会被显示为选项,[] 内的内容会在选择后隐藏。你也可以把 [] 当作选项与选择之后内容的分隔符,便于快速输入,这些内容会显示在同一行。
+ 我草率的点了点头,[]这有些不可思议。
小技巧,你也可以试试 “就是死我也不会吃的[!”]……真香!” ,体验下选择前后的语气变化,这种细节在某些叙事风格种很有用。
一次性选项*
如想要选项只能被被玩家点一次,最简单的方式就是把选项的 + 改成 * 。
* “环游世界,先生?”
举个例子,你会发现下图中的一次性选项“2 Hello back!”不见了。
->hello == hello Hello world! + 1 Hello back! //普通选项 Nice to hear from you! ->hello * 2 Hello back!//一次性选项 Nice to hear from you! ->hello + 3 Hello back! Nice to hear from you! ->hello
结构说明
关于 INK 整体结构最后的说明:INK 始终从文件的顶部开始,然后一直向下运行。但如果你将所有内容拆分为结点,则务必确保在文件顶部至少有一个初始跳转(如-> top_knot),以告诉它以哪个结点开始(修改初始跳转,可更方便的进行测试)。
-> top_knot //初始跳转 === top_knot === Hello world! -> END
现在,为什么不尝试续写个故事呢?尝试插入更多的结点,更多的跳转,更多的选项,更多的结局,看看会发生什么!作为练习的开始,也许先试着把介绍性段落变成你的结点?
4. 条件内容
到目前为止,我们编写的所有内容,都能写成可发布的互动小说。但如果我们想根据玩家之前的经历不同,显示不同的文本和选项呢?
INK 会记录运行中玩家经历的每个内容,以便你今后查询。例如,要确定玩家是否经过了称为(地下墓穴)的特定结点 catacombs:
{ catacombs: //条件:经过地下墓穴 这里比巴黎的地下墓穴还要暗。 }
在这个{大括号中} ,你可以包含多行内容,甚至是跳转和选项(只有玩家经过了“catacombs”这个结点,大括号里的内容才会被显示)。
但是,一个更简洁的编写条件选项的方法如下,仅当玩家经过某个结点后才显示特定选项的方法:
+ {catacombs} [告诉她你的发现] -> tell_her
如果你想反转这个条件,换句话说,如果你想确认玩家没有经过地下墓穴,你只需在前面简单地加上:not
+ {not catacombs} [前往地下墓穴] -> catacombs
最后,你可用 and 和 or 形成更复杂的判定条件,并且用小括号来阐明逻辑的细节。几个例子:
{ catacombs and not pick_up_ring: //条件:经过地下墓穴且没经过捡起戒指 “所以你之后没找到它?”她质问到。 + [抱歉] -> apologise } { (catacombs or cross_river or sing_in_rain) and not buy_new_shoes: //条件:(经过地下墓穴或穿过河或在雨中唱歌)且没经过买新鞋 那天我的鞋子早就烂了。 }
再看个例子*,你能发现选“白色的”虽然和灰色的后面走的是一样的结点,但显示的内容变多了。
你想买什么颜色的狼? + 白色的…… -> white + 灰色的…… -> gray == white 让我找找看。 -> gray == gray { white:白色的狼卖没了。 }要买灰色的狼吗? + {white}我一定要白色的狼->wolf + 好的,买灰色的狼->wolf == wolf ……略 -> END
高阶 INK
我们只介绍了 INK 中强大功能的一小部分。如你想阅读更多或只是深入了解已经看到的东西,看看官方文档:
- 与任何编程语言一样,你可以创建自定义变量并执行数学计算。
- 我们一直在使用+作为选项符号,但通常我们建议使用*。区别在于,*选项只能选择一次,非常适合需要重复浏览,但你不希望重复选择的选项。
- 一个有点难学但易于编写的系统,称为“编织(weave)”,用于编写复杂分支,不需要你自己命名每个部分。我们的大多数游戏像 80 天,都是用这种系统编写的。
- 在结点中,你还可以包含称为“针脚(stitches)”的子结点。
- 写不同的内容和分支的中间内容是可能的,也是直截了当的(?)。
- 你可将 INK 文件拆分为多个连在一起的较小文件。
- ……
到这里为止,你已经掌握了 Inky 书写故事最最基础的语法。现在试着考验下自己:写一段游戏中常见的“询问 NPC”剧情。基础要求至少有三个可以问 NPC 的选项,且可以问完所有问题。进一步要求,玩家至少问一个问题后才能继续剧情,玩家问完所有问题后会直接继续剧情……
是不是觉得有些难(或麻烦)呢?这也是为什么会有高阶 INK 的原因。强烈建议你读一下“编织”,这个问题的答案就在编织那块的底部。你会发现,INK 应对这种内容其实游刃有余,或者说 INK 就是为写这种故事而生的,简单而流畅。事实也是如此,大部分 INK 的故事都是用编织写主要部分的,而非最基础的语法。
导出作品
下一步是将我们的故事保存到一组文件中,这些文件可以作为网页上传到网上。要在 Inky 中执行此操作,请选择“File”,然后选择“Export for web…”,然后选下故事的名称。你选择的名称将同时用于网页上的标题(因此,请适当的用空格和大写字母),以及保存到的文件夹的名称。
当你对故事进行更改后,尤其是你对外观更改后(参见下文),你应该选择“Export story.js only...”,将其保存到相同的位置并覆盖“ 故事名字.js”。这是更新 INK 内容后唯一需要更新的文件,其余的文件都只是 Web 模板的一部分。因此,若你更改了模板的外观,这样就不会意外覆盖。
至此,你已经完成了!如果愿意,你可以直接跳到“发布到网页”的步骤。
但是,如果你还想添加图像,修改外观,请继续阅读!
页面美化
INK 被设计成尽可能的专注于一项任务:编写交互式文本。为了在功能性、灵活性和简洁性保持良好的平衡,我们抵制了可能使语言超载的额外功能。
因此,INK 语言中没有用于插入图像之类的任何内置工具,这完全取决于你创造的故事类型。如你正在为3D 游戏编写对话,那么指定要显示的图像则不一定有意义。
但是,Inky 确实提供了一些额外的功能,这些功能可在导出 Web 后可用(自0.10.0版本开始)。这些额外功能都用的是 INK 的标签系统,它允许你为每个行提供特殊的文本注释,在行的开头或上方。标签是玩家不可见的,但可以由系统或 Web 模板读取。
1. 插入图片
插入图片的方法如下(图片会在导出 web 后显示):
# IMAGE: imageName.jpg
图像文件应与其他文件位于同一文件夹中,或者如果需要,可以使用相对路径:
# IMAGE: myImages/imageName.jpg
你也可以在行尾添加图片标签。该图像将始终显示在游戏文本上方。
The above picture is a dog. # IMAGE: wolf.jpg
(因为所有标记都与特定的文本行相关联,且当单独在某行放个标记时,它将与其下方的文本行关联。)
2. 清空屏幕
Inky 的 Web 模板另一个特有功能是 clear 标签:# CLEAR
这将清空当前显示的所有文本,从页面顶部重新开始。建议仅在选项后直接插入!如果插入到文本中间,则部分内容将在看到之前就被清除。
3. 深色主题与作者
要用深色主题,只需将其放在 INK 文件的最顶部:# theme: dark
Web 模板能够读取它作为一个全局标签,并内置了样式来改变主题(它使用"dark"作为整个页面的类。当你在 CSS 文件中看到 .dark 选择器的使用时,这些是深色主题的重写。)
要设置作者姓名,请将其放在 INK 文件的顶部:# author: 你的名字
这将用到 Inky 的 Web 模板种,并位于主标题的正下方。
4. 自定义 CSS 类
你还可以使用 CSS 类完全自定义各行文本的外观。在 INK 中,如下添加标签到文本行里:
你进入了森林。 地上有一滩血。 # CLASS: danger
然后,可以通过向你的 style.css 文件中添加以下内容,来告诉浏览器“danger”CSS 类的外观:
.danger { color: red; }
示例:END
如要以居中粗体显示结尾的“全剧终”,可用 Inky 模板包含的 end 的内置样式:
# CLASS: end 全剧终 -> END
回顾下:
- 中间一行是文本本身。
- 第一行将 CSS 类"end"应用于文本。
- 最后一行告诉 INK ,我们完成了,这不是一个“loose end”。
要调整 end CSS 类的样式,请在 CSS 文件底部查找 .end 。
5. 重启故事
Inky 的 Web 模板还具有一个内置功能,如果插入 # RESTART 标签,它将立即重置故事的进度(包括玩家选择的所有经历和变量),并从头开始。由于它会立刻生效,建议你放在一个选项后,例如:
你死啦! + 从头来过。 # RESTART -> END
6. 定制外观
本指南面向初学者 ,假定他对 Web 技术一无所知。
文件结构
上面的导出步骤应已保存出包含以下文件的文件夹(分享故事请分享整个文件夹):
- index.html - HTML 文件将其他文件绑定在一起,如你想运行你的故事,双击该文件。它告诉浏览器页面的结构,并告诉它加载其他文件。
- main.js - 这是主要的 JavaScript 文件,你可在其中自定义故事的呈现方式。
- style.css - 这是主要的 CSS 文件,它定义诸如颜色、字体以及大小调整和间距信息(如段落的宽度和边距)之类的内容。我们还可以定义过渡,例如段落淡入的方式。
- 故事名字.js - 这是你 INK 的实际内容,由 Inky 导出。这是你故事的唯一文件,而非 Inky 保存的通用模板的一部分。请勿直接编辑此文件。
- ink.js - 这是 INK 引擎本身的 JavaScript 端口。
要修改任何文件,应在纯文本编辑器中打开,如 VS Code 而非 Word!
更改字体和颜色
字体和颜色均由 CSS 文件 style.css 控制。如果打开文件,你将看到一系列类似下面的块:
body { font-family: 'Open Sans', sans-serif; font-weight: lighter; background: white; }
每个名称都以“ body”或“ h1”之类的名称开头。在 CSS 中,这称为选择器,因为它选择网页的特定部分进行样式设置。在上述情况下,它选择正文,实际上是整个页面。
字体列表 font-family 按优先顺序排列,这取决于用户计算机上的可用内容。在上面的示例中,Open Sans 是一种网络字体,是在文件顶部导入的,只需访问 fonts.google.com 进行选择即可选择,并说明如何使用它们(它为你提供了几个@import,你可以自己粘贴)。如由于某些原因无法下载该字体,它将退回到 sans-serif 选项。
你还可以使用用户系统中自带的字体,但是问题是,一定都有的字体 非常有限。因此通常字体最后都会写上 sans-serif。
强烈建议*前往 W3C School,花些时间简单的自学下 CSS 教程,再看下方阴影部分更容易上手。
文件中的一些 CSS 选择器和规则包括:
- h1-代表“一级标题”-即最大的标题,用于页面顶部故事的主要标题。如果要更改标题的大小,可在 font-size 更改属性。同样,这 h1, h2是一次可同时在两个选择器上设置规则的快捷方式,即一级二级标题。如果# author: 你的名字 在 INK 顶部有标签,则后者用于副标题。
- .header-以点开头的名称是类名称。这个特定的示例选择一个元素,该元素只是 title 和 byline 的容器。通常,在 HTML/CSS 中,元素被赋予容器来帮助构建或对间距和布局进行精细控制。
- p-这代表“段落”。它是页面上主体文本的选择器。因此,这是你要更改字体大小,文本颜色等的地方。
- a-这代表锚标记,锚标记是可点击链接的 HTML 术语-这些标记仅在我们的页面上用于可点击的选择,但也可以是任何东西。
- p.choice-“具有'choice'类的段落”。如果只是.choice,那就意味着“任何选项类”。我们页面上的选择实际上是按特殊样式设计的段落,其中包含可单击的链接(锚标记)。
- a:hover-这里:hover 称为伪类,它用于当用户的鼠标指针悬停该元素上时选择一个元素。
CSS 根据优先级应用样式,优先级基于选择器的具体程度(更具体的是更高的优先级)和文件中的位置(更低的是较高优先级)。这使你可以首先使用粗笔画定义样式,然后逐步覆盖它们。例如,我们 h2先定义,然后下移.dark h2覆盖 h2样式的一部分:当深色主题处于活动状态(.dark 类分配给整个页面-)时,我们更改颜色。
有关可以单独使用 CSS 更改样式的所有其他方式的更多信息,请尝试使用搜索“ CSS 教程”,那里有大量的资源!
例子:花哨标题
在 Google 字体 上选择字体,然后插入 CSS 文件顶部的行,例如:@import
@import url('https://fonts.googleapis.com/css?family=Lobster');
然后,将规则更改为类似的:
h1 { font-family: 'Lobster', cursive; font-size: 80pt; text-align: center; }
发布到网页*
原文此部分介绍的是发布到 itch.io ,但好消息是,你几乎可以把 Inky 导出的 Web 托管到任何可以放静态网页的地方,如 netlify(或 ZIET),github page,coding…… 和你的服务器上。
Netlify*
- 注册 netlify ;
- 将你的故事文件夹拖动到“Want to deploy a new site without connecting to Git?Drag and drop your site folder here”的框里。显示绿色的发布网址后,即发布成功,点击网址访问你的故事。
- 点击 Domain Setting ,可修改你故事的网址。
- 如需更新故事,选择 Depolys ,将更新后的文件夹拖入框里即可。(事实上,你一开始也可以通过连接 Github,完成全自动的更新发布,这里不再赘述了。)
看一下我们刚发布的example 。
App*
将网页打包成安装包是件很容易的事。
你可尝试用 HBuilderX 创建“5+App”项目进行云打包,这里不再赘述了。
另一种思路,也可以选择创建“Wap2App”项目,将托管的网页设成“wap 站首页地址”,更新与打包更容易些。
评论系统*
为网页插入评论系统里是容易的,同理为 Inky 生成的网页插入评论系统也是容易的。
这里有一个将 Gitlak 评论系统插入的 例子,点我运行体验。
当然如果你愿意,甚至还能插入 DaoVoice 这样的客服系统。
统计代码*
想知道有多少人玩,最简单的方式就是插入统计代码。方法和插入到网页一样,这里不再赘述了。
itch.io
你已经完成了你的杰作!是时候与世界分享它了。
你可以选择将文件上传到允许你托管网页的任何地方,但我们建议 itch.io,因为它是一个拥有独立游戏开发者的伟大社区,它是少数几个允许你上传纯 Web 内容的地方之一,最重要的是,它是免费的!如果你愿意,你甚至可以选择出售你的内容。
itch.io 还允许你上传游戏内容为私有草稿,以便在发布之前测试该过程。
最后,Inkjam 是从 itch.io 托管的,如果你已经将游戏上传到平台上,就可以轻松加入。
首先,如果你尚未 注册帐户,请在此处注册。然后:
- 从 仪表板 中选择"创建新项目"。
- 输入游戏/故事的详细信息,确保为项目类型选择"HTML"。
- 压缩从 inky 导出的所有文件并上传它们。
- 选择"此文件将在浏览器中播放"。
- 嵌入:我们建议你尝试此设置,以查看你喜欢的内容。
- 大小:我们建议 800 x 600 更适合阅读文本,而不是默认大小。对于移动设备来说,它仍然会缩小。
- 移动友好:是
- 自动启动:我们建议你试试它,并决定你喜欢什么。
- 全屏按钮:我们建议是的,但由你决定。
- 启用滚动条:由于模板内置了滚动,因此没有必要这样做。
你可在“查看和访问”下选择“草稿”,预览你的游戏。一旦你准备好把游戏发布,只需选择“公共”。
哇哇哇又有inky的文章啦!
不错
感谢提醒,才发现新版本已经支持图片了
看着文章写了一个故事
https://chunmingstory.netlify.com/
刚看了下官方readme 还有配合unity的插件,来着
【提示】将写好的 Inky 文件保存在单独的文件夹里(如,不要直接放在桌面上和其他文件混在一起😥),可提高 Inky 的稳定性,参见此处 https://github.com/inkle/inky/issues/214
小白想问一下本地图片在静态网页状态下可显示
但是在netlify生成网页的时候会显示不出来...有比较好的解决方法吗
@tototo:自己解决了....在本体js文件里修改图片网页链接就可以了
@tototo:可以试试ZEIT,国内比 Netlify 块,但默认域名可能被qq拦截
@逊狼:用ZEIT也成功了, 谢谢!
您好,请问在发布的时候更改网址可以更改为网站的子页面吗?_(:з」∠)_到时候点子页面链接就能跳到游戏这样。