LogoPixi’VN
NarraciónNarration with JS/TS

Diálogo

Cómo usar, personalizar y gestionar los objetos de diálogo en Pixi’VN, incluida la función glue e integración con la UI.

Pantalla UI

Puedes encontrar el ejemplo de la pantalla UI de diálogo narrativo en la sección ejemplos de interfaz.

¿Qué es un diálogo? Una composición escrita en la que dos o más personajes están representados conversando.

En Pixi’VN, dialogue es un objeto que contiene información sobre quién y qué se está diciendo en ese momento. Su funcionalidad puede ser más amplia, ya que también puede usarse para otros fines, como monólogos, soliloquios o para mostrar un mensaje al jugador. Por esta razón, es más apropiado considerarlo como un texto que puede estar vinculado a un personaje.

Establecer

Para establecer el diálogo actual, puedes usar narration.dialogue.

content/labels/start.label.ts
import { narration, newLabel } from "@drincs/pixi-vn";
import { eggHead } from "@/content/characters";

export const startLabel = newLabel("start", [
    // A simple dialogue with only text, without a character
    () => (narration.dialogue = "Hello, world!"), 
    // A dialogue with a character
    () => {
        narration.dialogue = { 
            character: eggHead, 
            text: "My name is ${eggHead.name}!", 
        }; 
    },
    // A dialogue with a character, but the character is not defined in the characters list
    () => {
        narration.dialogue = { 
            character: "Narrator", 
            text: "This is a narration without a character.", 
        }; 
    },
]);

Obtener

Para obtener el diálogo actual, usa narration.dialogue. El valor devuelto es un DialogueInterface.

const currentDialogue: DialogueInterface = narration.dialogue;

Eliminar

Para limpiar el diálogo actual, establece narration.dialogue en undefined.

narration.dialogue = undefined;

Clase personalizada

Puedes personalizar la interfaz de diálogo añadiendo propiedades adicionales a DialogueInterface. Por ejemplo, puedes añadir una propiedad color para cambiar el color del texto.

Para ello, "sobrescribe" la interfaz DialogueInterface en tu archivo .d.ts:

declare module "@drincs/pixi-vn" {
    interface DialogueInterface {
        color?: string;
    }
}

Otras funcionalidades

On this page