Proprietà per il posizionamento

Prima di addentrarci nelle diverse proprietà di posizionamento, tieni presente che Pixi'VN considera il valore predefinito per tutte le proprietà di posizione { x: 0, y: 0 }, che corrisponde all'angolo in alto a sinistra dell'elemento che stai posizionando.

I numeri positivi spostano l'elemento verso destra e verso il basso. Quindi, un elemento nella posizione { x: 200, y: 300 } nel gioco si troverà a 200 pixel dal bordo sinistro dello schermo e a 300 pixel dal bordo superiore dello schermo. I numeri negativi spostano l'elemento verso sinistra e verso l'alto rispetto alla posizione iniziale.

Posizione e anchor sono le proprietà principali che si utilizzano per spostare gli elementi sullo schermo. È importante capire come funzionano, perché la maggior parte delle altre proprietà di posizionamento agiscono come una combinazione di queste due.

Posizione (pixel)

La posizione viene utilizzata per posizionare il componente utilizzando unità pixel.

Puoi modificarlo con queste proprietà:

• x: sposta il componente da sinistra a destra (lungo l'asse x)
• y: sposta il componente dall'alto verso il basso (lungo l'asse y)
• position: un oggetto { x: number, y: number }. È anche possibile impostare sia x che y sullo stesso valore, ad esempio component.position = 200.

Anchor e pivot

Il pivot è uno offset, espresso in pixel, dall'angolo in alto a sinistra del componente. Se hai un componente la cui texture è 100px x 50px e vuoi impostare il punto pivot al centro dell'immagine, devi impostare il pivot su (50, 25), ovvero metà della larghezza e metà dell'altezza.

Anchors sono specificate in percentuale, da 0,0 a 1,0, in ogni dimensione. Ha la stessa utilità del pivot, ma per dedurre il punto in cui si trova calcola la percentuale dell'altezza e della larghezza della texture. Ad esempio, per ruotare attorno al punto centrale di una texture utilizzando degli anchors, dovresti impostare l'anchor del componente su (0,5, 0,5) - 50% in larghezza e altezza. Rispetto ai Pivot, gli Anchor sono più facili da usare.

Puoi modificarlo con queste proprietà:

• anchor: an object { x: number, y: number }. You can also set both x and y to the same value, e.g. conponent.anchor = 0.5.
• pivot: is an object that corresponds to { x: number, y: number }.

Cos'è esattamente un'anchor/pivot? Pensiamo a qualcosa con cui potresti avere più familiarità. Invece di posizionare un elemento su uno schermo, stai cercando di fissare una foto su una bacheca di sughero. Hai tre elementi:

• una bacheca di sughero
• una puntina da disegno
• una fotografia

Supponiamo che 1mm equivalga a 1 pixel sullo schermo di un computer.

• Il pannello di sughero è lo schermo, ovvero il contenitore in cui stai cercando di posizionare l'elemento.
• La fotografia è l'elemento.
• Il punto in cui posizioni la puntina sulla foto è il anchor/pivot della fotografia.
• Il punto in cui si inserisce lo spillo sulla bacheca di sughero corrisponde alla posizione della fotografia.

Di default, in Pixi'VN, la puntina da disegno inizia sempre nell'angolo in alto a sinistra della foto, per così dire. Se si desidera che l'angolo in alto a sinistra della foto si trovi a 200mm dal lato sinistro della bacheca di sughero, si posizionerà a x 200. Se si desidera anche che l'angolo in alto a sinistra si trovi a 300mm dalla parte superiore della tavola, lo si posizionerà a y 300.

Cosa succede se si desidera che il centro della foto abbia dimensioni pari a 200mm x 300mm?

Ciò significa che devi spostare la posizione in cui si trova la puntina rispetto alla foto. La puntina rimarrà nel punto (200, 300) sulla bacheca di sughero: dovrai solo centrare la foto attorno a quel punto. Ciò significa che è necessario modificare l'anchor/pivot della foto.

Per impostare il punto di ancoraggio della foto al centro della foto, puoi usare l'anchor (0,5, 0,5) o il pivot (100, 150)

Posizione con percentuale

Pixi’VN introduce la possibilità di posizionare un componente in base alla percentuale. Il suo funzionamento è molto simile a quello dell'html.

In pratica, la percentuale verrà moltiplicata per l'altezza o la larghezza del componente padre per calcolare la posizione in pixel.

Puoi modificarlo con queste proprietà:

• percentageX: for moving things left-to-right (along the x-axis)
• percentageY: for moving things top-to-bottom (along the y-axis).
• percentagePosition: an object { x: number, y: number }. You can also set both x and y to the same value, e.g. conponent.align = 0.5.

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

export const startLabel = newLabel("start_label", [
    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

Finora abbiamo visto metodi di posizionamento influenzati da anchor/pivot. Lo svantaggio di questi metodi è che se ad esempio si vuole aggiungere il componente al centro dello schermo, bisognerà prima impostare l'ancoraggio a 0,5 e poi impostare la posizione a metà della larghezza e dell'altezza dello schermo. È qui che entra in gioco la proprietà align.

Align is a feature originally created for Ren'Py, which was also introduced in Pixi’VN. Align combina position e anchor/pivot per offrirti un modo più intuitivo per posizionare i tuoi componenti all'inizio, al centro o alla fine dello schermo.

Gli align sono specificati in percentuale, da 0,0 a 1,0, in ogni dimensione. Ad esempio, se si utilizza 0,25 come percentuale, il componente verrà posizionato al 25% dello schermo con l'ancoraggio a 0,25.

Il calcolo utilizzato per calcolare la posizione è il seguente:

myComponent.x = (align * (fatherComponent.width - myComponent.width)) + myComponent.pivot + (myComponent.anchor * myComponent.width)
myComponent.y = (align * (fatherComponent.height - myComponent.height)) + myComponent.pivot + (myComponent.anchor * myComponent.height)

Puoi modificarlo con queste proprietà:

• xAlign: for moving things left-to-right (along the x-axis)
• yAlign: for moving things top-to-bottom (along the y-axis).
• align: an object { x: number, y: number }. You can also set both x and y to the same value, e.g. conponent.align = 0.5.

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

export const startLabel = newLabel("start_label", [
    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 });
    },
]);