Propiedades para el posicionamiento

Antes de adentrarnos en las diferentes propiedades de posicionamiento, ten en cuenta que Pixi’VN considera que el valor predeterminado para todas las propiedades de posición es { x: 0, y: 0 }, lo que corresponde a la esquina superior izquierda del elemento que estás posicionando.

Los números positivos mueven el elemento hacia la derecha y hacia abajo. Así, algo ubicado en la posición { x: 200, y: 300 } en el juego estará a 200 píxeles del borde izquierdo de la pantalla y a 300 píxeles del borde superior de la pantalla. Los números negativos mueven el elemento hacia la izquierda y hacia arriba en relación con su posición inicial.

Posición y punto de anclaje (anchor) son las principales propiedades que usas para mover elementos por la pantalla. Es importante entender cómo funcionan, porque la mayoría de las demás propiedades de posicionamiento actúan como alguna combinación de estas dos.

Posición (píxel)

La posición se usa para posicionar el componente utilizando unidades de píxeles.

Puedes modificarla con estas propiedades:

• x: mueve el componente de izquierda a derecha (a lo largo del eje x)
• y: mueve el componente de arriba hacia abajo (a lo largo del eje y)
• position: un objeto { x: number, y: number }. También puedes establecer x e y con el mismo valor, por ejemplo component.position = 200.

Punto de anclaje (anchor) y pivote (pivot)

El pivote es un desplazamiento, expresado en píxeles, desde la esquina superior izquierda del componente. Si tienes un componente cuya textura mide 100px x 50px, y quieres establecer el pivote en el centro de la imagen, deberías establecer tu pivote en (50, 25) - la mitad del ancho y la mitad de la altura.

Los puntos de anclaje se especifican en porcentajes, de 0.0 a 1.0, en cada dimensión. Tienen la misma utilidad que el pivote, pero para deducir el punto en el que se encuentran calculan el porcentaje de la altura y el ancho de la textura. Por ejemplo, para rotar alrededor del punto central de una textura usando puntos de anclaje, establecerías el punto de anclaje de tu componente en (0.5, 0.5) - 50% en ancho y altura. En comparación con el pivote, el punto de anclaje es más fácil de usar.

Puedes modificarla con estas propiedades:

• punto de anclaje (anchor): un objeto { x: number, y: number }. También puedes establecer x e y con el mismo valor, por ejemplo conponent.anchor = 0.5.
• pivote (pivot): es un objeto que corresponde a { x: number, y: number }.

Posición con porcentaje

Pixi’VN introduce la posibilidad de posicionar un componente mediante porcentaje. Su funcionamiento es muy similar al de html.

En la práctica, el porcentaje se multiplicará por la altura o el ancho del componente padre para calcular la posición en píxeles.

Puedes modificarla con estas propiedades:

• percentageX: para mover elementos de izquierda a derecha (a lo largo del eje x)
• percentageY: para mover elementos de arriba hacia abajo (a lo largo del eje y).
• percentagePosition: un objeto { x: number, y: number }. También puedes establecer x e y con el mismo valor, por ejemplo 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 },
        });
    },
]);

Alineación (align)

Hasta ahora hemos visto métodos de posicionamiento influenciados por punto de anclaje/pivote. La desventaja de estos métodos es que si, por ejemplo, quieres agregar tu componente al centro de la pantalla, primero tendrás que establecer el punto de anclaje en 0.5 y luego establecer la posición en la mitad del ancho y la altura de la pantalla. Aquí es donde entra en juego la propiedad de alineación.

La alineación es una característica creada originalmente para Ren'Py, que también fue introducida en Pixi’VN. La alineación combina posición y punto de anclaje/pivote para brindarte una forma más intuitiva de posicionar tus componentes al principio, en el centro o al final de la pantalla.

La alineación se especifica en porcentajes, de 0.0 a 1.0, en cada dimensión. Por ejemplo, si usas 0.25 como porcentaje, tu componente se posicionará al 25% de la pantalla con un punto de anclaje de 0.25.

Puedes modificarla con estas propiedades:

• xAlign: para mover elementos de izquierda a derecha (a lo largo del eje x)
• yAlign: para mover elementos de arriba hacia abajo (a lo largo del eje y).
• alineación (align): un objeto { x: number, y: number }. También puedes establecer x e y con el mismo valor, por ejemplo 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 });
    },
]);