NarraLeaf

Layer

The `Layer` class for grouping displayables and controlling their stacking order and shared transforms.

This class extends Displayble

You can manage the layers of the displayables by using the Layer class.

Usage

import {Layer} from "narraleaf-react";
const layer = new Layer("layer name", {
    zIndex: 1
});

const scene = new Scene("scene with layers", {
    layers: [layer] // register the layer to the scene
});

const image = new Image({ /* ... */}).useLayer(layer); // link the image to the layer
layer.opacity(0.5, 1000, "linear"); // change the opacity of the layer, all elements linked to the layer will be affected

Since 0.26.0, a layer does not carry its pose out of the scene that declared it. Leaving a scene now returns the layers that scene put on stage to their configured z-index and pose, not only the displayables standing on them, and newGame() does the same. Before that, a layer slid aside or faded out stayed that way for every scene that followed. The story Camera is deliberately exempt: a story owns exactly one and it frames the stage across scene changes.

Chainable Methods

setZIndex

Set the z-index of the layer. Higher z-index means the layer will be on top of the other layers.

  • zIndex: number - The z-index of the layer

Public Methods

constructor

  • name?: string - The name of the layer
  • config?: Partial<ILayerUserConfig> - The configuration of the layer, see ILayerUserConfig

include

Include the displayable to the layer.

  • elements: (Image | Text)[] | Image | Text - The displayable to include, ex. Image, Text
  • Returns this

On this page