NarraLeaf-React 基礎
シーン、アクション、対話、選択肢、メディア、データ、環境設定を扱う NarraLeaf-React の基本的な制作フローを学びます
基礎ガイドは、NarraLeaf-React プロジェクトが動く状態になった後に最初に読むページです。シーンの定義、アクションの追加、対話や画像の表示、シーン同士の接続という物語制作の流れを一通り解説したうえで、インタラクション、音声、データ、ボイス、プレイヤー設定を順に重ねていきます。
これらのサンプルは NarraLeaf React 0.39.2 および React 19 を対象としています。古いプロジェクトには、Sound.sync や GameConfig の対話フォントのデフォルト値など、すでに削除されたオプションが残っている場合があります。
前提条件
このセクションを始める前に、NarraLeaf-React プロジェクトを作成または用意してください。
クイックスタート
スターターテンプレートから新しい NarraLeaf-React プロジェクトを作成します。
インストール
既存の React アプリケーションに NarraLeaf-React をインストールします。
基本の流れ
アクションを追加する
アクションを使って、シーンの中で何が起こるかを記述します。アクションは、ストーリー再生中に NarraLeaf-React が順番に実行する命令です。
ストーリーの内容を表示する
対話を表示し、画像を表示したうえで、ストーリーを再生してプレイヤーに渡すことで、シーンをインタラクティブに体験できるようにします。
チュートリアル
シーンを作成する
物語の構造と視覚的な文脈をなす基本単位を定義します。
アクションを追加する
シーンを駆動する、順序付けられたアクションのリストを組み立てます。
対話を表示する
キャラクターのセリフとナレーションを表示します。
画像を表示する
シーンに視覚素材を配置します。
ストーリーを再生する
シーンをプレイヤーに接続し、ストーリーを実行します。
選択肢を作る
プレイヤーに分岐を選ばせます。
サウンド
オーディオキューと再生の挙動を追加します。
データを保存する
後のストーリーの出来事に影響する値を保存します。
条件分岐
現在のゲーム状態が一致するときだけアクションを実行します。
ボイス
ストーリーの表現にボイス再生を組み合わせます。
環境設定を管理する
プレイヤー向けの設定を公開し、更新します。
次のステップ
基礎ガイドを終えたら、完成されたパターンについてはソリューションを、基盤となるストーリー API についてはコアを、体験を描画する React コンポーネントとフックについてはプレイヤーを参照してください。
0.13 系のプロジェクトについては、画像を表示するのページでレイヤー化されたスプライトを、サウンドのページで Control.doAsync() を使った現在の非ブロッキングな音声パターンを扱っています。