Pixi’VNMenús de elección
Explica cómo implementar y personalizar menús de elección interactivos en Pixi’VN, permitiendo a los jugadores tomar decisiones que afectan la historia.
Pantalla UI
Puedes encontrar un ejemplo de la pantalla UI del menú de elección en la sección ejemplos de interfaz.
ink
Puedes usar este método con la sintaxis ink. Ver más aquí.
En las novelas visuales, los menús de elección permiten al jugador tomar decisiones que afectan la historia.
En Pixi’VN, puedes pedir al jugador que haga una elección. Cada elección puede iniciar un label o cerrar el menú de elección.
Requerir al jugador que haga una elección
Para requerir que el jugador haga una elección, establece narration.choices en un array de StoredChoiceInterface. Para crear un objeto StoredChoiceInterface, usa:
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),
]);Obtener
Para obtener el menú de elección actual, usa narration.choices. Devuelve un array de StoredChoiceInterface.
const menuOptions: StoredChoiceInterface[] = narration.choices;Solicitar
Para seleccionar una elección, usa 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) => {
// ...
});Eliminar
Para limpiar las opciones de elección, establece narration.choices = undefined.
narration.choices = undefined;