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.choices 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.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_label", props)
],
)Ottieni
Per ottenere il menu di scelta corrente, usa narration.choices. Restituisce un array di StoredChoiceInterface.
const menuOptions: StoredChoiceInterface[] = narration.choices;Richiesta
Per selezionare un'opzione, utilizzare 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) => {
// ...
})Rimuovi
Per cancellare le opzioni di scelta, imposta narration.choices = undefined.
narration.choices = 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
}
}