Choice menus

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.choiceMenuOptions 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_label",
    [
        async () => {
            narration.dialogue = "Choose a fruit:"
            narration.choiceMenuOptions = [ 
                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.jumpLabel("start_label", props)
    ],
)

Get

To get the current choice menu, use narration.choiceMenuOptions. This returns an array of StoredChoiceInterface.

const menuOptions: StoredChoiceInterface[] = narration.choiceMenuOptions;

Request

To select a choice, use narration.selectChoice.

const item = narration.choiceMenuOptions![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) => {
        // ...
    })

Remove

To clear the choice options, set narration.choiceMenuOptions = undefined.

narration.choiceMenuOptions = undefined;

Custom class

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
    }
}