LogoPixi’VN
NarrazioneNarrazione con JS/TS

Dialogo

Come usare, personalizzare e gestire gli oggetti dialogo in Pixi’VN, incluso il glue e l'integrazione con l'UI.

Schermata UI

Puoi trovare l'esempio della schermata UI del dialogo narrativo nella sezione esempi di interfaccia.

Cos'è un dialogo? Una composizione scritta in cui due o più personaggi sono rappresentati mentre conversano.

In Pixi’VN, dialogue è un oggetto che contiene informazioni su chi e cosa viene detto in un determinato momento. La sua funzionalità può essere più ampia, poiché può essere usato anche per altri scopi, come monologhi, soliloqui o per visualizzare un messaggio al giocatore. Per questo motivo, è più appropriato considerarlo come un testo che può essere associato a un personaggio.

Impostare

Per impostare il dialogo corrente, puoi usare 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.", 
        }; 
    },
]);

Ottenere

Per ottenere il dialogo corrente, usa narration.dialogue. Il valore restituito è un DialogueInterface.

const currentDialogue: DialogueInterface = narration.dialogue;

Eliminare

Per cancellare il dialogo corrente, imposta narration.dialogue su undefined.

narration.dialogue = undefined;

Classe personalizzata

Puoi personalizzare l'interfaccia del dialogo aggiungendo proprietà aggiuntive a DialogueInterface. Ad esempio, puoi aggiungere una proprietà color per cambiare il colore del testo.

Per farlo, "sovrascrivi" l'interfaccia DialogueInterface nel tuo file .d.ts:

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

Altre funzionalità

On this page