Documentation
Core
Elements
Image

Image

⚠️

This page is under construction.

⚠️

Beta feature, subject to change.

Image is very important for a visual novel. It is used to show the appearance of the character.

In NarraLeaf-React, Image only controls the appearance of the character. It does not control the dialogues of the character. For that, you can use Character.

Public Method

constructor

Overload 1 of 2

  • name: string - The name of the image, it will be used for debugging purpose
  • config?: DeepPartial<ImageConfig> - ImageConfig

Overload 2 of 2

const image = new Image("image-name", {
    src: "your/image/src",
    wearables: [new Image("wearable-image")],
});

copy

Copy the image.

  • Returns Image
const newImage = image.copy();

Chainable Method

dispose

Generally, you do not need to call this method. This method is used to dispose the image.
Disposed image will not be shown in the screen for the rest of the story.

setSrc

  • src: string | StaticImageData - The source of the image
  • transition?: ITransition - For ITransition, see ITransition
image.setSrc("your/image/src", new Fade(1000));

applyTransform

show

Show the image.

Overload 1 of 3

Show image immediately.

image.show();

Overload 2 of 3

Show image with custom transform.

Note: You have to add alpha: 1 in the transform props to show the image.

Overload 3 of 3

Show image with transform config. A transform with alpha:1 will be applied to the image.

  • options: Partial<TransformDefinitions.CommonTransformProps> - See TransformDefinitions.CommonTransformProps
image.show({
    duration: 1000,
    ease: "easeInOut",
});

hide

Hide the image.

Overload 1 of 3

Hide image immediately.

image.hide();

Overload 2 of 3

Hide image with custom transform.

Note: You have to add alpha: 0 in the transform props to hide the image.

Overload 3 of 3

Hide image with transform config. A transform with alpha:0 will be applied to the image.

  • options: Partial<TransformDefinitions.CommonTransformProps> - See TransformDefinitions.CommonTransformProps
image.hide({
    duration: 1000,
    ease: "easeInOut",
});

addWearable

Add a wearable to the image

Wearable is a feature that allows you to add an image that related to the main image. For example, you can add a hat to the character. And that wearable image will move/scale/animate with the main image.

  • children: Image | Image[] - Wearable image or images
  • Returns this
const childImage = new Image(/* ... */);
 
image.addWearable(childImage);

bindWearable

Bind this image to a parent image as a wearable

  • parent: Image - Parent image
  • Returns this
childImage.bindWearable(parentImage);
PauseSound