解决方案
UI、路由、存档、通知、画廊和迁移的完整实现模式
解决方案把故事 API 和 React UI 组合起来。每一页都从可用的实现开始,并说明扩展位置
播放器 UI
自定义对话框
替换 ADV 对话框布局、文字默认值和动效
对话框头像
解析并显示角色对话头像
自定义 NVL 对话框
替换 NVL 容器或只修改单条布局
自定义选项
设置选项样式、禁用状态和键盘快捷键
自定义通知
渲染定时通知和常驻通知
自定义字体
加载字体,并设置对话和选项默认样式
自定义词
用自己的组件渲染行内词,并从它打开浮层
页面与游戏功能
快捷菜单
加入撤销、自动播放、保存、读取和设置操作
页面叠层
使用页面路由构建设置、存档和画廊叠层
localStorage 存档
实现多槽位、快捷保存和快捷读取
持久画廊
使用 Service 和 localStorage 保存永久解锁内容
从 Ren'Py 迁移
对应 label、立绘、选项、变量和 Screen
常见问题
Game 是全局单例吗?
不是。useGame() 返回最近一层 GameProviders 所持有的 Game。传入同一个实例会共享状态;不同 Provider 可以拥有不同游戏
const game = useGame();
const liveGame = game.getLiveGame();NarraLeaf 是否内置存档槽位?
NarraLeaf 通过 liveGame.serialize() 和 liveGame.deserialize() 序列化、恢复运行状态。应用自行选择 localStorage、IndexedDB、文件或服务器,并实现槽位 UI。见 localStorage 存档
自定义 UI 放在哪里?
对话框、选项、NVL 和通知使用 Game 配置替换。设置、历史、画廊和存档页使用 Page、Layout 放在 Player 内