播放故事

设置 Story 的入口场景，在 GameProviders 中渲染，并在 Player 的 onReady 回调里开始播放

创建 Story，并设置入口场景

story.ts

import { Character, Scene, Story } from "narraleaf-react";

const alice = new Character("爱丽丝");
const opening = new Scene("开场", {
    background: "/backgrounds/room.webp",
}).action([
    alice.say("早上好。"),
]);

export const story = new Story("我的故事").entry(opening);

在 GameProviders 中渲染 Player，并在 Player.onReady 中开始新游戏

Game.tsx

"use client";

import { GameProviders, Player } from "narraleaf-react";
import { story } from "./story";

export default function Game() {
    return (
        <GameProviders>
            <Player
                story={story}
                width="100%"
                height="100%"
                onReady={({ liveGame }) => liveGame.newGame()}
            />
        </GameProviders>
    );
}

GameProviders 提供游戏、路由、缩放和预加载上下文。useGame、useLiveGame、useRouter 等 Hook 必须在 Provider 内使用

等到首帧显示

onReady 只表示 Player 已初始化。如果外层加载界面需要等到第一个场景真正渲染后再关闭，可用 onFirstSceneReady 更新界面状态。开始剧情仍放在 onReady

<Player
    story={story}
    onReady={({ liveGame }) => liveGame.newGame()}
    onFirstSceneReady={() => setLoading(false)}
/>

注意 onPreloadComplete 是另一个时点：自 0.17.0 起，入口场景在故事被加载时就已开始预热，因此该回调在进入游戏之前就会触发，此时菜单可能还在屏幕上。详见预加载

需要指定 Game 配置时，创建一次 Game 实例，再传给 Provider：

import { Game, GameProviders, Player } from "narraleaf-react";

const game = new Game({ waitForPreload: true });

<GameProviders game={game}>
    <Player story={story} onReady={({ liveGame }) => liveGame.newGame()} />
</GameProviders>

等到首帧显示

本页目录