ストーリーを再生する

Story のエントリーシーンを設定し、GameProviders の中でレンダリングし、Player の onReady コールバックから再生を開始する方法

Story を作成し、そのエントリーシーンを設定します。

story.ts

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

const alice = new Character("アリス");
const opening = new Scene("opening", {
    background: "/backgrounds/room.webp",
}).action([
    alice.say("おはよう。"),
]);

export const story = new Story("マイストーリー").entry(opening);

GameProviders の中でストーリーをレンダリングし、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 などのフックは、この Provider の内側で実行する必要があります。

最初のフレームが準備できてから開始する

onReady は Player インスタンスが初期化されたことを意味します。外側のローディング画面を、最初のシーンが描画されるまで表示し続けたい場合は、その UI の状態には onFirstSceneReady を使ってください。ストーリーの開始自体は、引き続き onReady で行います。

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

onPreloadComplete は別のタイミングであることに注意してください。0.17.0 以降、エントリーシーンはストーリーが読み込まれた時点でウォームアップが始まるため、このコールバックはゲームに入る前、まだメニューが画面に表示されている段階で発火することがあります。詳しくはプリロードを参照してください。

設定済みの Game インスタンスを Provider と共有するには、一度だけ作成し、game 経由で渡します。

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

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

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

ストーリーを再生する

最初のフレームが準備できてから開始する

このページの目次