Open on CodeSandbox

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 the current dialogue

To set the current dialogue, you can use the narration.dialogue.

labels/startLabel.ts

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!", 
    ],
)

Open Sandbox

Get the current dialogue

To get the current dialogue, you can use narration.dialogue. The return is a DialogueInterface.

const currentDialogue: DialogueInterface = narration.dialogue;

Clear the current dialogue

To clear the current dialogue, you can use narration.dialogue = undefined.

narration.dialogue = undefined;

Custom the dialogue

You can customize the dialog interface by adding additional properties to the DialogueInterface interface. For example, you can add a color property to change the color of the text.

To do this, you need "override" the DialogueInterface interface in the .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 added after the current dialogue.

labels/startLabel.ts

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.`
    },
])

Open Sandbox

How to create the narrative dialogue UI screen

This documentation has been moved here.