十分钟学会在图书馆创作互动小说:从资深到大师

十分钟学会在图书馆创作互动小说:从资深到大师

 

上次修订日期  2021-08-17
上次重大版本更新日期  2021-08-09
*图书馆推荐阁下在重大版本更新之后再次阅读本指南

 

1.前言

本教程涉及的全部内容仅需高中学业水平均可理解,希望阁下能够坚持下去。加油!!!

本教程假定阁下对 INK 或 Web 技术的经验知识为零,缺乏技术的作者能从这拥有入门所需的一切。

下面是本教程大致的主体。

  • 上手 INK :下载工具并编写一个简单的故事。
  • 中阶 INK – 如何为阁下的故事增光填彩。
  • 自定义页面的外观,包括 CSS 知识的说明。
  • 导出为web,并发布到图书馆站点

*第3点由于难度过高,不在本次新手教程中赘述,该内容缺失对完成互动小说无任何影响

在本教程中,所有的示例代码均使用绿色颜色的字体表示,并附有一键复制按钮。由于绿色颜色的字体在黑色背景下的显示效果不理想,阁下可以点击页面右下角的工具箱,关闭黑夜模式。

本教程中,所有非必学的内容的标题后会标有,不过我们还是推荐阁下研究一下,难度并不高,而且对创作很有用。

可能有些作者因为时间、精力等等原因无法独立完成制作,也可与其他作者一同创作,分别完成脚本、编写等步骤。图书馆站方也可协助完成代码编写部分,欢迎联系若雨。

 

应用场景提示:

  • 房间调查:设定多个调查点,进行某个调查之后才可解锁某个剧情/对话的某个选项(可以设定调查的次数小于选项数)
  • gal剧情:通过各种选择、经历不同事件,达成不同结局
  • 在线调教:可选穿戴不同玩具,在不同剧情有不同选项
  • 随机事件:可选是否发生随机事件,可以影响全局
  • 道具play:可以限定数值大小,要求在数值不超过设定值的情况下完成目标
  • 大地图移动:可以设定各个方位点,在不同方位点之间进行移动并探索
  • 好感度:可以通过设置变量,使选项会影响角色好感度,从而浏览不同剧情
  • 回合制战斗:可以制作回合制rpg打怪升级游戏
  • 单人跑团:通过设定好的kp和选项,随机数骰子达成类似单人团的体验
  • 通过随机数系统,可以用来打昆特牌/抽塔罗牌
  • 更多使用方法就需要阁下自己思索啦

*以上多种场景组合使用效果更优哦

 

点击这里下载INK示例:

https://alhs.xyz/wp-content/uploads/2021/08/1628507091ink-shi-li.zip

将该文件解压后用ink打开,配合本指南食用更佳哦

 

2.INK 入门

这有一个 官方文档(英文),告诉阁下于 INK 所有需要知道的,从基础知识到复杂强大的结构。

但本指南将略过这些,指出其中最容易理解的功能,以便阁下能上手编写一个简单的故事。当然,如果阁下想尝试更高级的内容,请随时进入官方文档。

①下载INK

我们将用 Inky 编写——用于创作 INK 脚本的官方编辑器。

点击这里前往它的下载发布页https://github.com/inkle/inky/releases

支持Windows、Mac、Linux(如果阁下习惯 VS code *,也有用于支持编辑 INK 的插件)。

点击这里直接下载v0.12.0 windows版本(因github原因,下载速度可能不尽人意。以下分别是32位版本和64位版本)

https://github.com/inkle/inky/releases/download/0.12.0/Inky_windows_32.zip

https://github.com/inkle/inky/releases/download/0.12.0/Inky_windows_64.zip

点击这里直接下载v0.12.0 mac版本

https://github.com/inkle/inky/releases/download/0.12.0/Inky_mac.dmg

启动它时,阁下将看到一个双栏窗口。左侧编写故事,右侧可预览故事的运行。

首先要了解 INK,从本质上讲,它只是纯文本,并带有特殊的注释(“标记”)使其具有交互性。所以请继续,在左侧试着写一个句子,阁下会看到它出现在右边的预览区。也可以试着写多个段落看看。

