NarraLeaf Desktop
快速开始
使用 NarraLeaf 创建你的第一个桌面视觉小说
NarraLeaf 将主进程应用宿主、生成的渲染入口和 NarraLeaf-React 故事组合在一起。本指南会创建 CLI 所需的最小项目结构
创建项目
初始化项目
运行 CLI init 命令：
narraleaf init my-visual-novel
cd my-visual-novelinit 会调用最新的 NarraLeaf skeleton 包，并为你创建项目文件
最小项目文件
如果你手动搭建项目，NarraLeaf 期望如下结构：
package.json
narraleaf.config.js
App.tsx
主进程
通过 AppConfig 创建 Electron 应用宿主，并在 NarraLeaf ready 后启动主窗口
import { AppConfig } from "narraleaf";
const app = new AppConfig({
appErrorHandling: "restart",
}).create();
app.onReady(() => {
void app.launchApp();
});渲染应用
渲染应用需要导出 metadata.story 和一个壳组件。壳组件通过 children 接收生成的页面
import type { ReactNode } from "react";
import { Character, Scene, Story } from "narraleaf-react";
const story = new Story("第一个 NarraLeaf 故事");
const opening = new Scene("opening", {
background: "#20232a",
});
const narrator = new Character("旁白");
opening.action([
narrator.say("欢迎来到 NarraLeaf。"),
]);
story.entry(opening);
export const metadata = {
story,
};
export default function App({ children }: { children: ReactNode }) {
return <main>{children}</main>;
}首页
使用 narraleaf/renderer 中的 hooks 访问应用壳
import { useApp, useGamePlayback } from "narraleaf/renderer";
export default function HomePage() {
const app = useApp();
const { isPlaying } = useGamePlayback();
return (
<button onClick={() => void app.newGame()}>
{isPlaying ? "Restart" : "Start"}
</button>
);
}