Unreal Motion Graphics (UMG) est un outil puissant qui permet de créer des interfaces utilisateur (IU). Que vous créiez une fenêtre pop-up simple ou des systèmes d'interface utilisateur complexes, la compréhension des concepts de base relatifs à UMG vous donne la liberté d'expérimenter cet outil puissant.
Avant de tester vos conceptions d'interface utilisateur, vous devez comprendre la façon dont UMG crée l'interface utilisateur. Pour vous familiariser avec les flux de création d'interfaces utilisateur, nous avons divisé cette page en plusieurs sections :
Concevoir des systèmes d'IU.
Il est essentiel de planifier la conception de votre interface utilisateur pour créer des systèmes d'interface utilisateur à la fois esthétiques et utiles. Tenez compte des points suivants :
Type de jeu que vous créez
Type d'IU nécessaire pour accueillir les joueurs et créer un jeu amusant et facile à comprendre
Aspect final de l'IU
Par exemple, dans l'ATH de Fortnite, tout ce que le joueur doit comprendre à propos du jeu ; les informations pertinentes sur les PV et le bouclier ainsi que les statistiques globales du jeu sont disposées sur l'écran.
Esquissez vos idées de conception d'interface utilisateur sur papier ou sur ordinateur. Utilisez ces esquisses pour créer votre interface utilisateur dans UMG.
Les approches de conception Web de base peuvent vous aider à planifier la disposition de votre IU avant de commencer à créer des widgets utilisateur. Utilisez ces approches pour déterminer les parties de l'interface devant être rigides et celles devant être flexibles. Utilisez les approches de conception Web suivantes pour la disposition de l'interface utilisateur :
Disposition absolue
Une disposition absolue fait généralement appel à des calculs et à des coordonnées précis pour déterminer où placer les éléments sur un écran. Elle est utile lorsqu'un élément d'interface utilisateur doit rester en place à l'aide des coordonnées X et Y. L'élément d'interface utilisateur doit tenir compte de l'emplacement de l'élément parent sur l'écran, ce dernier commençant dans l'angle supérieur gauche de la disposition.
Ce style de disposition est moins flexible et est plus difficile à gérer pour différentes tailles d'écran.
Une conception de disposition absolue convient généralement mieux aux petits éléments qui font partie d'une conception plus grande. Par exemple, utilisez une position absolue pour une icône. Dans l'UEFN, définissez-la à l'aide des paramètres Alignement et Marge intérieure du widget Image.
L'icône conserve le même emplacement quelles que soient la position et la taille des autres éléments de l'interface utilisateur qui l'entourent.
Disposition relative
Ce type de disposition convient mieux aux jeux compatibles avec diverses plateformes, car il permet d'adapter l'interface utilisateur à un grand écran de télévision ou à un petit écran de téléphone portable.
Marge intérieure et espacement
Vous pouvez utiliser la marge intérieure pour ajuster les petits espaces entre les éléments d'un tout. La marge intérieure peut être difficile à gérer pour les widgets individuels dans UMG. Utilisez plutôt les outils d'alignement pour les images et les blocs de texte. L'alignement offre un contrôle plus précis sur l'espace et le placement que la marge intérieure.
Autrement dit, une fois tous les éléments en place, si vous devez insérer davantage d'espace entre les éléments, utilisez les paramètres de marge intérieure des widgets individuels pour ajouter l'espace nécessaire.
Pour appliquer des espaces supérieurs entre les widgets, utilisez une image vide ou un widget d'emplacement entre les widgets conteneurs et les widgets utilisateur. Dans l'image ci-dessous, vous constatez qu'un widget Image est utilisé pour appliquer un espace entre chaque widget utilisateur, permettant ainsi à chaque widget d'afficher clairement les informations correspondantes.
Comprendre les widgets UMG
Dans UMG, une interface utilisateur doit être conçue en sections. Créez une interface utilisateur en créant des widgets utilisateur individuels et en travaillant en couches. Une fois que tous les éléments d'une interface utilisateur sont prêts, superposez en couche les sections individuelles sous un widget utilisateur parent. Créer une interface utilisateur en couches vous permet de mieux contrôler la conception et la disposition de l'interface utilisateur globale.
Avant de planifier et de créer des widgets utilisateur individuels, vous devez comprendre les widgets disponibles dans le panneau Palette. Il existe deux principaux types de widgets : les conteneurs et les éléments.
Conteneurs
Un conteneur contient plusieurs widgets utilisateur, éléments et autres conteneurs pour créer une partie de l'IU. Un élément peut être une image, un matériau, un texte, etc. La taille d'un widget conteneur est déterminée par la taille de l'élément enfant le plus grand.
| Widget de conteneur | Objectif | Image |
|---|---|---|
Grille | Disposer les éléments à l'intérieur d'une grille flexible. Ajouter des options aux éléments enfants pour :
|  |
Grille uniforme | Dispose les éléments enfants en lignes et en colonnes avec un espacement égal. Ajouter des options aux éléments enfants pour :
|  |
Superposition | Dispose les éléments et autres widgets conteneurs en couche, les uns sur les autres. Les conteneurs de superposition n'ajoutent pas d'options ou de paramètres supplémentaires à leurs éléments enfants. |  |
Zones empilables | Dispose les éléments horizontalement ou verticalement (de gauche à droite, de haut en bas). Ce widget conteneur n'espace pas correctement les éléments à lui seul. Utilisez d'autres widgets de conteneur ou d'élément pour créer de l'espace dans une zone empilable. |  |
Zone de dimensionnement | Introduit des paramètres qui limitent la taille de ses éléments enfants. Les conteneurs de zone de dimensionnement n'ajoutent pas d'options ou de paramètres supplémentaires à leurs éléments enfants. |  |
Zone d'échelle | Explique comment adapter l'interface utilisateur à la taille de l'écran. |  |
Boîte de défilement | Crée une zone de défilement pour contenir une collection d'éléments. Les conteneurs de zone de défilement n'ajoutent pas d'options ou de paramètres supplémentaires à leurs éléments enfants. |  |
Commutateur de widgets | Fournit un moyen de parcourir les widgets à l'aide de la touche de tabulation. Dans ce widget conteneur, seul un widget à la fois est visible dans le commutateur. Les conteneurs de commutateur de widget n'ajoutent pas d'options ou de paramètres supplémentaires à leurs éléments enfants. |  |
Zone de dessin | Ancre les éléments dans un espace défini. Il est préférable de l'utiliser à la fin du processus de conception en tant que conteneur parent. Ajoute les options suivantes à ses éléments enfants :
|  |
Widgets d'élément
Tous les widgets ont des propriétés d'apparence suivies de paramètres propres au widget sélectionné dans le panneau Détails.
La taille des éléments enfants peut être définie dans le panneau Détails et hériter des propriétés du widget Conteneur parent.
| Widget d'élément | Objectif | Images |
|---|---|---|
Module d'action | Permet de prendre une entrée de raccourci clavier pour une action spécifique à l'aide de Verse. Seul, le widget est purement cosmétique. |  |
Image | Ce widget permet d'ajouter des textures (il peut s'agir d'images importées ou de textures disponibles nativement dans l'UEFN) et des matériaux d'arrière-plan ou de premier plan d'un widget utilisateur. |  |
Bloc de texte | Ajoute du texte au widget utilisateur. Vous pouvez contrôler la taille, la police, l'espacement et bien d'autres paramètres. |  |
Bouton discret | Bouton rectangulaire avec un arrière-plan transparent. |  |
Bouton standard | Bouton rectangulaire avec un fond opaque. |  |
Bouton voyant | Bouton rectangulaire avec un fond jaune. |  |
Curseur | Curseur de valeur qui augmente ou diminue selon une plage spécifiée. |  |
Pour en savoir plus sur les widgets dans Verse, consultez la page Types de widgets.
Créer et superposer des widgets utilisateur
Les widgets utilisateur sont des fichiers d'interface utilisateur qui contiennent tous les éléments que vous avez conçus. Lors de la création d'un widget utilisateur, compartimentez votre conception autant que possible. Vous devez pour cela utiliser uniquement ce dont vous avez besoin dans un widget utilisateur pour obtenir l'apparence souhaitée pour votre élément d'interface utilisateur.
Dans l'image ci-dessous, quatre widgets utilisateur ont été créés pour chaque composant de la barre de raccourcis des éléments collectés. Chaque widget utilisateur suit les statistiques individuelles des différents composants tout en conservant la même conception d'interface utilisateur.
La conception de widgets utilisateur distincts vous permet de les superposer à l'intérieur d'un widget utilisateur parent pour créer une barre de raccourcis plus cohérente dans la barre de collection. Il est également plus facile pour l'appareil Traqueur de suivre les statistiques de chaque composant individuel de la barre de raccourcis de la collection.
Cliquez sur l'image pour l'agrandir.
Concevoir une interface utilisateur de cette manière nécessite de la pratique. Suivez les tutoriels Créer un ATH personnalisé et les tutoriels Tortues Ninja pour vous entraîner à créer des widgets utilisateur individuels en vue de créer un aspect de section personnalisé dans un jeu.
Modifier une disposition
L'utilisation de widgets utilisateur individuels pour créer une interface utilisateur facilite la modification de l'interface utilisateur. Vous pouvez ainsi modifier une partie de l'interface utilisateur sans aucune incidence sur les autres parties de la conception.
Notez que, dans la conception de la barre de raccourcis de la barre de collection ci-dessus, toutes les étiquettes d'élément sont centrées, sauf une. Dans ce cas, il suffit au développeur d'ouvrir le widget utilisateur de cet élément et de modifier l'étiquette sans aucune incidence sur les autres éléments de la barre de raccourcis de la collection.
Si votre conception est plus complexe, notamment si vous créez un système d'inventaire, vous constaterez peut-être que vous utilisez des widgets de conteneur dont vous n'avez pas besoin ou que vous avez du mal à adapter vos widgets d'éléments à la conception. UMG dispose d'options qui facilitent la modification d'une disposition :
Remplacer par…
Envelopper avec…
Remplacer les widgets
Remplacez les widgets inutiles de la hiérarchie sans affecter la disposition. Faites un clic droit sur le widget inutile, puis sélectionnez Remplacer par… et choisissez un autre widget pour le remplacer. Les widgets de remplacement sont tous des widgets de type conteneur.
Les options des widgets enfants changent en fonction du nouveau conteneur parent utilisé.
Envelopper des widgets
Une façon de modifier la disposition sans affecter tous les widgets enfants consiste à utiliser le paramètre Envelopper avec... dans la hiérarchie. Faites un clic droit sur le widget enfant et sélectionnez Envelopper avec…, puis sélectionnez un conteneur dans le menu déroulant pour profiter de ses propriétés et conserver les paramètres des widgets enfants.
Tester
Une fois votre conception terminée, testez-la. Vérifiez les points suivants :
L'IU a une fonction spécifique. Ne créez pas une interface utilisateur sans aucun objectif ; cette interface doit être utile.
L'IU est utile et conviviale, et les joueurs ne doivent pas avoir à se demander à quoi elle sert lorsqu'ils jouent.
L'IU doit se fondre dans le jeu et favoriser la jouabilité.
Vos éléments d'IU n'entravent pas le déroulement du jeu.