重要*,写作时记得经常保存项目(Save Project),以防发生意外造成不必要的损失。

将写好的 Inky 文件保存在单独的文件夹里(如,不要直接放在桌面上和其他文件混在一起),可提高 Inky 的稳定性

②举个例子

现在,让我们看门见山,来看一个简单的故事示例。

若阁下以前从未接触过编程(很多符号!),下方截屏中的蓝色标记最初可能让人望而生畏。但我们会逐步介绍它们,以便阁下了解它们的组合方式。

请将下方内容复制到 Inky 的左栏中,然后在右栏中预览。右上角的单箭头是后退,双箭头是重置预览的故事。

伦敦,1872年
Phileas Fogg 先生的住所。

-> london

=== london === //这是节点
Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机!   
“领航,” 他喊到。 "我们去环游世界!"

+ “环游世界,先生?” 
    我大吃一惊。
    
    -> astonished
    
+ [点头。] -> nod


=== astonished ===
“你在开玩笑!” 我认真地对他说。“你一定是在和我开玩笑,先生。” 
“我很认真。” 

+ “好吧。”

    -> ending


=== nod ===
我点了点头,但不相信一个字。

-> ending


=== ending //这也是节点

# CLASS: end
“我们将在八十天内环游地球。” 他很平静地提出了这个近乎疯狂地计划“我们8:25去巴黎。一小时后。”

-> END
预览时,调整左栏的内容,右栏预览也会实时更新,即使阁下正处于故事中。阁下甚至可以点击(按住alt)右栏中的某个单词,它会选中左栏中的源文本(当故事变得非常复杂时,这非常有用!)。阁下也可以先看这个故事,用默认模板发布到到网页的效果

③换行

INK 官方并没有提供制造一整个空行的代码,也就是说,如果你想让两个段落离得远一些,那么只能用HTML的换行代码

 

<br>

 

直接把这四个字符放在一行就可以了

④学会注释

好记性不如烂笔头。阁下可以在任何地方,用//......,或 

/* ...... */帮阁下插入注释,记住阁下想记住的东西,避免一觉醒来就忘记“这是什么东西”。注释内容不会在故事运行时显示给玩家,也不会影响周围的其他内容。(这里的……是注释内容,阁下可以随意替换)

“你怎么看?” 她问。

// 一行注释

“我无法评论,”我答。

/*
	……或者一段注释
*/

在这个简单的故事中,阁下只需要简单的了解三个部分:结点跳转选项

 

3.初级INK制作

①结点 knots

故事是由多个相互链接的部分构成的,在 INK 中我们称其为结点(knots)。结点名称的左侧至少需要两个等号==进行标记,右侧的则是可选的(例如 === london ===)。Inky 中会用蓝色突出显示已识别的标记,提示书写正确,并与其他内容区分。结点标记下面的内容都属于这个结点。

=== london === //这是节点
Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机!   
“领航,” 他喊到。 “我们去环游世界!”

结点的名称(不能有空格、中文)不会在运行故事时显示。

而当我们想要把不同部分链接的在一起时,会用到它们。

②跳转 divert

现在谈谈链接,我们称之为跳转(divert)。

-> london

使用跳转箭头(输入”减”与”右尖括号”),告诉故事去另一个结点。运行故事时,跳转是自动的且不会显示给玩家。

因此,在故事的开头,显示了介绍性段落之后,就有 -> london 的跳转,可将玩家直接跳入该名称的结点中。

伦敦,1872年
Phileas Fogg 先生的住所。

-> london //这是跳转

=== london === //这是节点
Phileas Fogg 先生早早从改革俱乐部回到了家,并乘坐了新型的蒸汽运输机!   
“领航,” 他喊到。 “我们去环游世界!”

如果阁下刚写好一个选项的跳转,编辑器用红色的X提醒你

Empty diverts (->) are only valid on choices

不要惊慌,这是因为你还没有创建相同名称的节点,ink不知道应该跳转到哪里,只需要创建对应的节点,这个报错就会消失

 

如果在跳转之后,阁下正在编写这个节点的内容,编辑器用黄色三角感叹号提醒你

Apparent loose end exists where the flow runs out Do you need a '> DONE" statement, choice or divert?

