Eigenschaften zur Positionierung

Bevor wir uns mit den verschiedenen Positionierungseigenschaften befassen, beachten Sie, dass Pixi’VN den Standardwert für alle Positionseigenschaften als { x: 0, y: 0 } betrachtet, was der oberen linken Ecke des Elements entspricht, das Sie positionieren.

Positive Zahlen bewegen das Element nach rechts und unten. Etwas, das sich an der Position { x: 200, y: 300 } im Spiel befindet, ist also 200 Pixel vom linken Bildschirmrand und 300 Pixel vom oberen Bildschirmrand entfernt. Negative Zahlen bewegen das Element relativ zu seiner Ausgangsposition nach links und oben.

Position und Ankerpunkt (anchor) sind die wichtigsten Eigenschaften, mit denen Sie Elemente auf dem Bildschirm bewegen. Es ist wichtig zu verstehen, wie sie funktionieren, da die meisten anderen Positionierungseigenschaften als eine Kombination dieser beiden wirken.

Position (Pixel)

Position wird verwendet, um die Komponente in Pixeleinheiten zu positionieren.

Sie können sie mit diesen Eigenschaften ändern:

• x: bewegt die Komponente von links nach rechts (entlang der x-Achse)
• y: bewegt die Komponente von oben nach unten (entlang der y-Achse)
• position: ein Objekt { x: number, y: number }. Sie können x und y auch auf denselben Wert setzen, z. B. component.position = 200.

Ankerpunkt (anchor) und Drehpunkt (pivot)

Der Drehpunkt ist ein Versatz, ausgedrückt in Pixeln, von der oberen linken Ecke der Komponente. Wenn Sie eine Komponente haben, deren Textur 100px x 50px groß ist, und den Drehpunkt in die Mitte des Bildes setzen möchten, würden Sie Ihren Drehpunkt auf (50, 25) setzen - die Hälfte der Breite und die Hälfte der Höhe.

Ankerpunkte werden in Prozent angegeben, von 0.0 bis 1.0, in jeder Dimension. Sie haben denselben Nutzen wie der Drehpunkt, aber um den Punkt zu ermitteln, an dem sie sich befinden, wird der Prozentsatz der Höhe und Breite der Textur berechnet. Um sich beispielsweise um den Mittelpunkt einer Textur mithilfe von Ankerpunkten zu drehen, würden Sie den Ankerpunkt Ihrer Komponente auf (0.5, 0.5) setzen - 50% in Breite und Höhe. Ankerpunkte sind im Vergleich zum Drehpunkt einfacher zu verwenden.

Sie können sie mit diesen Eigenschaften ändern:

• Ankerpunkt (anchor): ein Objekt { x: number, y: number }. Sie können x und y auch auf denselben Wert setzen, z. B. conponent.anchor = 0.5.
• Drehpunkt (pivot): ist ein Objekt, das { x: number, y: number } entspricht.

Position mit Prozentangabe

Pixi’VN führt die Möglichkeit ein, eine Komponente prozentual zu positionieren. Ihre Funktionsweise ähnelt sehr der von html.

In der Praxis wird der Prozentsatz mit der Höhe oder Breite der übergeordneten Komponente multipliziert, um die Position in Pixeln zu berechnen.

Sie können sie mit diesen Eigenschaften ändern:

• percentageX: zum Bewegen von Elementen von links nach rechts (entlang der x-Achse)
• percentageY: zum Bewegen von Elementen von oben nach unten (entlang der y-Achse).
• percentagePosition: ein Objekt { x: number, y: number }. Sie können x und y auch auf denselben Wert setzen, z. B. 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 },
        });
    },
]);

Ausrichtung (align)

Bisher haben wir Positionierungsmethoden gesehen, die von Ankerpunkt/Drehpunkt beeinflusst werden. Der Nachteil dieser Methoden ist, dass Sie beispielsweise, wenn Sie Ihre Komponente in der Mitte des Bildschirms hinzufügen möchten, zunächst den Ankerpunkt auf 0.5 setzen und dann die Position auf die Hälfte der Breite und Höhe des Bildschirms setzen müssen. Hier kommt die Ausrichtungseigenschaft ins Spiel.

Die Ausrichtung ist eine Funktion, die ursprünglich für Ren'Py entwickelt wurde und die auch in Pixi’VN eingeführt wurde. Die Ausrichtung kombiniert Position und Ankerpunkt/Drehpunkt, um Ihnen eine intuitivere Möglichkeit zu bieten, Ihre Komponenten am Anfang, in der Mitte oder am Ende des Bildschirms zu positionieren.

Die Ausrichtung wird in Prozent angegeben, von 0.0 bis 1.0, in jeder Dimension. Wenn Sie beispielsweise 0.25 als Prozentsatz verwenden, wird Ihre Komponente bei 25% des Bildschirms mit einem Ankerpunkt von 0.25 positioniert.

Sie können sie mit diesen Eigenschaften ändern:

• xAlign: zum Bewegen von Elementen von links nach rechts (entlang der x-Achse)
• yAlign: zum Bewegen von Elementen von oben nach unten (entlang der y-Achse).
• Ausrichtung (align): ein Objekt { x: number, y: number }. Sie können x und y auch auf denselben Wert setzen, z. B. 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 });
    },
]);