Pixi’VN选择菜单
Explains how to implement and customize interactive choice menus in Pixi’VN, allowing players to make decisions that affect the story.
UI 界面
You can find an example of the choice menu UI screen in the interface examples section.
ink
您可以使用 ink 语法使用此方法。 See more here.
In visual novels, choice menus allow the player to make decisions that affect the story.
In Pixi’VN, you can prompt the player to make a choice. Each choice can either start a label or close the choice menu.
Require the player to make a choice
To require the player to make a choice, set narration.choices to an array of StoredChoiceInterface. To create a StoredChoiceInterface object, use:
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),
]);获取
To get the current choice menu, use narration.choices. This returns an array of StoredChoiceInterface.
const menuOptions: StoredChoiceInterface[] = narration.choices;Request
To select a choice, use 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) => {
// ...
});移除
To clear the choice options, set narration.choices = undefined.
narration.choices = undefined;自定义类
You can customize a choice menu option by adding properties to the ChoiceInterface interface. For example, add an icon property to display an icon.
Override the ChoiceInterface interface in your .d.ts file:
declare module "@drincs/pixi-vn" {
interface ChoiceInterface {
icon?: string;
}
}