或是用红色X提醒你

Apparent loose end exists where the flow runs out Do you need a '> DONE" statement, choice or divert?ran out of content. Do you need a '> DONE" or '> END'?

不要惊慌,这个原因是,你的这个节点缺失继续跳转的内容,解决办法就是加上跳转,可以在节点编写选项然后加上跳转,这样这个报错就消失了。

如果现在已经是结局了,那么在最后加上 ->END 即可,我们马上就会说这个事情

③特殊:END

注意,这个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 ===
尽可能的快

阁下会在预览看到 我们回家去萨维尔街尽可能的快  ,而非分三行显示。

⑤选项 choices

谈到分歧,为了使互动小说更有趣,我们需要的最后一个关键功能当然是选项(choices):

+ “环游世界,先生?”

选项看起来是 INK 中最重要的元素。通常它们会与跳转直接结合在一起,以便能创造一个直接跳转到故事其他地方的选项。

+ [点头。] -> nod

通常,阁下输入的选项内容既会成为可点击的选项,也会成为阁下点击后出现的文本的一部分。但是,如果阁下想要一个“无声的”(如动作)选项,则可以将选项放在[方括号中]

用人话说,就是阁下选的选项也会出现在文本中,如果阁下不想让它出现在文本中,那就把选项放到方括号里面。

是不是还是有点难懂?那就忽略方括号,加不加方括号对互动的影响微乎其微。

⑥*一次性选项

如想要选项只能被被玩家点一次,最简单的方式就是把选项的+改成*

* “环游世界,先生?”

举个例子,阁下体验时会发现一次性选项“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

现在,为什么不尝试续写个故事呢?尝试插入更多的结点,更多的跳转,更多的选项,更多的结局,看看会发生什么!作为练习的开始,也许先试着把介绍性段落变成阁下的结点?

⑧*收束 gathers

*本节内容为高阶inky残卷中内容,但是因其在文章制作中帮助巨大,且难度不高故复制至此

收束(gathers) - 将小分支收回到一起。让我们看这个例子:

“怎么了?”我的主人问。
	*	“我有些累。”[]我重复道。
		“确实,” 他答道。 “这太糟了。”
	*	“没事,先生!”[] 我回应道。
	*  我说,这次旅行真可怕。”[] 我不想再继续了。”
		“啊,” 他有些动容。 "你看起来很沮丧。明天,情况会好些的。"

在真正的游戏中,这三个选项都可能导致相同的结果,Fogg 先生离开了房间。我们可用收束来执行此操作,而无需创建任何新结点或新跳转。

“怎么了?”我的主人问。
	*	“我有些累。”[]我重复道。
		“确实,” 他答道。 “这太糟了。”
	*	“没事,先生!”[] 我回应道。
	*  我说,这次旅行真可怕。”[] 我不想再继续了。”
		“啊,” 他有些动容。 "你看起来很沮丧。明天,情况会好些的。"
    
    -	Fogg 先生离开了房间。

我们可将这些“收束和分支”串在一起,让故事始终向前运行。

=== escape === 
我跑出森林,狗跟在我后面。

	* 我检查了下珠宝[],都还在我的钱包里,这感觉就像步入了春天。 <>
	
	* 我没停下来喘口气[],继续向前跑。<>

	*	我欢呼了出来。 <>

- 	路没多远了!Mackie 会发动引擎,然后我就安全了。//收束
  
	*	我来到路边四处张望[]。 你能相信吗?
	* 我不该总是说,Mackie一直很可靠[]。他从未让我失望过。更确切地说,从来没有,直到那晚前。

-	路旁边是空的。 Mackie 不见了。//再次收束

*注意 - 的使用哦,使用 - (收束)可以将数个选项都导向同一个结果,这在当懒狗时十分好用。

*示例代码中的 [] 有什么用?INK里自己运行一下就知道啦。

⑨*清空屏幕

Inky 的 Web 模板另一个特有功能是 clear 标签:# CLEAR

这将清空当前显示的所有文本,从页面顶部重新开始。建议仅在选项后直接插入!如果插入到文本中间,则部分内容将在看到之前就被清除。

4.中级INK制作

