LogoPixi’VN
Narration/Narration with JS/TS

Menù a scelta

Spiega come implementare e personalizzare i menu di scelta interattivi in Pixi'VN, consentendo ai giocatori di prendere decisioni che influenzano la storia.

UI screen

Un esempio della schermata dell'interfaccia utente del menu di scelta è disponibile nella sezione esempi di interfaccia.

Nelle visual novel, i menu di scelta consentono al giocatore di prendere decisioni che influenzano la storia.

In Pixi'VN puoi chiedere al giocatore di fare una scelta. Ogni scelta può avviare una label o chiudere il menu delle scelte.

Richiedi al giocatore di fare una scelta

Per richiedere al giocatore di effettuare una scelta, impostare narration.choiceMenuOptions con un array di StoredChoiceInterface. Per creare un oggetto StoredChoiceInterface, usa:

labels/startLabel.ts
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)
    ],
)

Ottieni

Per ottenere il menu di scelta corrente, usa narration.choiceMenuOptions. This returns an array of StoredChoiceInterface.

const menuOptions: StoredChoiceInterface[] = narration.choiceMenuOptions;

Richiesta

Per selezionare un'opzione, utilizzare 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) => {
        // ...
    })

Rimuovi

Per cancellare le opzioni di scelta, imposta narration.choiceMenuOptions = undefined.

narration.choiceMenuOptions = undefined;

Classe personalizzata

È possibile personalizzare un'opzione del menu di scelta aggiungendo proprietà all'interfaccia ChoiceInterface. Ad esempio, aggiungi una proprietà icon per visualizzare un'icona.

Sostituisci l'interfaccia ChoiceInterface nel tuo file .d.ts:

declare module '@drincs/pixi-vn' {
    interface ChoiceInterface {
        icon?: string
    }
}