Pixi’VNナレーションJS/TSによるナレーション
選択肢メニュー
Pixi’VN でインタラクティブな選択メニューを実装・カスタマイズする方法を説明します。プレイヤーがストーリーに影響を与える決定を行えるようにします。
UI 画面
選択メニューの UI 画面の例は、インターフェース例セクションで確認できます。
ink
このメソッドは ink 構文で使用できます。 こちらで詳細を確認してください。
ビジュアルノベルでは、選択メニューによってプレイヤーがストーリーに影響する決定を下すことができます。
Pixi’VN では、プレイヤーに選択を促すことができます。 各選択はナラティブノード（label）を開始するか、選択メニューを閉じることができます。
プレイヤーに選択を要求する
プレイヤーに選択を要求するには、narration.choices を StoredChoiceInterface の配列に設定します。 StoredChoiceInterface オブジェクトを作成するには、以下を使用します：
import {
newChoiceOption,
newCloseChoiceOption,
narration,
newLabel,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
narration.dialogue = "Choose a fruit:";
narration.choices = [
newChoiceOption("Orange", orangeLabel, {}), // by default, the label will be called with "call"
newChoiceOption("Banana", bananaLabel, {}, { type: "jump" }),
newChoiceOption(
"Apple",
appleLabel,
{ quantity: 5 },
{ type: "call" },
),
newCloseChoiceOption("Cancel"),
];
},
() => {
narration.dialogue = "Restart";
},
async (props) => await narration.jump("start", props),
]);取得
現在の選択メニューを取得するには、narration.choices を使用します。 これは StoredChoiceInterface の配列を返します。
const menuOptions: StoredChoiceInterface[] = narration.choices;選択の実行
選択を選ぶには、narration.selectChoice を使用します。
const item = narration.choices![0]; // get the first item
narration
.selectChoice(item, {
// Add StepLabelProps here
navigate: navigate, // example
// And the props to pass to the label
...item.props,
})
.then(() => {
// ...
})
.catch((e) => {
// ...
});削除
選択肢をクリアするには、narration.choices = undefined を設定します。
narration.choices = undefined;