Documentation
Core
Elements
Scene

Scene

⚠️

This page is under construction.

⚠️

Beta feature, subject to change.

This class extends Displayble

Scene contains multiple actions that can be performed on the scene.

For example, you can add a Character Action to the scene

import { Scene } from 'narraleaf-react';
 
const scene = new Scene("scene 1");
const character1 = new Character("character 1");
 
scene.action([
    character1
        .say("Hello World")
        .say("How are you?"),
]);

Public Properties

local

scene.local is a Persistent instance that is local to the scene. It is used to store the temporary data that is only available in the scene.

Local data doesn't need to be registered or initialised, but it is 'undefined' before it is used.

Data in local will be discarded when the scene is exited.

scene.action([
    new Menu("Which coffee do you want?")
        .choose("Latte", [
            scene.local.set("coffee", "latte"),
        ])
        .choose("Cappuccino", [
            scene.local.set("coffee", "cappuccino"),
        ]),
    character1.say`You chose ${scene.local.get("coffee")} coffee`,
]);

background

This property is used to access the background Image instance of the scene.

scene.background
    .char("background.png", new Dissolve(1000, "linear"))

backgroundLayer

This property is used to access the background layer of the scene.
This layer contains the background image of the scene.

scene.backgroundLayer.opacity(0.5, 1000, "linear")

displayableLayer

This property is used to access the displayable layer of the scene.
This layer contains all the displayables that don't belong to any specific layer.

scene.displayableLayer.opacity(0.5, 1000, "linear")

Public Method

constructor

  • name: string - Name of the scene
  • config?: Partial<ISceneUserConfig> - ISceneUserConfig

action

Add actions to the scene. Do not call this method more than once.

Overload 1 of 2

  • actions: (ChainableAction | ChainableAction[])[] - Actions to be executed, see ChainedActions

Overload 2 of 2

This overload let you pass a function that receives the scene instance and returns the actions to be executed.

In some cases, you may want to make a shortcut to the scene instance

story.entry(
    new Scene("scene 1").action(scene => [
        scene
            .setBackground(background)
            .sleep(1000),
    ])
);
  • actions: ((scene: Scene) => ChainedAction[]) - Actions to be executed, see ChainedActions
  • Returns this

preloadImage

Manually register image sources

  • src: string | string[] - The URL of the image or an array of URLs
  • Returns this

Chainable Method

setBackground

Alias of scene.background.char.

Set background of the scene. If the transition is provided, the background will be changed with the transition effect.

scene.action([
    scene.setBackground("background.png")
 
    // is equivalent to
    scene.background.char("background.png")
]);
  • background: Color | ImageSrc - See Color or ImageSrc
  • transition?: ImageTransition - For ImageTransition, see Transition

jumpTo

Jump to another scene. If the transition is provided, the scene will be changed with the transition effect.

Note: The current scene will be disposed after jumping to another scene. The rest of the actions will not be executed.

  • scene: Scene | string - The Scene instance or the name of the scene to jump to
  • config: Partial<JumpConfig> - Jump Config

sleep

Sleep for a duration before executing the next action.

scene.action([
    scene.sleep(1000)
]);

Overload 1 of 2

  • ms: number - Duration in milliseconds

Overload 2 of 2

  • promise: Promise<any> - Promise to wait for

setBackgroundMusic

Set background music of the scene.

  • sound: Sound - Sound instance
  • fade?: number - If set, the fade-out effect will be applied to the previous music, and the fade-in effect will be applied to the current music, with a duration in milliseconds
ElementsCharacter