services
produits

UMG qu'est ce que c'est ?

UMG pour "Unreal Motion Graphics" est un système d'interface graphique dynamique disponible dans l'unreal engine. Elle permet à l'utilisateur d'ajouter facilement une interface 2D à n'importe quel projet, interface qui gérera automatiquement toutes les résolutions et tailles d'écran du mobile aux écrans 16/9. Elle est composée d'une partie code, et d'une partie mise en page qui vous permet de définir l'allure de l'interface et la façon dont elle se déforme en fonction des circonstances.

Création d'un HUD

Pour commencer ouvrez un projet ou créer en un nouveau (n'importe lequel sauf puzzle, un top down dans mon exemple), ensuite nous allons créer un répertoire (folder) dans le content browser pour un soucis de lisibilité.
Créer ensuite un widget blueprint qui est tout en bas dans le menu création, dans l'onglet user interface, puis nommez le comme vous voulez, HUD dans mon exemple.

Ouvrez maintenant le widget nouvellement crée pour arriver sur l'éditeur de classe, qui est un peu différent de l'éditeur habituel, cf capture d'écran plus bas.
1- Le viewport est ici remplacé par un designer qui va vous permettre de "peindre" votre interface comme si c'était un powerpoint, en glissant les éléments et les plaçant.
2- La résolution d'écran pour laquelle le designer est actuellement configuré vous permet d'avoir un aperçu du rendu sur différant écrans, il est recommandé de le mettre a votre résolution pour commencer.
3- La palette est l'endroit ou vous trouverez les éléments à placer sur votre designer.
4- La hiérarchie liste tous les éléments déjà placés ainsi que les groupes auxquels ils appartiennent et dans quel ordre.
5- Le détail vous permettra d'éditer les propriétés des éléments.
6- Ce bouton pour permet de passer du designer au graph pour y entrer du code et vice versa.
7- Et enfin ces menus vous permettent de naviguer et ajuster la vue a votre convenance, ou configurer l'aperçu.

Aller maintenant dans la palette, ouvrez le sous menu "panel" pour glisser une "vertical box" ( 1 ) vers le viewport ( 2 ). Vous pourrez remarquer une espace de petite fleur qui est apparu en haut a gauche de votre viewport ainsi qu'une boite vide maintenant créée. Il s'agit de votre panel et de son anchor. En cliquant sur la boite vous aurez les propriétés détaillées sur lesquelles on va s'attarder un peu ( 3 ).

L'anchor (ancre) est l'endroit de votre canevas où va s'attacher votre objet, ici votre panel, vous avez une multitude d'options disponibles afin d'adapter votre HUD aux différentes résolutions. Si aucune de ces options vous convient, vous pouvez toujours développer L'option avec la petite flèche pour créer vos propres règles. Pour cet exemple on va garder simplement l'ancre par défaut.

Position X,Y, Size X, et Y sont les propriétés de l'objet par rapport à l'ancre. Size définit la taille du panel pendant que position le place en fonction de l'ancre choisit, ici en haut a gauche. Alignement et Z order sont deux propriétés très importantes et moins intuitives. Alignement se compose de deux valeurs comprises de 0 a 1, qui correspondent au point de references de votre objet pour son placement. Par exemple si je mets 0.5 pour x et y, le point de références qui permet de placer l'objet ne sera plus un de ses cotés, mais son centre, ce qui permettra de le centrer.

Le Zorder lui définit le claque ou l'ordre dans lequel est affiché l'objet en question. Un objet avec un Zorder élevé sera affiché par dessus ceux avec un Zorder plus faible.