定位属性

在介绍不同的定位属性之前，请注意 Pixi’VN 认为所有定位属性的默认值都是 { x: 0, y: 0 }，它对应于你要定位的元素的左上角。

正数会使元素向右和向下移动。 因此，游戏中位于 { x: 200, y: 300 } 位置的元素，将距离屏幕左边缘 200 像素，距离屏幕上边缘 300 像素。 负数会使元素相对于其起始位置向左和向上移动。

位置 和 锚点（anchor） 是你用来在屏幕上移动元素的主要属性。 理解它们的工作原理很重要，因为大多数其他定位属性都是这两者的某种组合。

位置（像素）

位置用于以像素单位定位组件。

你可以通过以下属性修改它：

• x：从左到右移动组件（沿 x 轴）
• y：从上到下移动组件（沿 y 轴）
• position：一个对象 { x: number, y: number }。 你也可以将 x 和 y 设置为相同的值，例如 component.position = 200。

锚点（anchor）与轴心点（pivot）

轴心点（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 });
    },
]);