ADVMaker docs

Appearance

选项系统：AOptions 与 AOption ​

没有选项的文字冒险是不完整的。AOptions 和 AOption 为你提供了声明式创建选择分支的能力，完全摆脱了手动构造 ADVChoice 对象的繁琐。

基本用法 ​

html
<ADialog id="choice1">
  <ALine>前方有两条路，你要走哪一条？</ALine>
  <AOptions>
    <AOption>
      <template #content>走进森林</template>
      <ALine>你踏入了幽暗的森林深处。</ALine>
      <ALine>树影摇晃，似乎有什么东西在窥视着你。</ALine>
    </AOption>
    <AOption>
      <template #content>沿着河流行走</template>
      <ALine>河水清澈见底，你沿着岸边前行。</ALine>
    </AOption>
  </AOptions>
</ADialog>

这段模板会生成一个包含两个选项的对话。运行时，玩家会先看到“前方有两条路...”的文字，随后出现两个可点击的按钮：“走进森林”和“沿着河流行走”。每个 AOption 的结构如下：

  • #content 插槽：选项显示的文字，可以是任意 HTML 或组件。
  • 默认插槽：选择此选项后，将会播放的一系列内容（可以是多个 ALine，甚至可以包含 AEnding）。

选项的 next 与 onChoose ​

AOption 支持直接设置 next 属性，指定选择后跳转到哪个对话或场景：

html
<AOption :next="'forest_d1'">
  <template #content>进入森林</template>
  ...
</AOption>

你还可以用 onChoose 属性附加自定义回调，该回调会在选项内容播放之前执行：

html
<AOption :on-choose="() => player.hp -= 10">
  <template #content>冒死穿越荆棘丛</template>
  <ALine>你被荆棘划伤，损失了 10 点生命值。</ALine>
</AOption>

选项内的执行顺序 ​

当玩家选择一个选项后，引擎会依次执行：

  1. 用户定义的 onChoose 回调（如果有）。
  2. 按顺序播放默认插槽中的每一行对话（ALine）。
  3. 如果插槽中包含 AEnding，则最终会调用 Adv.end() 结束游戏。

这种顺序保证了你可以在播放反馈台词之前进行状态变更，之后自然地推进故事。

设计细节：AOptions 和 AOption 同样是 renderless 组件，它们不产生任何 DOM 节点。所有选项数据最终会被打包成一个 ADVChoice[]，作为对话脚本的一部分送入引擎。