Create a Scene

A Scene is one section of the story. It owns a background, an action list, and scene-local data.

import { Scene } from "narraleaf-react";

const room = new Scene("room-morning", {
    background: "/backgrounds/room-morning.webp",
});

The first argument is the scene name. Keep it unique: NarraLeaf uses it when building the story and restoring saves. The second argument is an optional ISceneUserConfig.

Backgrounds

Use a URL, an imported image, or a CSS color.

const blackScreen = new Scene("black-screen", {
    background: "#000",
});

// Next.js, Vite, and similar bundlers can resolve imported image data.
import roomBackground from "./room.webp";

const importedRoom = new Scene("imported-room", {
    background: roomBackground,
});

Change the background later with setBackground(). Add a transition when the change should animate.

import { Dissolve } from "narraleaf-react";

room.action([
    room.setBackground("/backgrounds/room-night.webp", new Dissolve({ duration: 600 })),
]);

Scene-local data

scene.local stores temporary values. It is cleared when the scene exits and does not need to be registered with the story.

room.action([
    room.local.set("visitedWindow", true),
    "You open the curtains.",
]);

Use Persistent for values that must survive between scenes.

Backgrounds

Scene-local data

On this page