Positionner des widgets à l'écran dans l'Unreal Editor pour Fortnite | Fortnite Documentation

Pour positionner des widgets à l'écran, utilisez le widget de zone de dessin en ajoutant des widgets dans les emplacements prévus à cet effet sur la zone de dessin.

Bouton avec le texte Centrer affiché au milieu de l'écran

Le code suivant est un exemple de widget de zone de dessin qui affiche le texte "Centrer" sur un bouton au centre de l'écran.

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

Paramètres d'emplacement de la zone de dessin

Vous pouvez modifier les champs suivants d'un emplacement de zone de dessin pour positionner les widgets dans la zone de dessin :

Champ	Description	Valeurs
Ancres	Emplacement d'ancrage du widget dans la zone de dessin, exprimé en pourcentage de la zone de dessin. Lors du redimensionnement de la zone de dessin, le widget reste fixé à ses ancres dans la nouvelle taille de la zone de dessin. Vous pouvez spécifier les ancres maximum et minimum du widget, qui peuvent modifier la taille du widget lorsque le paramètre SizeToContent est activé.	La plage des champs X et Y d'une ancre est comprise entre 0 et 1, `vector2{X := 0.0, Y := 0.0}` correspondant à la partie supérieure gauche de la zone de dessin et `vector2{X := 1.0, Y := 1.0}` à la partie inférieure droite de la zone de dessin.
Alignement	Partie du widget qui se trouve à l'emplacement de l'ancre. Par exemple, si le champ Alignement est `vector2{X := 0.5, 1.0}`, le centre inférieur du widget est positionné à l'emplacement de l'ancre.	La plage des champs X et Y d'alignement est comprise entre 0 et 1, `vector2{X := 0.0, Y := 0.0}` correspondant à la partie supérieure gauche du widget et `vector2{X := 1.0, Y := 1.0}` à la partie inférieure droite du widget.
Décalages	Ce champ peut avoir une incidence sur la taille et la position du widget de deux manières : Lorsque les champs Ancres et Alignement sont tous deux définis, ce champ permet de spécifier le décalage par rapport à l'ancre pour positionner le widget. Lorsque le widget est ancré de telle manière que la taille n'a pas d'importance, ce champ peut représenter l'espace de taille alloué pour le widget. Toutefois, si le paramètre SizeToContent est activé, le widget adopte la taille nécessaire.	La marge doit être comprise entre 0 et 1 080. Cette résolution sera mise à l'échelle pour s'adapter à la résolution de l'écran du joueur.
SizeToContent	Si ce paramètre est activé, vous pouvez dimensionner le widget selon les besoins.	Sélectionnez `true`/`false` pour indiquer si cette option est activée ou non.

L'emplacement et la disposition des éléments de votre interface utilisateur dépendent de la plateforme. La résolution de l'interface utilisateur dépend de la plateforme utilisée par le joueur, et l'interface utilisateur est mise à l'échelle pour s'adapter.

En règle générale, le flux de travail pour positionner un widget consiste à définir les champs dans l'ordre suivant :

Ancres pour préciser l'emplacement du widget sur la zone de dessin, même lorsque la zone de dessin est redimensionnée.
Alignement pour préciser quelle partie du widget est positionnée à l'emplacement de l'ancre.
Décalages pour appliquer un décalage par rapport au point d'ancrage.
SizeToContent pour dimensionner le widget selon les besoins.

Dans l'illustration suivante, vous pouvez constater que la modification de la marge des décalages modifie l'emplacement d'affichage du widget par rapport à l'emplacement de l'ancre.

La marge supérieure des décalages est de 0,0

La marge supérieure des décalages est de 50,0

Vous pouvez constater ci-dessous que la partie du widget qui se trouve à l'emplacement de l'ancre change en fonction de la modification du champ Alignement.

Alignement défini sur le milieu du widget, vector2{X := 0.5, Y := 0.5}

Alignement défini en haut à gauche du widget, vector2{X := 0.0, Y := 0.0}

Vous pouvez constater ci-dessous que la modification des ancres minimum et maximum peut avoir une incidence sur la taille d'un widget.

Les ancres minimum et maximum sont identiques : vector2{X := 0.5, Y := 0.5}

Les ancres minimum et maximum sont différentes : Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

Exemple de positionnement des widgets à l'écran

Le code suivant est un exemple de positionnement de widgets à différents emplacements de l'écran.

Widgets positionnés autour de la zone de dessin

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