NarraLeaf DesktopRenderer
App State
从 React 中访问 RendererApp、播放状态和应用级 actions
在 NarraLeaf 渲染树内使用 useApp() 访问稳定的 RendererApp 接口
import { useApp } from "narraleaf/renderer";
export function MainMenu() {
const app = useApp();
return <button onClick={() => void app.newGame()}>New Game</button>;
}RendererApp
useApp() 返回渲染器 App 类的受控子集：
newGame()loadGame(id)exitGame()continueGame()listSaves()createRecovery(savedGame)getCrashReport()crash(error)quit()stateconfig
播放状态
useGamePlayback() 返回只读的高层播放状态
import { useGamePlayback } from "narraleaf/renderer";
export function Overlay() {
const { isPlaying } = useGamePlayback();
return isPlaying ? <GameHUD /> : <MainMenu />;
}useAppState
useAppState(key) 会订阅一个渲染器 app state key，并返回 [value, setValue]
import { useAppState } from "narraleaf/renderer";
export function PauseButton() {
const [isPlaying, setIsPlaying] = useAppState("isPlaying");
return (
<button onClick={() => setIsPlaying((value) => !value)}>
{isPlaying ? "Pause" : "Resume"}
</button>
);
}当前公共 state keys：
isPlaying：NarraLeaf-React live game 是否处于活动状态
继续游戏
continueGame() 会在存在普通存档时加载最近的一个
const continued = await app.continueGame();
if (continued === null) {
// 没有找到普通存档。
}