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 the ImageSprite component, you must pass the following parameters:

• options (Opzionale): Le opzioni per il componente.
• imageUrl (Optional): The URL or path of the image. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della 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(): Load the image URL and set the resulting texture to the sprite.
• Additional positions: Align and Position with percentage

Visualizza

The simplest and fastest method to show an image on the canvas is to use the showImage function. Questa funzione è una combinazione delle funzioni load e canvas.add.

This function will return a ImageSprite, that you can use to manipulate the image, and it has the following parameters:

• alias: Is a alias for the image.
• imageUrl (Optional): The URL or path of the image. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. If you don't provide the URL, then the alias is used as the URL.
• options (Opzionale): Le opzioni per il componente.

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

Aggiungi

To add an image to the canvas, you can use the addImage function. It is important to take into account that this function only adds the component to the canvas but does not show it and does not load its texture. This function use canvas.add to add the image to the canvas.

This function will return a ImageSprite, that you can use to manipulate the image, and it has the following parameters:

• alias: Is a alias for the image.
• imageUrl (Optional): The URL or path of the image. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. If you don't provide the URL, then the alias is used as the URL.
• options (Opzionale): Le opzioni per il componente.

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

Rimuovi

As for the rest of the canvas components, you can remove an image from the canvas using the canvas.remove function.