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;