Pixi’VNナレーションJS/TSによるナレーション
ダイアログ
Pixi’VN でダイアログオブジェクトを使用、カスタマイズ、管理する方法（グルーや UI 統合を含む）。
UI 画面
ナラティブダイアログ UI 画面の例は、インターフェース例のセクションで確認できます。
ダイアログとは？ 2 人以上のキャラクターが会話している様子を表した文章の形式です。
Pixi’VN において、dialogue は現在誰が何を_言っているかに関する情報を含むオブジェクトです。 その機能はより広範で、独白や自問自答、またはプレイヤーへのメッセージ表示など、他の目的にも使用できます。 そのため、キャラクターに関連付けられたテキストとして捉えるのがより適切です。
設定
現在のダイアログを設定するには、narration.dialogue を使用します。
import { narration, newLabel } from "@drincs/pixi-vn";
import { eggHead } from "@/content/characters";
export const startLabel = newLabel("start", [
// A simple dialogue with only text, without a character
() => (narration.dialogue = "Hello, world!"),
// A dialogue with a character
() => {
narration.dialogue = {
character: eggHead,
text: "My name is ${eggHead.name}!",
};
},
// A dialogue with a character, but the character is not defined in the characters list
() => {
narration.dialogue = {
character: "Narrator",
text: "This is a narration without a character.",
};
},
]);取得
現在のダイアログを取得するには、narration.dialogue を使用します。 戻り値は DialogueInterface です。
const currentDialogue: DialogueInterface = narration.dialogue;削除
現在のダイアログをクリアするには、narration.dialogue を undefined に設定します。
narration.dialogue = undefined;カスタムクラス
DialogueInterface にプロパティを追加することで、ダイアログインターフェースをカスタマイズできます。 たとえば、テキストの色を変更するための color プロパティを追加できます。
これを行うには、.d.ts ファイルで DialogueInterface インターフェースを「オーバーライド」します：
declare module "@drincs/pixi-vn" {
interface DialogueInterface {
color?: string;
}
}