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.
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;
}
}