Widgets auf dem Bildschirm positionieren in Unreal Editor für Fortnite | Fortnite Dokumentation

Widgets werden mit dem Canvas-Widget auf dem Bildschirm positioniert, indem Widgets zu den Canvas-Slots hinzugefügt werden.

Schaltfläche mit „Mitte“-Text in der Mitte des Bildschirms

Der folgende Code ist ein Beispiel für ein Canvas-Widget, das den Text "Mitte" auf einer Schaltfläche in der Mitte des Bildschirms anzeigt.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable

Canvas-Slot-Einstellungen

Du kannst die folgenden Felder eines Canvas-Slots ändern, um Widgets im Canvas zu positionieren:

Scheusal	Beschreibung	Werte
Anker	Die Position im Canvas, an der das Widget verankert ist, angegeben als Prozentsatz des Canvas. Wenn die Canvas-Größe geändert wird, bleibt das Widget an seinen Ankern in der neuen Canvas-Größe befestigt. Du kannst die maximalen und minimalen Anker des Widgets angeben, welche die Größe des Widgets ändern können, wenn SizeToContent aktiviert ist.	Der Bereich für die X- und Y-Felder eines Ankers ist 0 bis 1, wobei `vector2{X := 0.0, Y := 0.0}` die obere linke Seite des Canvas und `vector2{X := 1.0, Y := 1.0}` die untere rechte Seite des Canvas ist.
Ausrichtung	Der Teil des Widgets, der sich an der Ankerposition befindet. Wenn das Feld „Alignment“ beispielsweise `vector2{X := 0.5, 1.0}` lautet, wird die untere Mitte des Widgets an der Ankerposition positioniert.	Der Bereich für die X- und Y-Felder zur Ausrichtung ist 0 bis 1, wobei `vector2{X := 0.0, Y := 0.0}` die obere linke Seite des Widgets und `vector2{X := 1.0, Y := 1.0}` die untere rechte Seite des Widgets ist.
Versatz	Dieses Feld kann die Größe und Position des Widgets auf zwei Arten beeinflussen: Wenn die Felder Anchors und Alignment beide festgelegt sind, kann dieses Feld den Abstand zum Anker angeben, um das Widget zu positionieren. Wenn das Widget so verankert ist, dass die Größe keinen Sinn ergibt, kann dieses Feld den für das Widget zugewiesenen Größenbereich darstellen. Wenn jedoch SizeToContent aktiviert ist, nimmt das Widget die erforderliche Größe an.	Der Rand muss im Bereich von 0 bis 1080 liegen. Diese Auflösung wird an die Auflösung des Bildschirms des Spielers angepasst.
SizeToContent	Wenn diese Option aktiviert ist, wird die Größe des Widgets wie gewünscht angepasst.	`true` / `false`, um darzustellen, ob diese Option aktiviert ist oder nicht.

Die Position und das Layout deiner UI-Elemente sind plattformabhängig. Die Auflösung der Benutzeroberfläche wird von der Plattform bestimmt, die der Spieler verwendet, und die Benutzeroberfläche wird entsprechend skaliert.

Im Allgemeinen wird dein Arbeitsablauf für die Positionierung eines Widgets darin bestehen, die Felder in der folgenden Reihenfolge festzulegen:

Anchors, um festzulegen, wo das Widget auf dem Canvas erscheinen soll, auch wenn die Größe des Canvas geändert wird.
Alignment, um anzugeben, welcher Teil des Widgets an der Ankerposition positioniert wird.
Offsets, um einen Versatz vom Ankerpunkt anzuwenden.
SizeToContent, um die Größe des Widgets nach Bedarf anzupassen.

Im Folgenden wird gezeigt, wie die Änderung des Versatzrandes die Position des Widgets im Verhältnis zur Ankerposition verändert.

Oberer Rand des Versatzes ist 0,0.

Oberer Rand des Versatzes ist 50,0.

Im Folgenden wird gezeigt, wie sich eine Änderung des Feldes Alignment (Ausrichtung) darauf auswirkt, welcher Teil des Widgets sich an der Ankerposition befindet.

Ausrichtung auf Mitte des Widgets gesetzt, vector2{X := 0.5, Y := 0.5}

Ausrichtung oben links vom Widget, vector2{X := 0.0, Y := 0.0}

Im Folgenden wird gezeigt, wie sich die Änderung der Mindest- und Maximalverankerung auf die Größe eines Widgets auswirken kann.

Minimum- und Maximum-Anker sind gleich: vector2{X := 0.5, Y := 0.5}

Minimum- und Maximum-Anker sind unterschiedlich: Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

Beispiel für die Positionierung von Widgets auf dem Bildschirm

Der folgende Code ist ein Beispiel für die Positionierung von Widgets an verschiedenen Stellen auf dem Bildschirm.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable