Pixi’VNImage (`ImageSprite`)
Guide to using the ImageSprite component in Pixi’VN, including initialization, loading, adding, showing, and removing images on the canvas.
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.
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);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.
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,
});
},
]);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.
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());
},
]);Remove
As with other canvas components, you can remove this component using the canvas.remove function.