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 関数を使用してこのコンポーネントを削除できます。