Image

• config: Partial<RichImageUserConfig<T>> -Image config - RichImageUserConfig

Tag-based Image

For example, if you have an image that has tags like happy, sad, angry, you can use tag-based image.

Here is an example of tag-based image.

const image = new Image({
    tag: {
        groups: [
            ["happy", "sad", "angry"],
            ["shirt", "jacket", "t-shirt"],
            ["trousers", "skirt", "shorts"],
        ],
        defaults: ["happy", "shirt", "trousers"],
    } as const,
    src: (emotion, top, bottom) => `https://your/image/src/${emotion}_${top}_${bottom}.png`,
});
// The default image will be `https://your/image/src/happy_shirt_trousers.png`

const image = new Image({
    tag: {
        groups: [
            ["a", "b", "c"],
            ["1", "2", "3"],
            ["a"], // INVALID, tag "a" is already in the first group
            ["x", "y", "y"], // INVALID, tag "y" is duplicated
        ],
        defaults: ["a"], // INVALID, default definition must have a full set of tags
    } as const,
    /* ... */
});

Src-based Image

If you don't have tags, you can use src-based image.

const image = new Image({
    src: "https://your/image/src.png",
});

Wearable Image

You can add some wearables to the image.

const image = new Image("image-name", {
    /* ... */
    wearables: [new Image(/* ... */)],
});

Copy the image.

• Returns Image

const newImage = image.copy();

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.

• src: string | StaticImageData - The source of the image
• transition?: ITransition - For ITransition, see ITransition

image.setSrc("your/image/src", new Fade(1000));

Set the appearance of the image.

Note: Use a full set of tags if possible, this will help the lib to predict the next appearance.

• tags: TagGroupDefinition ? FlexibleTuple<SelectElementFromEach<Tags>> : string[] - Tags of the image
• transition?: IImageTransition - For IImageTransition, see IImageTransition

// happy, shirt, trousers
const image = new Image({
    tag: {
        groups: [
            ["happy", "sad", "angry"],
            ["shirt", "jacket", "t-shirt"],
            ["trousers", "skirt", "shorts"],
        ],
        defaults: ["happy", "shirt", "trousers"],
    } as const,
    /* ... */
});
 
//  happy , [jacket], [t-shirt]
image.setAppearance(["jacket", "t-shirt"], new Fade(1000));
 
// [angry],  jacket ,  t-shirt
image.setAppearance(["angry"], new Fade(1000));

• transform: Transform - Transform

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.

• options: Transform - Transform

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 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.

• options: Transform - Transform

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",
});

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);

Bind this image to a parent image as a wearable

• parent: Image - Parent image
• Returns this

childImage.bindWearable(parentImage);