位置決めのためのプロパティ

さまざまな位置決めプロパティについて説明する前に、Pixi’VN ではすべての位置プロパティのデフォルト値が { x: 0, y: 0 } であることに注意してください。これは、位置決めしようとしている要素の左上に対応します。

正の数値は要素を右と下に移動させます。 したがって、ゲーム内で { x: 200, y: 300 } の位置にあるものは、画面の左端から 200 ピクセル、画面の上端から 300 ピクセルの位置になります。 負の数値は、要素をその開始位置に対して左と上に移動させます。

位置 と アンカー（anchor） は、画面上で要素を移動させるために使用する主要なプロパティです。 他のほとんどの位置決めプロパティは、これら 2 つの何らかの組み合わせとして機能するため、これらの動作を理解することが重要です。

位置（ピクセル）

位置は、ピクセル単位でコンポーネントを位置決めするために使用されます。

以下のプロパティで変更できます。

• x：コンポーネントを左から右へ移動させます（x 軸に沿って）
• y：コンポーネントを上から下へ移動させます（y 軸に沿って）
• position：オブジェクト { x: number, y: number }。 x と y の両方を同じ値に設定することもできます。例：component.position = 200。

アンカー（anchor）とピボット（pivot）

ピボットは、コンポーネントの左上隅からのオフセットで、ピクセルで表されます。 テクスチャが 100px x 50px のコンポーネントがあり、ピボットポイントを画像の中心に設定したい場合、ピボットを (50, 25) に設定します。これは幅と高さのそれぞれ半分に相当します。

アンカーは、各次元において 0.0 から 1.0 までのパーセンテージで指定されます。 これはピボットと同じ役割を持ちますが、その位置を導き出す際には、テクスチャの高さと幅のパーセンテージを計算します。 例えば、アンカーを使ってテクスチャの中心点を軸に回転させたい場合、コンポーネントのアンカーを (0.5, 0.5) —— 幅と高さの 50% に設定します。 ピボットと比較すると、アンカーの方が使いやすいです。

以下のプロパティで変更できます。

• アンカー（anchor）：オブジェクト { x: number, y: number }。 x と y の両方を同じ値に設定することもできます。例：conponent.anchor = 0.5。
• ピボット（pivot）：{ x: number, y: number } に対応するオブジェクトです。

パーセンテージによる位置決め

Pixi’VN では、パーセンテージによってコンポーネントを位置決めする機能が導入されています。 その動作は html のものと非常に似ています。

実際には、パーセンテージは親コンポーネントの高さまたは幅に乗算され、ピクセル単位の位置が計算されます。

以下のプロパティで変更できます。

• percentageX：左から右への移動に使用します（x 軸に沿って）
• percentageY：上から下への移動に使用します（y 軸に沿って）。
• percentagePosition：オブジェクト { x: number, y: number }。 x と y の両方を同じ値に設定することもできます。例：conponent.align = 0.5。

import { newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    async () => {
        await showImage("egg_head", "egg_head", {
            percentagePosition: 0.5,
            anchor: 0.5,
        });
        await showImage("flower_top", "flower_top", {
            percentagePosition: 0,
        });
        await showImage("panda", "panda", {
            percentageX: 1,
            percentageY: 0,
            anchor: { x: 1, y: 0 },
        });
        await showImage("skully", "skully", {
            percentageX: 0,
            percentageY: 1,
            anchor: { x: 0, y: 1 },
        });
        await showImage("helmlok", "helmlok", {
            percentagePosition: 1,
            anchor: 1,
        });
        await showImage("bunny", "bunny", {
            percentageX: 0.5,
            percentageY: 1,
            anchor: { x: 0.5, y: 1 },
        });
    },
]);

配置（align）

これまで、アンカー/ピボット の影響を受ける位置決め方法を見てきました。 これらの方法の欠点は、例えばコンポーネントを画面の中央に追加したい場合、まずアンカーを 0.5 に設定し、次に位置を画面の幅と高さの半分に設定しなければならないことです。 ここで配置プロパティの出番です。

配置はもともと Ren'Py のために作られた機能で、これも Pixi’VN に導入されました。 配置は 位置 と アンカー/ピボット を組み合わせることで、コンポーネントを画面の始め、中央、あるいは終わりに、より直感的に配置できる方法を提供します。

配置は、各次元において 0.0 から 1.0 までのパーセンテージで指定されます。 例えば、パーセンテージとして 0.25 を使用すると、コンポーネントは画面の 25% の位置に、アンカーを 0.25 として配置されます。

以下のプロパティで変更できます。

• xAlign：左から右への移動に使用します（x 軸に沿って）
• yAlign：上から下への移動に使用します（y 軸に沿って）。
• 配置（align）：オブジェクト { x: number, y: number }。 x と y の両方を同じ値に設定することもできます。例：conponent.align = 0.5。

import { newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    async () => {
        await showImage("egg_head", "egg_head", { align: 0.5 });
        await showImage("flower_top", "flower_top", { align: 0 });
        await showImage("panda", "panda", { xAlign: 1, yAlign: 0 });
        await showImage("skully", "skully", { xAlign: 0, yAlign: 1 });
        await showImage("helmlok", "helmlok", { align: 1 });
        await showImage("bunny", "bunny", { xAlign: 0.5, yAlign: 1 });
    },
]);