Layer

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

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

This is how depth between layers is controlled, and the comparison is applied before the order of elements inside any one layer. To reorder elements that share a layer, use Displayable.bringToFront.

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

bringToFront

Not available on a layer. Layer inherits this method from Displayable, but calling it throws a RuntimeGameError while the story is being built.

A layer is not an entry in another layer's list of elements, so it has no front to be moved to. Use setZIndex to raise a layer instead.

layer.setZIndex(10);   // this is how a layer moves forward
layer.bringToFront();  // RuntimeGameError

Displayable Service