Pixi’VNBild (`ImageSprite`)
Anleitung zur Verwendung der ImageSprite-Komponente in Pixi'VN, einschließlich Initialisierung, Laden, Hinzufügen, Anzeigen und Entfernen von Bildern auf der Leinwand.
Die ImageSprite-Komponente erweitert die Sprite-Komponente, sodass alle Methoden und Eigenschaften von Sprite genutzt werden können. Sie wird verwendet, um ein einzelnes Bild auf der Leinwand anzuzeigen.
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);Im Vergleich zur Sprite-Komponente fügt ImageSprite folgende Funktionen hinzu:
load: Lädt die Bild-URL und setzt die resultierende Textur der Komponente.- Zusätzliche Positionierung: Ausrichten und Positionieren mit Prozentangaben.
Anzeigen
Der einfachste Weg, ein Bild auf der Leinwand anzuzeigen, ist die Verwendung der Funktion showImage. Diese Funktion kombiniert load und 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,
});
},
]);Hinzufügen
Um ein Bild zur Leinwand hinzuzufügen, wird die Funktion addImage verwendet. Diese Funktion fügt die Komponente lediglich zur Leinwand hinzu; sie zeigt sie nicht an und lädt auch keine Textur. Sie nutzt canvas.add, um die Komponente zur Leinwand hinzuzufügen.
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());
},
]);Entfernen
Wie bei anderen Leinwand-Komponenten kann diese Komponente mit der Funktion canvas.remove entfernt werden.