Pixi’VNDialogue
How to use, customize, and manage dialogue objects in Pixi’VN, including glue and UI integration.
What is dialogue? A written composition in which two or more characters are represented as conversing.
In Pixi’VN, dialogue is an object that contains information about who and what is currently being said. Its functionality can be broader, as it can also be used for other purposes, such as monologues, soliloquies, or to display a message to the player. For this reason, it is more appropriate to consider it as a text that can be linked to a character.
Set
To set the current dialogue, you can use narration.dialogue.
import { narration, newLabel } from "@drincs/pixi-vn"
import { eggHead } from "../values/characters"
// What is a Label? https://pixi-vn.web.app/start/labels.html
export const startLabel = newLabel("start_label",
[
() => {
// in this example, not exists a character with id 'Alice'
// so when you get the current dialogue, the character is a fake character with the name 'Alice'
narration.dialogue = {
character: "Alice",
text: "Hello, world!"
}
},
() => {
// in this example, exists a character with id 'egg-head'
// so when you get the current dialogue, the character is the character with id 'egg-head'
narration.dialogue = {
character: 'egg-head',
text: "Hello, world!"
}
// or better
narration.dialogue = {
character: eggHead,
text: "Hello, world!"
}
},
// if don't want to set a character, you can set a string
() => narration.dialogue = "Hello, world!",
],
)Get
To get the current dialogue, use narration.dialogue. The return value is a DialogueInterface.
const currentDialogue: DialogueInterface = narration.dialogue;Delete
To clear the current dialogue, set narration.dialogue = undefined.
narration.dialogue = undefined;Custom class
You can customize the dialogue interface by adding additional properties to the DialogueInterface. For example, you can add a color property to change the color of the text.
To do this, "override" the DialogueInterface interface in your .d.ts file:
declare module '@drincs/pixi-vn' {
interface DialogueInterface {
color?: string
}
}Dialogue glue
Dialogue glue is a feature originally created for ink, which was also introduced in Pixi’VN.
When "glue" is enabled, the next dialogue will be appended after the current dialogue.
import { narration, newLabel } from "@drincs/pixi-vn";
const startLabel = newLabel("start", [
() => {
narration.dialogue = `Hello, my name is Alice and ...`
},
() => {
narration.dialogGlue = true
narration.dialogue = `I am a character in this game.`
},
])How to create the narrative dialogue UI screen
This documentation has been moved here.