# Dialogue (/start/dialogue)





<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find the example of the narrative dialogue UI screen in the <DynamicLink href="/start/interface-examples#narrative-dialogue">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

**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 <DynamicLink href="/start/character#use-characters-in-the-game">character</DynamicLink>.

Set [#set]

To set the current dialogue, you can use [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue).

```ts title="content/labels/start.label.ts"
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 // [!code focus]
    () => (narration.dialogue = "Hello, world!"), // [!code focus]
    // A dialogue with a character // [!code focus]
    () => {
        narration.dialogue = { // [!code focus]
            character: eggHead, // [!code focus]
            text: "My name is ${eggHead.name}!", // [!code focus]
        }; // [!code focus]
    },
    // A dialogue with a character, but the character is not defined in the characters list // [!code focus]
    () => {
        narration.dialogue = { // [!code focus]
            character: "Narrator", // [!code focus]
            text: "This is a narration without a character.", // [!code focus]
        }; // [!code focus]
    },
]);
```

<CurrentDialogueExample />

Get [#get]

To get the current dialogue, use [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue). The return value is a [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface).

```ts
const currentDialogue: DialogueInterface = narration.dialogue;
```

Delete [#delete]

To clear the current dialogue, set [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue) to `undefined`.

```ts
narration.dialogue = undefined;
```

Custom class [#custom-class]

You can customize the dialogue interface by adding additional properties to the [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface). For example, you can add a `color` property to change the color of the text.

To do this, "override" the [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface) interface in your `.d.ts` file:

<CodeBlockTabs defaultValue="pixi-vn.d.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="pixi-vn.d.ts">
      pixi-vn.d.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="content/labels/startLabel.ts">
      content/labels/startLabel.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="pixi-vn.d.ts">
    ```ts
    declare module "@drincs/pixi-vn" {
        interface DialogueInterface {
            color?: string;
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="content/labels/startLabel.ts">
    ```ts
    narration.dialogue = {
        character: "Alice",
        text: "Hello, world!",
        color: "#ff0000",
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Other features [#other-features]

<Accordions>
  <Accordion title="Glue" id="dialogue-glue">
    <CalloutContainer type="info">
      <CalloutDescription>
        "Glue" is a feature originally created for &#x2A;**ink***, which was also introduced in Pixi’VN.
      </CalloutDescription>
    </CalloutContainer>

    When "glue" is enabled, the next dialogue will be appended after the current dialogue. You can enable "glue" by setting [`narration.dialogGlue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogglue) to `true`.

    ```ts title="content/labels/start.label.ts"
    import { narration, newLabel } from "@drincs/pixi-vn";

    const startLabel = newLabel("start", [
        () => {
            narration.dialogue = `Hello, my name is Alice and ...`; // [!code focus]
        },
        () => {
            narration.dialogGlue = true; // [!code focus]
            narration.dialogue = `I am a character in this game.`; // [!code focus]
        },
    ]);
    ```

    <DialogueGlueExample />
  </Accordion>
</Accordions>