Pixi’VNMenus de choix
Explique comment implémenter et personnaliser des menus de choix interactifs dans Pixi’VN, permettant aux joueurs de prendre des décisions qui affectent l'histoire.
Interface UI
Vous pouvez trouver un exemple de l'écran UI du menu de choix dans la section exemples d'interface.
ink
Vous pouvez utiliser cette méthode avec la syntaxe ink. En savoir plus ici.
Dans les romans visuels, les menus de choix permettent au joueur de prendre des décisions qui affectent l'histoire.
Dans Pixi’VN, vous pouvez inviter le joueur à faire un choix. Chaque choix peut soit démarrer un label, soit fermer le menu de choix.
Obliger le joueur à faire un choix
Pour obliger le joueur à faire un choix, définissez narration.choices sur un tableau de StoredChoiceInterface. Pour créer un objet StoredChoiceInterface, utilisez :
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),
]);Obtenir
Pour obtenir le menu de choix actuel, utilisez narration.choices. Cela retourne un tableau de StoredChoiceInterface.
const menuOptions: StoredChoiceInterface[] = narration.choices;Requête
Pour sélectionner un choix, utilisez 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) => {
// ...
});Supprimer
Pour effacer les options de choix, définissez narration.choices = undefined.
narration.choices = undefined;