A Blog

使用Twine制作文字游戏

 1951  4 分钟
使用Twine重置了之前的NVL，记录一下

起因

  • 画了一幅特别美的家OC图，想起这个OC的故事被我制作成了NVL，翻出来看了一遍后，被自己两年前拙劣的画技气笑了，突发奇想干脆做成网页点击阅读纯文本的模式好了。为啥不直接放博客，因为感觉游戏脚本和小说还是有点区别！还是有交互的模式更能体现作者的本意。
  • 之前下载过Inky，但是实在没弄懂语法，遂问Gpt还有什么可以制作游戏的引擎，GPT倾情推荐了Twine
  • 官方提供了网页版和桌面版，选择桌面版是因为比较担心网页版突发状况浏览器崩溃了重新恢复还挺麻烦的……

工具

  • 使用的Twine桌面版，创建的故事默认为Harlowe格式，官方提供了四种格式，属于是高手才会考虑该用哪种，我只要实现基础的点点点和能分支选项就够了所以没改
  • 建议先处理好文本，并使用EmEditor进行辅助工作，主要因为我的写法有很多重复代码，EmEditor的宏功能能省事很多
  • 耐心，一点点能看懂语法的代码知识，GPT

功能实现

基本显示

  • 在Twine中，最基础的单元为段落/片段，通过不同片段之间的逻辑与跳转关系，实现游戏功能

  • Twine默认的呈现是段落文字呈现-点击继续-段落文字呈现的模式，举例来说：

这是一段文本内容。						这是一段文本内容。
[[继续|第二段]]							[继续]
这是第二段文本内容。			=>			这是第二段文本内容。
[[继续|第三段]]							[继续]
这是第三段文本内容。						这是第三段文本内容。
  • 上面是官方给出的通过段落与段落之间跳转，实现的点击呈现内容的模式，但我不喜欢每一句下面有个继续按钮，更喜欢呈现为点击任意空白处跳出下一句，因此我的代码是这样写的，所有的文本都在一个段落里
(click: ?page)[(show: ?line2)]
|line2)[
这是一段文字。
(click: ?page)[(show: ?line3)]
]
|line3)[
这是第二段文字。
(click: ?page)[(show: ?line4)]
]

  • (click: ?page)表示点击任意空白处，后接[]表示浏览器给出的动作，我这里填入的是(show: ?line2)，表示显示line2中的内容

  • 而line2的格式是|line2)[]，其中[]里填入的是line2包含的具体内容

  • 这里面有两个问题：

    1. show后填入的line的序号要和下一个line对应
    2. 每个句子都要这样拆分，写起来很麻烦

  • 我的解决方法是使用空白模板，用EmEditor的宏功能（或者直接用其他代码）批量生成好之后，再粘贴到Twine的段落输入框里，把文本内容复制粘贴进去

    |line)[

(click: ?page)[(show: ?line)]
]

选项

  • Twine能够很方便地实现根据选项显示不同分支文本的功能，甚至可以写在同一个段落里而不需要跳转其他段落

  • 这样做的好处是，如果你只是想要写很短的一段不同剧情，后面的剧情大部分是相同的，即，这个选项不会影响到故事剧情的话，你不需要重复写两遍文本，也不需要在展现完不同剧情后再点一次选项回到公共文本段落中，不会出戏

    |line12)[
这是选项前的最后一句话。
(click: ?page)[(show: ?choices1)]
]
|choices1)[
(link: "选项A")[
(set: $route to "A")
(hide: ?choices1)
(show: ?line13)
]
(link: "选项B")[
(set: $route to "B")
(hide: ?choices1)
(show: ?line13)
]
]
|line13)[
(if: $route is "A")[这是A的分支内容]
(else-if: $route is "B")[这是B的分支内容]
(click: ?page)[(show: ?line14)]
]
...
|line16)[
这是公共语句部分。
(click: ?page)[(show: ?line17)]
]
    • 注意事项：如果你的故事里有多个选项，请分别命名为choices1``choices2……不要重名；if-else语句中的$route is " "里，也不能重复使用A、B、A1、B1……最好使用A、B、C、D……，否则会报错

  • 如果要普通地写跳转到新段落的句子（即下一句出现的是能跳转新段落的选项），这样写

|line15)[
[[新段落1]]
[[新段落2]]
]
  • 在结局处，想要点击空白处回到游戏开始的界面，这样写，(goto: "段落名")这一句里，引号为英文引号
|line135)[
END：ENDNAME
(click: ?page)[(goto: "游戏开始")]
]

美化

文字美化

  • 在段落输入框中上方，第二行第一个按钮style可以插入美化代码，能够实现粗体、斜体、特效、动画等种种功能
  • 第二个按钮能更改字体颜色，第三个按钮可以添加边框，第四个按钮能更改文本倾斜度，第五个按钮为加入序号，第六个按钮更改段落居中
  • (Macro: )按钮能查询Twine的宏功能（虽然我觉得没有内置搜索很难用），右侧的眼睛按钮可以高亮显示文本内容
  • 除了上述Twine内置的文字美化功能，也可以直接使用Markdown语法在文本上进行格式化，但Html标签在Twine中有部分失效（比如<font>）

样式美化

  • 由于Twine最终导出的是一个HTML文件，所以可以直接方便地修改样式表以调整各个元素的样式

  • 点击故事-样式表，可以打开样式表输入框，直接输入css代码即可

    tw-story { } //修改整个html页面的样式
tw-passage { } //修改片段的样式
tw-link { } //修改链接的样式

总结

  • 感觉我真是太努力了搓了两天就搓出来了，看了B站有人甚至拿来做rpg游戏，太厉害了
  • 都说到这里了请来玩我的bgb大作女王与侍奉她的法师之间你死我活拉拉扯扯爱情故事！非常萌的我流王与法师故事！点这里游玩

相关文章：