Pixi’VNコンテナ（`ImageContainer`）
Pixi’VN において複数の画像を1つのキャンバスコンポーネントとしてグループ化・操作するための ImageContainer コンポーネントの使い方と機能。
ImageContainer コンポーネントは Container コンポーネントを継承しているため、Container のすべてのメソッドとプロパティを使用できます。 複数の画像を1つのコンポーネントにグループ化し、まとめて操作することができます。
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 関数を使用してこのコンポーネントを削除できます。