NarraLeaf

NarraLeaf-React 基础

学习 NarraLeaf-React 的核心创作流程:场景、动作、对话、选项、媒体、数据与偏好设置

基础教程适合在你已经拥有一个可运行的 NarraLeaf-React 项目后阅读。它会带你完成故事编写的主要流程:定义场景、添加动作、显示对话和图片、连接故事段落,然后逐步加入交互、音频、数据、语音和玩家偏好设置

本节示例对应 NarraLeaf React 0.39.2 和 React 19。旧项目中可能仍有已经移除的 Sound.sync,或写在 GameConfig 中的对话字体默认值

前置准备

开始本节之前,请先创建或准备一个 NarraLeaf-React 项目:

核心流程

创建场景

从定义 Scene 开始。场景会为视觉小说中的一段内容提供名称、背景和叙事上下文

添加动作

使用动作描述场景中会发生什么。动作是 NarraLeaf-React 在故事播放时按顺序执行的指令

呈现故事内容

显示对话、展示图片,并通过播放故事把场景交给播放器运行

加入交互和状态

使用选项条件存储数据,让故事能够响应玩家选择和之前发生过的事件

打磨体验

加入音效语音偏好设置,让视觉小说体验更完整,并让玩家能够控制播放表现

教程列表

下一步

完成基础教程后,可以阅读解决方案学习完整模式,阅读核心了解底层故事 API,或阅读播放器了解负责渲染体验的 React 组件与 Hook

0.13 项目可以重点查看显示图片中的层叠立绘,以及声音中使用 Control.doAsync() 实现非阻塞音效的写法

本页目录