Pixi’VNImmagine (`ImageSprite`)
Guida all'uso del componente ImageSprite in Pixi'VN, inclusi inizializzazione, caricamento, aggiunta, visualizzazione e rimozione di immagini sul canvas.
Il componente ImageSprite estende il componente Sprite, quindi puoi utilizzare tutti i metodi e le proprietà di Sprite. Viene usato per visualizzare una singola immagine sul canvas.
import { canvas, ImageSprite } from "@drincs/pixi-vn";
let alien = new ImageSprite(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
"alien",
);
await alien.load();
canvas.add("alien", alien);Rispetto al componente Sprite, ImageSprite aggiunge le seguenti funzionalità:
load: Carica l'URL dell'immagine e imposta la texture risultante sul componente.- Posizionamento aggiuntivo: allineamento e posizione con percentuale.
Mostrare
Il modo più semplice per mostrare un'immagine sul canvas è usare la funzione showImage. Questa funzione combina load e canvas.add.
import { newLabel, showImage } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
// Show the images on the canvas
let alien1 = await showImage("alien");
// Show the image with a different alias and position
let alien2 = await showImage("alien2", "alien", {
xAlign: 0.5,
});
},
]);Aggiungere
Per aggiungere un'immagine al canvas, usa la funzione addImage. Questa funzione aggiunge soltanto il componente al canvas; non lo visualizza né carica la sua texture. Utilizza canvas.add per aggiungere il componente al canvas.
import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
// Add the images to the canvas
let alien1 = addImage("alien");
// Add the image with a different alias and position
let alien2 = addImage("alien2", "alien", {
xAlign: 0.5,
});
},
async () => {
let alien1 = canvas.find<ImageSprite>("alien");
let alien2 = canvas.find<ImageSprite>("alien2");
// Load the textures
alien1 && (await alien1.load());
alien2 && (await alien2.load());
},
]);Rimuovere
Come per gli altri componenti del canvas, puoi rimuovere questo componente usando la funzione canvas.remove.