BlogVN 构思

想开坑,写一个能够把 HTML 当作脚本的网页视觉小说引擎。这样子就可以把博文当作视觉小说展示了。

黄鼠希望它所用的脚本能尽量符合 HTML 语义,并且尽量做到能够使同一篇文章(同一段 HTML)既能以直接文章方式显示,又能够以视觉小时方式被这个引擎显示。

项目描述大概会是 "Turn your blog article into a visual novel" 这样子。名字还没有想到特别满意的,暂且叫 BlogVN 这个没有创造力的名字好了,希望没有撞名字。

这里是大概的构思:

一个 <p> 在 HTML 中含义是一个段落,所以在 BlogVN 中,每段 <p> 中的内容结束之后,就会是一个需要点一下才会前进的文字内容。在遇到下一个 <p> 开始时,先清空对话框中的内容,然后再显示下一个 <p> 中的文字。在 <p> 外的文字会被忽略。

如果 <p> 中内容的开头几个字包含冒号(全角或半角都可),则冒号之前的文字会被当作角色名称显示,冒号之后的文字会被当作该角色说的话显示。这个行为要能通过为 <p> 添加 blogvn-no-dialog 类来禁用,以避免真的在独白中要包含冒号时没有办法。此外,最好还能够让文章作者自定义对话的这个解析方式,也许可以让文章作者提供一个 RegEx 来作为引擎初始化的选项,比如可以把它设置成 (?<name>.*?):「(?<text>.*)」 来让文章中可以把对话包上引号。

<img> 中的图片会被默认会被作为背景显示,替换掉当前使用的背景图片。 data-blogvn-bg-size 属性可以是 covercontain ,对应 CSS 中 background-size 这两个值的含义。

人物立绘可以在引擎初始化选项中定义,然后每当人物出现于对话中时,立绘也会被显示。此行为默认启用,默认值可以被引擎初始化选项更改。此行为也可以被单个 <p> 中的 blogvn-character-image-enableblogvn-character-image-disable 类来单次启用和禁用。

遇到 <audio> 会播放效果音。遇到 <video> 会播放视频。

一个带有 blogvn-goto 类的 <a> 会被当作 goto 对待,标签的内容会被忽略。它的 href 属性中若只包含有 URL fragment , goto 的目标则是此 fragment 指定的 HTML 元素。脚本的解释会从那个元素继续进行。因此,每个带有 id 的元素都可以被当作 label 。

一个带有 blogvn-choices 类的标签(通常会是 <p><div><ul><ol>)会被当作视觉小说的选项列表,玩家需要选择一个选项才可继续。其中每个带有 blogvn-choice 类的 <a> 都会被当作一个选项,点击后行为与 goto 一致。

一个带有 data-blogvn-if 属性的标签(通常是 <aside><section>)会首先 eval 此属性中的 JS ,只有 truthy 才会解释其中的内容。 data-blogvn-unless 属性的行为与此相反。如果这两个属性被用在 <p> 上,其中的文字会被忽略,这可以用来编写这样的内容: <p data-blogvn-if="gameVars.goodDeedCount >= 3">如果你做了 3 件或以上好事,<a class="blogvn-goto" href="#good-end">前往好结局章节继续</a>。 ,指示用户点击链接的文字不会在视觉小说中显示。

要设定会改变剧情走向的变量,使用 <script type="application/x-blogvn-javascript"> 标签并在其中写 JS ,其中含有的 JS 会在引擎遇到它时被执行。其中的 JS 可访问的变量有 gameVars ,一个用于保存玩家过去行为的 Object 。

不计划做存档功能。考虑到这些视觉小说大概都会是博文的长度,存档似乎没有必要。

不计划做语音功能。考虑到这些视觉小说大概都是随便简单写的博文,大概不会有配音的需求。

BlogVN 应该会能够嵌入在现有的任何能自定义 HTML 的 CMS 中。启动 BlogVN 的方式大概会是这样的:作者首先需要在网页中创建一个 <iframe> 作为引擎渲染视觉小说的目标,将其指定在 BlogVN 的初始化参数中。与此同时指定于初始化参数中的,还有包含有“游戏脚本”的 HTML 元素。举例:

<iframe id="vn-render-target"></iframe>
<div style="height: 40px"></div>

<article class="post">
  <p>这是一个测试。</p>
  <p>你好。</p>
  <script type="application/x-blogvn-javascript">
    gameVars.random = Math.random();
  </script>
  <section data-blogvn-if="gameVars.random < 0.5">
    <p>这句话只有 50% 的几率被显示。</p>
  </section>
  <p>再见。</p>
</article>

<script src="blogvn.min.js"></script>
<script>
  var a = new BlogVN({
    renderTarget: document.getElementById('vn-render-target'),
    scriptElement: document.getElementsByTagName('article')[0],
    defaultBackground: 'black',
  });
</script>

这只是黄鼠日常想开的大坑中的又一个,感觉很大,所以会和 Posea 那样咕咕咕也是十分正常的。

也希望会有人对这个计划有兴趣,能够提出一点想法呢。


查看或添加在 MastodonTwitter 上面的评论

More from FiveYellowMice 的短文章