BlogVN 构思
July 19, 2020•216 words
想开坑,写一个能够把 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
属性可以是 cover
或 contain
,对应 CSS 中 background-size
这两个值的含义。
人物立绘可以在引擎初始化选项中定义,然后每当人物出现于对话中时,立绘也会被显示。此行为默认启用,默认值可以被引擎初始化选项更改。此行为也可以被单个 <p>
中的 blogvn-character-image-enable
和 blogvn-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 那样咕咕咕也是十分正常的。
也希望会有人对这个计划有兴趣,能够提出一点想法呢。