通过以上的学习,阁下应该可以制作基本的互动小说啦!通过点击不同的选项,触发不同的剧情,最终达成某个结局。

但如果我们想根据玩家之前的经历不同,显示不同的文本和选项呢?

①判断

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

②重启故事

Inky 的 Web 模板还具有一个内置功能,如果插入 # RESTART 标签,它将立即重置故事的进度(包括玩家选择的所有经历和变量),并从头开始。由于它会立刻生效,建议阁下放在一个选项后,例如:

你死啦!
+ 从头来过。
    # RESTART
    -> END

这里代码中添加 -> END 跳转有什么用呢?虽然玩家并未结束,但它可以防止 INK 报错“loose end”。

 

5.高阶INK制作

①跨文章传输变量

*考虑到读者群体在存档保存方面的不稳定性,图书馆不建议制作流程上强依赖本功能的大型跨文章的内容

*有关变量的知识请参阅 校史馆:高阶INK残卷

 

图书馆目前支持不同文章间交换变量数据

导出数据:

 

# EXPORT: var

 

意思是将当前状态下的var变量的值导出(供其它文章使用),如果多次导出会覆盖之前导出的值

 

导入数据:

 

# IMPORT: var @ post @ var2

 

意思是将post文章中的var2这一变量导入,存储到var这一变量当中。

*这里的post为图书馆文章名。请在设置前提前规划文章的名字。
** 注意,由于ink的设计问题,我们忽略了紧跟着IMPORT语句的那段文本,具体含义请参考示例。

 

例子

 

文章1  测试导出

 

VAR test = "测试用文本"
# EXPORT: test
-> END

 

文章2  测试导入

 

VAR imp = "会被覆盖的内容"
# IMPORT: imp @ 测试导出 @ test
imp的值为{imp}
imp的值为{imp}
-> END

 

后一篇文章在前一篇文章执行后会输出

 

 

 注意,由于ink的设计问题,第一行因为是紧跟着IMPORT语句,因此imp变量还没有更新。

我们忽略了紧跟着IMPORT语句的那段文本,即: imp的值为会被覆盖的内容  这句话不会在图书馆显示,这需要阁下创建一行无用文本来保证需要的文本能正确显示。

用人话来说,就是:B文章要读取A文章的变量,因为ink的原因,紧跟着IMPORT语句的的imp变量不会更新,从第二句开始才会更新。所以图书馆干脆就不显示这个不会更新的第一句,阁下需要准备一个无用文本放在第一句来当“替死鬼”,以保证想要显示的文本能正常显示。

 

注意,本功能依赖图书馆DE渲染技术,在本地无法测试!请自行确保代码准确无误。

 

 

 

我们只介绍了 INK 中强大功能的一小部分。如阁下想阅读更多或只是深入了解已经看到的东西,看看官方文件

  • 与任何编程语言一样,阁下可以创建自定义变量并执行数学计算。
  • 我们一直在使用+作为选项符号,但通常我们建议使用*。区别在于,*选项只能选择一次,非常适合需要重复浏览,但阁下不希望重复选择的选项。
  • 一个有点难学但易于编写的系统,称为“编织(weave)”,用于编写复杂分支,不需要阁下自己命名每个部分。我们的大多数游戏像80天,都是用这种系统编写的。
  • 在结点中,阁下还可以包含称为“针脚stitches)”的子结点。
  • 写不同的内容和分支的中间内容是可能的,也是直截了当的(?)。
  • 阁下可将 INK 文件拆分为多个连在一起的较小文件。
  • 插入图片
  • ……

到这里为止,阁下已经掌握了 Inky 书写故事最最基础的语法。现在试着考验下自己:

写一段游戏中常见的“询问NPC”剧情。基础要求至少有三个可以问NPC的选项,且可以问完所有问题。

进一步要求,玩家至少问一个问题后才能继续剧情,玩家问完所有问题后会直接继续剧情……

是不是觉得有些难(或麻烦)呢?这也是为什么会有高阶 INK 的原因。强烈建议阁下读一下“编织”,这个问题的答案就在编织那块的底部。阁下会发现,INK 应对这种内容其实游刃有余,或者说 INK 就是为写这种故事而生的,简单而流畅。事实也是如此,大部分 INK 的故事都是用编织写主要部分的,而非最基础的语法。

