ImageSprite

The ImageSprite component extends the Sprite component, so you can use all the methods and properties of Sprite. It is used to display a single image on the canvas.

To initialize this component, you must pass the following parameters:

• options (Optional): The options for the component.
• imageUrl (Optional): The URL or path. If you have initialized the asset matrix, you can use the alias of the texture.

import { canvas, ImageSprite } from "@drincs/pixi-vn"

let alien = new ImageSprite({
    anchor: { x: 0.5, y: 0.5 },
    x: 100,
    y: 100,
}, 'https://pixijs.com/assets/eggHead.png')

await alien.load()
canvas.add("alien", alien)

Compared to the Sprite component, ImageSprite adds the following features:

• load(): Loads the image URL and sets the resulting texture to the component.
• Additional positioning: align and position with percentage.

Show

The simplest way to show an image on the canvas is to use the showImage function. This function combines load and canvas.add.

This function returns an ImageSprite that you can use to manipulate the component. This function has the following parameters:

• alias: The alias to identify the component.
• imageUrl (Optional): The URL or path. If you have initialized the asset matrix, you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL.
• options (Optional): The options for the component.

import { newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        let alien1 = await showImage("alien"); 
        let alien2 = await showImage("alien2", "alien", { 
            xAlign: 0.5, 
        }); 
        let alien3 = await showImage("alien3", "https://pixijs.com/assets/eggHead.png", { 
            xAlign: 1, 
        }); 
    },
]);

Add

To add an image to the canvas, use the addImage function. This function only adds the component to the canvas; it does not show it or load its texture. It uses canvas.add to add the component to the canvas.

This function returns an ImageSprite that you can use to manipulate the component. This function has the following parameters:

• alias: The alias to identify the component.
• imageUrl (Optional): The URL or path. If you have initialized the asset matrix, you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL.
• options (Optional): The options for the component.

import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    () => {
        let alien1 = addImage("alien"); 
        let alien2 = addImage("alien2", "alien", { 
            xAlign: 0.5, 
        }); 
        let alien3 = addImage("alien3", "https://pixijs.com/assets/eggHead.png", { 
            xAlign: 1, 
        }); 
    },
    async () => {
        let alien1 = canvas.find<ImageSprite>("alien");
        let alien2 = canvas.find<ImageSprite>("alien2");
        let alien3 = canvas.find<ImageSprite>("alien3");
        // Load the textures
        alien1 && (await alien1.load());
        alien2 && (await alien2.load());
        alien3 && (await alien3.load());
    },
]);

Remove

As with other canvas components, you can remove this component using the canvas.remove function.