Pixi’VN 2D game engine

Appearance

Dialogue ​

What is dialogue and example? 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.

ts
// /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.

typescript
const currentDialogue: Dialogue = narration.dialogue;

Clear the current Dialogue ​

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

typescript
narration.dialogue = undefined;

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.

typescript
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 ​

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. )