图书馆存有翻译了官方文档的部分内容,便于阁下选择性了解,点我跳转至:校史馆:高阶INK残卷

*这里提到的 变量、编织、阵脚在高阶INK残卷中均有叙述。阁下可以制作

  • 周期,一次性,随机的可变文本
  • 嵌套的事件,收束的事件
  • 变量,条件,逻辑
  • ……

 

6.导出作品

①附加信息

Ⅰ.当作品创作完成后,阁下还需要添加相关信息。阁下提交文章至图书馆后,会由图书馆官方“互动小说姬”发布,因此阁下需要在互动小说添加自己的版权信息(555能不能给图书馆/若雨留个位置)

示例:

《文章标题》

作者:xxxxx

编辑(如果有):xxxxx

测试(如果有):xxxxx

鸣谢:xxxxx

版本:x.x

Ⅱ.因为互动小说的性质原因,第一次没有通关,导致第二次打开时被迫重新开始游玩的体验无疑是糟糕的。因此需要阁下在互动小说开始前添加游玩时间信息

示例:

本小说(单线)通关游玩时间约为:xx分钟

为防止给阁下带来不好的使用体验请提前规划时间。

Ⅲ.以防有人不会操作互动小说,阁下可能还需要添加一个使用教程

示例:

因为cookies等多种原因页面重新加载后上次的存档将变得不可靠。因此推荐阁下一次性通关当前线路。

互动小说为图书馆测试产品,如有bug请点击页面下方的 反馈/举报 链接。

Ⅳ.阁下有什么想说的(作者的话)也可以一并写下哦

 

②发布

怎么保存?
点击左上角的File,你会看到Save Project
这样保存是后缀为ink的文件,这是你的工程源文件,任何人拿到这个文件都可以编辑/导出这个小说的内容

如果阁下是打算多人合作一本小说,则分享的时候请传送这个ink文件,但千万不要泄露哦

 

经过了头秃的文本创作、代码编写、反复测试以后。阁下的作品终于可以发布啦。

下一步是将我们的故事保存到一组文件中,这些文件可以作为网页上传到网上。要在 Inky 中执行此操作,请选择“File”,然后选择“Export for web…”,然后选下故事的名称。阁下选择的名称将同时用于网页上的标题(因此,请适当的用空格和大写字母),以及保存到的文件夹的名称。

当阁下对故事进行更改后,阁下应该选择“Export story.js only…”,将其保存到相同的位置并覆盖“ 故事名字.js”。这是更新 INK 内容后唯一需要更新的文件,其余的文件都只是 Web 模板的一部分。因此,若阁下更改了模板的外观,这样就不会意外覆盖。

好的,现在阁下应该拿到了一份含有后缀名为html、js、css的几个文件。如果阁下打算自行在本地观看,则需双击.html文件即可

如果阁下需要发布到图书馆,请点击Save Project,填写文件名,把这个后缀为ink的文件,通过邮箱或是什么方式发送给若雨就可以了,发送时还请一并将文章标题,摘要,标签等作品信息告知若雨。

若雨邮箱是[email protected]

 

有没有很激动!快去试一试吧!!!!!!!

写到这里若雨都无比激动了,快去试试!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

本指南适用于在图书馆发布的作者
本指南由https://www.yuque.com/inky/pcke0w/gix3ga改编
修改翻译自https://www.inklestudios.com/ink/web-tutorial

 

评论

  1. 若雨
    若雨 馆长
    Windows Chrome
    10月前
    2021-8-14 15:40:11

    加油!一定要坚持哦!
    有问题也可以评论区讨论哦~

  2. 匿名
    Android Chrome
    3天前
    2022-5-23 19:00:35

    真的反人类,建议简化创作流程

    • 若雨
      若雨 馆长
      Android Chrome
      3天前
      2022-5-23 22:30:14

      互动小说本来就有一定的创作门槛,ink已经是公认的,可以进行高度自定义的编辑器,而且本篇教程已经写的非常详细。

发送评论 编辑评论


				
error: 阁下...这段文字受图书馆结界保护哦