Pixi’VNImagen (`ImageSprite`)
Guía para usar el componente ImageSprite en Pixi'VN, incluyendo la inicialización, carga, adición, visualización y eliminación de imágenes en el lienzo.
El componente ImageSprite extiende el componente Sprite, por lo que puedes usar todos los métodos y propiedades de Sprite. Se utiliza para mostrar una sola imagen en el lienzo.
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);En comparación con el componente Sprite, ImageSprite añade las siguientes funcionalidades:
load: Carga la URL de la imagen y asigna la textura resultante al componente.- Posicionamiento adicional: alineación y posición con porcentaje.
Mostrar
La forma más sencilla de mostrar una imagen en el lienzo es usar la función showImage. Esta función combina load y 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,
});
},
]);Agregar
Para añadir una imagen al lienzo, usa la función addImage. Esta función solo añade el componente al lienzo; no lo muestra ni carga su textura. Utiliza canvas.add para agregar el componente al lienzo.
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());
},
]);Eliminar
Al igual que con otros componentes del lienzo, puedes eliminar este componente usando la función canvas.remove.