Dialogue

The dialogue/narration is the core of the visual novel.

In Pixi’VN, is possible to set/get a current dialogue and get the history of dialogues. A dialogue can link to a character or a string and will be used to indicate who is speaking.

Set the current Dialogue

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

// /labels/startLabel.ts
import { Dialogue, 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!"
            } 
            // or
            narration.dialogue = new Dialogue("Hello, world!", eggHead) 
        },
        // if don't want to set a character, you can set a string
        () => narration.dialogue = "Hello, world!", 
    ],
)

Get the current Dialogue

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

const currentDialogue: Dialogue = narration.dialogue;

Clear the current Dialogue

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

narration.dialogue = undefined;

How to create the narrative dialogue UI screen

For example:

( It's in basic html, you will need to replace the basic html elements with UI components from your favorite library to improve the graphics. )