Свойства позиционирования

Прежде чем мы перейдём к различным свойствам позиционирования, обратите внимание, что 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)

Точка поворота — это смещение, выраженное в пикселях, от верхнего левого угла компонента. Если у вас есть компонент, текстура которого имеет размер 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 });
    },
]);