Pixi’VN이미지 (`ImageSprite`)
Pixi'VN에서 ImageSprite 컴포넌트를 사용하는 방법 안내 — 캔버스에 이미지를 초기화, 로드, 추가, 표시 및 제거하는 방법을 포함합니다.
ImageSprite 컴포넌트는 Sprite 컴포넌트를 확장하므로, Sprite의 모든 메서드와 속성을 사용할 수 있습니다. 캔버스에 단일 이미지를 표시하는 데 사용됩니다.
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);Sprite 컴포넌트와 비교하여, ImageSprite는 다음 기능을 추가합니다:
load: 이미지 URL을 로드하고 결과 텍스처를 컴포넌트에 설정합니다.- 추가 위치 지정: 퍼센트로 정렬 및 위치 지정.
표시
캔버스에 이미지를 표시하는 가장 간단한 방법은 showImage 함수를 사용하는 것입니다. 이 함수는 load와 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,
});
},
]);추가
캔버스에 이미지를 추가하려면 addImage 함수를 사용합니다. 이 함수는 컴포넌트를 캔버스에 추가하기만 하며, 이미지를 표시하거나 텍스처를 로드하지는 않습니다. canvas.add를 사용하여 컴포넌트를 캔버스에 추가합니다.
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());
},
]);제거
다른 캔버스 컴포넌트와 마찬가지로, canvas.remove 함수를 사용하여 이 컴포넌트를 제거할 수 있습니다.