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