Pozycjonowanie widżetów na ekranie w Unreal Editor dla Fortnite | Fortnite Dokumentacja

Widżety na ekranie umieszcza się za pomocą widżetu kanwy, dodając widżety do slotów kanwy.

Przycisk zawierający tekst Center wyświetlany na środku ekranu

Poniższy kod jest przykładowym widżetem kanwy, który wyświetli tekst „Center” na przycisku na środku ekranu.

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

Ustawienia slotów kanwy

Następujące pola slotu kanwy możesz zmienić, aby pozycjonować widżety na kanwie:

Pole	Opis	Wartości
Kotwice	Lokalizacja na kanwie, gdzie widżet jest zakotwiczony, określona jako procent kanwy. Gdy rozmiar kanwy zostanie zmieniony, widżet pozostaje przymocowany do swoich kotwic w nowym rozmiarze kanwy. Można określić kotwice wyznaczające minimum i maksimum widżetu, które mogą zmienić rozmiar widżetu, gdy włączona jest funkcja SizeToContent.	Zakres pól X i Y kotwicy wynosi od 0 do 1, gdzie `vector2{X := 0.0, Y := 0.0}` jest lewym górnym rogiem kanwy, a `vector2{X := 1.0, Y := 1.0}` jest prawym dolnym rogiem kanwy.
Wyrównanie	Część widżetu, która znajduje się w miejscu kotwicy. Jeśli na przykład pole Alignment ma wartość `vector2{X := 0.5, 1.0}`, wówczas dolny środek widżetu zostanie umieszczony w miejscu kotwicy.	Zakres pól X i Y wyrównania wynosi od 0 do 1, gdzie `vector2{X := 0.0, Y := 0.0}` jest lewym górnym rogiem widżetu, a `vector2{X := 1.0, Y := 1.0}` jest prawym dolnym rogiem widżetu.
Przesunięcia	To pole może wpływać na rozmiar i położenie widżetu na dwa sposoby: Gdy pola Anchors i Alignment są ustawione, pole to może określać przesunięcie względem kotwicy w celu pozycjonowania widżetu. Gdy widżet jest zakotwiczony w taki sposób, że rozmiar nie ma sensu, pole to może reprezentować przestrzeń rozmiaru przydzieloną dla widżetu. Jeśli jednak włączona jest funkcja SizeToContent, widżet przyjmie wymagany rozmiar.	Margines musi mieścić się w zakresie od 0 do 1080. Ta rozdzielczość zostanie przeskalowana w celu dopasowania do rozdzielczości ekranu gracza.
SizeToContent	Po włączeniu tej funkcji widżet będzie miał żądany rozmiar.	Do reprezentowania, czy ta opcja jest włączona, służą wartości `true` / `false`.

Lokalizacja i układ elementów UI zależą od platformy. Rozdzielczość UI zostanie określona przez platformę, z której korzysta gracz, a UI zostanie przeskalowany w celu dopasowania.

Zasadniczo proces pozycjonowania widżetu będzie polegał na ustawieniu pól w następującej kolejności:

Anchors, aby określić, gdzie na kanwie powinien pojawić się widżet, nawet po zmianie jej rozmiaru.
Alignment, aby określić, która część widżetu jest umieszczona w lokalizacji kotwicy.
Offsets, aby zastosować przesunięcie od punktu kotwicy.
SizeToContent, aby dostosować rozmiar widżetu do potrzeb.

Poniżej pokazano, jak zmiana marginesu przesunięcia zmienia miejsce wyświetlania widżetu względem lokalizacji kotwicy.

Górny margines przesunięcia wynosi 0.0

Górny margines przesunięcia wynosi 50.0

Poniżej pokazano, jak zmiana pola Alignment wpływa na to, która część widżetu znajduje się w lokalizacji kotwicy.

Wyrównanie ustawione na środek widżetu, vector2{X := 0.5, Y := 0.5}

Wyrównanie ustawione na lewy górny róg widżetu, vector2{X := 0.0, Y := 0.0}

Poniżej pokazano, jak zmiana kotwic wyznaczających minimum i maksimum może wpłynąć na rozmiar widżetu.

Kotwice wyznaczające minimum i maksimum są takie same: vector2{X := 0.5, Y := 0.5}

Kotwice wyznaczające minimum i maksimum są różne: Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

Przykład pozycjonowania widżetów na ekranie

Poniższy kod jest przykładem pozycjonowania widżetów w różnych punktach ekranu.

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