Pixi’VN컨테이너 (`ImageContainer`)
Pixi’VN에서 여러 이미지를 단일 캔버스 컴포넌트로 그룹화하고 조작하기 위한 ImageContainer 컴포넌트의 사용법과 기능.
ImageContainer 컴포넌트는 Container 컴포넌트를 확장하므로 Container의 모든 메서드와 속성을 사용할 수 있습니다. 여러 이미지를 하나의 컴포넌트로 그룹화하여 하나처럼 조작할 수 있게 해줍니다.
ImageContainer의 자식 요소는 ImageSprite 컴포넌트입니다.
import { canvas, ImageContainer } from "@drincs/pixi-vn";
let james = new ImageContainer(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
["m01-body", "m01-eyes", "m01-mouth"],
);
await james.load();
canvas.add("james", james);Container 컴포넌트와 비교하여 ImageContainer는 다음 기능을 추가합니다:
load: 모든 이미지 URL을 로드하고 생성된 텍스처를 자식 요소에 설정합니다.- 추가 위치 지정: 퍼센트로 정렬 및 위치 지정.
표시
캔버스에 이미지 그룹을 표시하는 가장 간단한 방법은 showImageContainer 함수를 사용하는 것입니다. 이 함수는 load와 canvas.add를 결합합니다.
import {
canvas,
ImageContainer,
newLabel,
showImageContainer,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let james = await showImageContainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
() => {
canvas.removeAllTickers();
let tickerId = canvas.animate<ImageContainer>("james", {
xAlign: 0,
yAlign: 1,
});
},
]);추가
이미지 그룹을 캔버스에 추가하려면 addImageCointainer 함수를 사용합니다. 이 함수는 컴포넌트를 캔버스에 추가하기만 하며, 이미지를 표시하거나 텍스처를 로드하지는 않습니다. canvas.add를 사용하여 컴포넌트를 캔버스에 추가합니다.
import {
addImageCointainer,
canvas,
ImageContainer,
newLabel,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
let james = await addImageCointainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
async () => {
let james = canvas.find<ImageContainer>("james");
james && (await james.load());
},
]);제거
다른 캔버스 컴포넌트와 마찬가지로, canvas.remove 함수를 사용하여 이 컴포넌트를 제거할 수 있습니다.