Show Dialog

To show a dialog, you can use a Character element.

import { Scene, Character } from "narraleaf-react";

// Create a scene
const scene1 = new Scene("scene 1 - wake up", {
    // ...
});
 
// Create a character
const character1 = new Character("John Smith");
 
// Add actions to the scene
scene1.action([
    character1
        .say`Hello, World!`
        .say`Good morning!`,
]);

The character with the name "John Smith" will say "Hello, World!" and "Good morning!".

You can add some customization to the dialog by using the Word and the Sentence element.

character1.say`Hello, my name is ${Word.bold("John")}!`; // will output "Hello, my name is John!" with "John" in bold

You can also construct a complex dialog using these elements.

character1.say(new Sentence([
    `Now it is `,
    new Word(
        (ctx) => new Date().toLocaleTimeString(),
        { color: "red" }
    ),
])); // will output "Now it is 12:00:00 PM" with "12:00:00 PM" in red

For more information about constructing a sentence, you can read the Sentence documentation.

In this example, the character will say "Now it is " and the current time in red.

You can read more about the Character element in the documentation.

Add Actions Show Images