Pixi’VNImage (`ImageSprite`)
Guide d'utilisation du composant ImageSprite dans Pixi'VN, notamment l'initialisation, le chargement, l'ajout, l'affichage et la suppression d'images sur le canvas.
Le composant ImageSprite étend le composant Sprite, vous pouvez donc utiliser toutes les méthodes et propriétés de Sprite. Il est utilisé pour afficher une seule image sur le 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);Par rapport au composant Sprite, ImageSprite ajoute les fonctionnalités suivantes :
load: Charge l'URL de l'image et applique la texture résultante au composant.- Positionnement supplémentaire : alignement et positionnement en pourcentage.
Afficher
La manière la plus simple d'afficher une image sur le canvas est d'utiliser la fonction showImage. Cette fonction combine load et 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,
});
},
]);Ajouter
Pour ajouter une image au canvas, utilisez la fonction addImage. Cette fonction se contente d'ajouter le composant au canvas ; elle ne l'affiche pas et ne charge pas sa texture. Elle utilise canvas.add pour ajouter le composant au 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());
},
]);Supprimer
Comme pour les autres composants du canvas, vous pouvez supprimer ce composant en utilisant la fonction canvas.remove.