「记录：从 0 开始的 ink 旅程」

记录：从 0 开始的 ink 旅程

2023/02/20 字数统计： 1.6k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　虽然这个页面会在直播的时候放出来但反正早播的时候大概也没几个人所以偷偷非正式地宣布一下，之后会以「黒ニコル」的身份投入游戏制作的工作中。
　　狒不动了.jpg
　　查了一下 ink 曾经有过中文文档，但目前域名是无法访问的状态，作者的 github 也有小半年没有动静了。所以还是要自己动手汉化一份的样子，总之先从官网上的新手教程开始？
　　也不会是特别忠实的逐字翻译，主要还是一篇笔记向的文章，如果能对看到的人有所帮助就最好不过了。

Ink / inky 是什么？

　　Inky 是一个用于互动小说或者文字游戏的编辑器，ink 是配套使用的脚本，基于 Javascript 开发。
　　大概就是这样？
　　Ink 的生成结果是完全由 dom 生成的，这意味着你的游戏界面可以轻松适配各种尺寸的屏幕，并可以通过 JS 与其它网页元素联动。←总之这是我的需求，不过官方的示例是纯文本的。
　　官网地址：https://www.inklestudios.com/ink
　　Github：https://github.com/inkle/ink

界面介绍

　　嗯？我真的要写这个吗？先占个坑吧【

结构

节点与章节 / KNOTS

基本语法
- 节点：=== TITLE ===
- 章节：== TITLE

　　Ink 剧本的基本构成单位，可以理解为小说中的「章节」与「段落」，节点的标题会成为不同选项跳转的标记，因此显然是不可以重复命名的。

选项

基本语法
- 单次选项：\* AAA[BBB]CCC
  生成的选项按钮为AAABBBCCC
  点击后显示的内容为AAACCC
  点击后会自动移除
- 永久选项：+ AAA[BBB]CCC
  内容显示规律同上
  点击后还会重复出现

跳转

基本语法
-> TITLE

　　按照语法规范 ink 的脚本必须以 -> END 结尾。

剧本

　　互动小说的核心功能就是选项与跳转，那么以下是一些示例，可以复制到 inky 中自行测试一下：

单次选项

　　我更倾向于称呼它为「一次性选项」，但软件界面中的中文文本是「单次选项」，为了阅读体验还是以软件内译名为准。

　　早上 4 点半，猫猫辅助机从睡梦中醒来，她决定：-> CHOOSE

=== CHOOSE ===

 * [吃饭]
　　辅助机决定去吃饭。来到饭碗面前，发现昨晚吃得太多碗已经空了。 
   -> CHOOSE
 * [磨爪子]
　　辅助机决定去纸壳猫抓板上磨爪子，很快地上出现了很多新鲜的纸屑。 
   -> CHOOSE
 * [总之先踩阿盐一脚]
　　辅助机一时也不知道要去干嘛，总之先在阿盐肚子上踩一脚再说。 
   -> ENDING

=== ENDING ===
　　阿盐被踩醒了，骂了一句「臭猫」爬起来给辅助机喂饭。
　　今天也是只睡了两个小时的一天呢，哈哈（哈哈）。
-> END

　　#养猫人造人的真实生活 哈哈（哈哈）:4o-2:
　　那么这一段文本的运行逻辑是，在第一行后跳转到选项部分，也就是 CHOOSE 节点。在点击前两个选项后会返回 CHOOSE 节点的开始重新运行一遍，因为 \* 开头的是「单次选项」，所以当我们再次回到选项结点时，已经点击过的选项会被移除。

永久选项

　　与单次选项相反，永久选项在点击后也会一直存在于节点中。

　　猫猫辅助机在床边发现了一个线头，她决定…… -> CHOOSE

=== CHOOSE ===

 + [这是什么？咬一口]
　　这是什么？咬一口，哎呀舌头被勾住了，快吐出来。-> CHOOSE
 + [算了] 
　　辅助机觉得这个线头对她没有吸引力，于是继续睡觉了。
 -> END

　　那么在这个剧本中，猫猫辅助机可以不停地重复咬线头的动作，直到选中「算了」。~~这猫好像不太聪明的样子~~

编织？

　　由于 ink 仅支持单个存档和单个剧本文件的特性，很显然它并不适合展示长篇游戏文本，但对于个人短篇文字游戏或者 demo 来说是非常便利的。除了上述的标准语法外，ink 还提供了名为「编织 / weave」的高级语法，在写作上更为精简，但无法重复进入选项列表。
　　我暂时也没搞明白所以先坑着吧【

多媒体标签

　　前文提到过 ink 自带添加音频 / 图片与切换背景图的功能，那么在此基础上可以拓展开发其它功能，比如以下是一个切换立绘的案例：

在导出网页后修改 index.html
添加 <div class='charactor'></div> 作为立绘放置区域

修改 style.css 文件，将立绘放置区域移动到指定位置

.charaA {
    display: block;
    width: 256px;
    height:256px;
    position: fixed;
    bottom: 0;
    left: 10%;
    background-image: none;
    background-repeat: no-repeat;
}

修改 main.js 文件，参考切换背景图的代码添加自定义切换立绘标签

...
    var storyContainer = document.querySelector('#story');
    var outerScrollContainer = document.querySelector('.outerContainer');
+   var charactorChange = document.querySelector('.charactor');
...
    // BACKGROUND: src
    else if( splitTag && splitTag.property == "BACKGROUND" ) {
        outerScrollContainer.style.backgroundImage = 'url('+splitTag.val+')';
    }

+   // CHARACTOR: src
+   else if( splitTag && splitTag.property == "CHARACTOR" ) {
+       if('0' in this) {
+       charactorChange.style.backgroundImage = 'none';
+     }
+       charactorChange.style.backgroundImage = 'url('+splitTag.val+')';
+   }

修改完毕后即可在正文内通过 # CHARACTOR: filename.png 切换立绘显示
当标签为 # CHARACTOR: 0 时则会移除立绘图片（切换为透明背景）

無色人間。