Show Image

To show an image, you need to use the Image element.

Define an Image

You can construct an image by providing the ImageConfig object.

import {Image} from "narraleaf-react";

const character1Happy = new Image("character1_happy", {
    src: "https://YOUR_IMAGE_URL",
    scale: 0.5,
    position: {
        yalign: 0.3,
        xalign: 0.5,
    },
});

This image will be displayed at the left side of the screen with a scale of 0.5.

Show the Image

You can show the image by adding actions to the scene.

scene1.action([
    character1Happy.show(),
]);

The image will be displayed on the screen immediately.

You can show the image with ease.

scene1.action([
    character1Happy.show({
        ease: "easeInOut",
        duration: 1000,
    }),
]);

Hide the Image

You can hide the image by adding actions to the scene.

scene1.action([
    character1Happy.hide(),
]);

The image will be hidden from the screen immediately.

You can hide the image with ease.

scene1.action([
    character1Happy.hide({
        ease: "easeInOut",
        duration: 1000,
    }),
]);

Change the Image

Src-based Image

You can change the image by updating the image source.

scene1.action([
    character1Happy.setSrc("https://NEW_IMAGE_URL"),
]);

or with a transition.

import {Fade} from "narraleaf-react";

scene1.action([
    character1Happy.setSrc("https://NEW_IMAGE_URL", new Fade(300)),
]);

Use Tag-based Image

You can use the tag-based image to show the image.

Note: The tag-based image is a feature that allows you to change the image appearance by providing tags.

You can't mix the tag-based image configuration with the normal image configuration.
Normal image configuration don't have the tag property, and its src property should be a string.

import {Image} from "narraleaf-react";

const image = new Image({
    tag: {
        groups: [
            ["happy", "sad", "angry"], // group 1
            ["shirt", "jacket", "t-shirt"], // group 2
            ["trousers", "skirt", "shorts"], // group 3
        ],
        defaults: ["happy", "shirt", "trousers"], // default appearance
    } as const,
    src: (emotion, top, bottom) => `https://your/image/src/${emotion}_${top}_${bottom}.png`, // image source
});
// The default image will be `https://your/image/src/happy_shirt_trousers.png`
 
scene1.action([
    image.show(),
    image.setAppearance(["angry", "shorts"], new Fade(1000)), // change the image to `https://your/image/src/angry_shirt_shorts.png`
]);

Read more about tag-based image, please read the Image documentation.

Animate the Image

You can animate the image with Transform.

import {Transform, CommonPosition} from "narraleaf-react";

// Move the image to the right side of the screen
scene1.action([
    character1Happy.applyTransform(new Transform({
        position: "right",
    }, {
        duration: 120,
        ease: "easeOut",
    })),
]);
 
// or
 
scene1.action([
    character1Happy.applyTransform(Transform.left(120, "easeOut")),
]);

The image will move to the right side of the screen with a duration of 120 milliseconds and ease out effect.

For more information about the Transform, please check the Transform documentation.

Show Dialog Play the Story