Propriétés de positionnement

Avant d'aborder les différentes propriétés de positionnement, notez que Pixi’VN considère que la valeur par défaut de toutes les propriétés de position est { x: 0, y: 0 }, ce qui correspond au coin supérieur gauche de l'élément que vous positionnez.

Les nombres positifs déplacent l'élément vers la droite et vers le bas. Ainsi, un élément situé à la position { x: 200, y: 300 } dans le jeu se trouvera à 200 pixels du bord gauche de l'écran et à 300 pixels du bord supérieur de l'écran. Les nombres négatifs déplacent l'élément vers la gauche et vers le haut par rapport à sa position de départ.

Position et point d'ancrage (anchor) sont les principales propriétés que vous utilisez pour déplacer des éléments sur l'écran. Il est important de comprendre leur fonctionnement, car la plupart des autres propriétés de positionnement agissent comme une combinaison de ces deux-là.

Position (pixel)

Position est utilisé pour positionner le composant en utilisant des unités de pixels.

Vous pouvez le modifier avec ces propriétés :

• x : déplace le composant de gauche à droite (le long de l'axe x)
• y : déplace le composant de haut en bas (le long de l'axe y)
• position : un objet { x: number, y: number }. Vous pouvez également définir x et y à la même valeur, par exemple component.position = 200.

Point d'ancrage (anchor) et point de pivot (pivot)

Le point de pivot est un décalage, exprimé en pixels, à partir du coin supérieur gauche du composant. Si vous avez un composant dont la texture fait 100px x 50px, et que vous voulez placer le point de pivot au centre de l'image, vous devrez définir votre point de pivot à (50, 25) - la moitié de la largeur, et la moitié de la hauteur.

Les points d'ancrage sont spécifiés en pourcentages, de 0.0 à 1.0, dans chaque dimension. Cela a la même utilité que le point de pivot, mais pour déduire le point où il se situe, il calcule le pourcentage de la hauteur et de la largeur de la texture. Par exemple, pour faire tourner un élément autour du point central d'une texture en utilisant les points d'ancrage, vous définiriez le point d'ancrage de votre composant à (0.5, 0.5) - 50% en largeur et en hauteur. Les points d'ancrage sont plus faciles à utiliser que le point de pivot.

Vous pouvez le modifier avec ces propriétés :

• point d'ancrage (anchor) : un objet { x: number, y: number }. Vous pouvez également définir x et y à la même valeur, par exemple conponent.anchor = 0.5.
• point de pivot (pivot) : est un objet qui correspond à { x: number, y: number }.

Position avec pourcentage

Pixi’VN introduit la possibilité de positionner un composant en pourcentage. Son fonctionnement est très similaire à celui du html.

En pratique, le pourcentage sera multiplié par la hauteur ou la largeur du composant parent pour calculer la position en pixels.

Vous pouvez le modifier avec ces propriétés :

• percentageX : pour déplacer les éléments de gauche à droite (le long de l'axe x)
• percentageY : pour déplacer les éléments de haut en bas (le long de l'axe y).
• percentagePosition : un objet { x: number, y: number }. Vous pouvez également définir x et y à la même valeur, par exemple 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 },
        });
    },
]);

Alignement (align)

Jusqu'à présent, nous avons vu des méthodes de positionnement influencées par point d'ancrage/pivot. L'inconvénient de ces méthodes est que si, par exemple, vous voulez ajouter votre composant au centre de l'écran, vous devrez d'abord définir le point d'ancrage à 0.5, puis définir la position à la moitié de la largeur et de la hauteur de l'écran. C'est là qu'intervient la propriété d'alignement.

L'alignement est une fonctionnalité créée à l'origine pour Ren'Py, qui a également été introduite dans Pixi’VN. L'alignement combine position et point d'ancrage/pivot pour vous offrir un moyen plus intuitif de positionner vos composants au début, au centre ou à la fin de l'écran.

L'alignement est spécifié en pourcentages, de 0.0 à 1.0, dans chaque dimension. Par exemple, si vous utilisez 0.25 comme pourcentage, votre composant sera positionné à 25% de l'écran avec un point d'ancrage à 0.25.

Vous pouvez le modifier avec ces propriétés :

• xAlign : pour déplacer les éléments de gauche à droite (le long de l'axe x)
• yAlign : pour déplacer les éléments de haut en bas (le long de l'axe y).
• alignement (align) : un objet { x: number, y: number }. Vous pouvez également définir x et y à la même valeur, par exemple 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 });
    },
]);