LogoPixi’VN
NarrationNarration avec JS/TS

Dialogue

Comment utiliser, personnaliser et gérer les objets dialogue dans Pixi’VN, y compris le glue et l'intégration UI.

Écran UI

Vous pouvez trouver l'exemple de l'écran UI de dialogue narratif dans la section exemples d'interface.

Qu'est-ce qu'un dialogue ? Une composition écrite dans laquelle deux personnages ou plus sont représentés en train de converser.

Dans Pixi’VN, dialogue est un objet qui contient des informations sur qui parle et ce qui est dit actuellement. Sa fonctionnalité peut être plus large, car il peut également être utilisé à d'autres fins, comme les monologues, les soliloques, ou pour afficher un message au joueur. Pour cette raison, il est plus approprié de le considérer comme un texte pouvant être lié à un personnage.

Définir

Pour définir le dialogue actuel, vous pouvez utiliser 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.", 
        }; 
    },
]);

Obtenir

Pour obtenir le dialogue actuel, utilisez narration.dialogue. La valeur retournée est un DialogueInterface.

const currentDialogue: DialogueInterface = narration.dialogue;

Supprimer

Pour effacer le dialogue actuel, définissez narration.dialogue sur undefined.

narration.dialogue = undefined;

Classe personnalisée

Vous pouvez personnaliser l'interface dialogue en ajoutant des propriétés supplémentaires à DialogueInterface. Par exemple, vous pouvez ajouter une propriété color pour changer la couleur du texte.

Pour ce faire, « surchargez » l'interface DialogueInterface dans votre fichier .d.ts :

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

Autres fonctionnalités

On this page