UMG
Le système IU d'Unreal s'appelle Unreal Motion Graphics ou UMG. Il est très différent du système uGUI standard de Unity. L'outil concepteur d'IU d'UMG est très similaire à la boîte à outils de construction d'IU d'Unity si vous avez déjà travaillé avec ce système. Le concepteur est traité en détail dans la documentation officielle ; les pages Construire votre IU et Meilleures pratiques UMG sont particulièrement utiles pour les développeurs Unity en transition. Les widgets sont au cœur d'UMG. Il s'agit d'une série de fonctions et de hiérarchies préétablies que vous pouvez utiliser pour construire votre interface utilisateur.
CommonUI
CommonUI est un plug-in créé par Epic Games que nous utilisons dans Parrot. CommonUI met en place des styles et des actions "communs" pour tous les widgets, ce qui prendrait normalement beaucoup de temps à mettre en place manuellement à plusieurs reprises. Un exemple pratique est la détection des changements de périphériques d'entrée et la commutation automatique des icônes d'entrée à l'écran. Cela prendrait beaucoup de temps à faire manuellement, mais Common UI automatise ce processus. CommonUI est également nécessaire pour la prise en charge du remappage des touches d'Enhanced Input, qui est traitée plus en détail dans la documentation Enhanced Input.
Pour configurer CommonUI, vous devez d'abord l'activer dans la fenêtre Plug-ins. Dans le menu, cliquez sur Modifier > Plug-ins, cherchez “Plug-in Common UI”, activez-le, puis redémarrez l'éditeur.
Ouvrez Paramètres du projet > Paramètres généraux et modifiez la Classe client de hublot du jeu de “GameViewportClient” vers “CommonGameViewportClient”. Cela permet aux widgets CommonUI de recevoir les événements d'entrée du moteur.
Sous Paramètres du projet > Paramètres d'entrée commune, cochez la case pour Activer le support d'Enhanced Input. Cela permet à Enhanced Input de fonctionner avec CommonInput. CommonInput est ce qui gère l'entrée à l'intérieur des widgets CommonUI.
Enfin, vous devez activer certains modules dans votre projet pour pouvoir les utiliser dans le code. Allez dans le fichier
$ProjectName.Build.cs, dans ce cas, il s'agit du fichierParrot.Build.cs. Ajoutez les éléments suivants à la liste des PublicDependencyModuleNames :CommonInputCommonUIEnhancedInputGameplayTagsUMG
Hiérarchie des widgets spécifique à Parrot
La première classe IU à examiner dans Parrot est AParrotHUD. La classe ATH dans l'Unreal Engine est un acteur créé pour chaque joueur local et gère l'affichage tête haute. Il dispose d’une zone de dessin et d’une zone de dessin de débogage sur lesquels il est possible de dessiner directement. Vous pouvez également l'assigner dans le cadre de la configuration de votre mode de jeu. Lorsque vous utilisez cette classe dans Parrot, c'est en tant qu'acteur qui possède le widget racine à partir duquel tous vos widgets sont créés et gérés.
Le type de classe de ce widget propriétaire est UParrotGameLayout. UParrotGameLayout est le conteneur de widgets de base C++ pour tous les autres widgets de l'IU. Il contient une liste de "couches" qui sont de type UCommonActivatableWidgetContainerBase. Tous les autres widgets que vous souhaitez afficher seront placés sur l'une de ces couches.
Les couches de base que nous avons mises en place sont :
Jeu : La couche dans laquelle vous envoyez votre widget ATH UMG
GameMenu : la couche dans laquelle vous envoyez tout widget que vous souhaitez afficher au-dessus de l'ATH.
Menu : La couche pour tous les widgets d'écran tels que l'écran de pause, l'écran des paramètres, l'écran d'inventaire et d'autres écrans similaires.
Modal : La couche pour toutes les fenêtres pop-up modales.
Un seul widget par couche est actif à la fois. Vous pouvez envoyer plusieurs widgets d'écran différents sur la couche "Menu", mais seul le dernier est actif et affiché.
Dans Parrot, nous avons également créé une hiérarchie de classes pour les écrans activables, car ces widgets partagent tous des fonctionnalités communes et sont poussés vers la couche Menu. La hiérarchie des classes est la suivante :
Avec cette configuration, nous créons tous les écrans IU dans Parrot.
Style de widget
Avec le plug-in Common UI et la configuration de l'écran, vous pouvez commencer à styliser vos widgets. W_ButtonBase sous Content/UI/Widgets/Common est un bon exemple. Il utilise les données de style ButtonStyle_Base sous Content/UI/Styling. Il utilise la classe UCommonButtonStyle de Common UI. Vous pouvez personnaliser de nombreuses options. Il peut s'agir par exemple de sons et de pinceaux basés sur l'état du bouton. Common UI dispose d'un grand nombre de classes de style différentes en fonction du widget utilisé. Si vous avez besoin de faire quelque chose de personnalisé, le code du moteur pour ces widgets stylisés est un bon point de référence.
Écran de chargement
L'écran de chargement de Parrot utilise un plug-in d'Epic Games : CommonLoadingScreen. Un autre exemple de ce plug-in en pratique se trouve dans le projet d'exemple Lyra d'Epic Games. Pour comprendre pourquoi nous utilisons ce plug-in, nous devons d'abord comprendre les bases du chargement de niveau dans l'Unreal Engine.
Il existe plusieurs façons de gérer le chargement des niveaux dans UE. Une approche simple consiste à appeler le nœud Open Level dans un blueprint. Cette fonction permet de charger une carte à l'aide d'une chaîne ou d'une référence d'objet souple sur un mappage. Cela fonctionne bien pour les mappages simples, mais il faut faire attention. Lorsque cette fonction est invoquée, le mappage est chargé de manière synchrone, ce qui peut entraîner un ralentissement notable en fonction de la quantité de données à charger pour le nouveau mappage. Un autre problème est qu'un widget ajouté au hublot sera lié à un contrôleur de joueur qui existe dans le niveau précédent. Lors de la transition du niveau, il sera nettoyé dans le cadre du déchargement du niveau.
Il peut être intéressant de charger un nouveau mode de jeu en fonction du mappage (par exemple, niveau solo contre niveau multijoueur). Mais comment persister dans l'écran de chargement et éviter le problème de chargement potentiel avec Open Level ? Observons BP_ParrotGameInstance
Le chargement asynchrone du niveau résout le problème des ressources qui ne sont pas prêtes au moment où Open Level est appelé. Comme le mentionne le commentaire, le travail de l'écran de chargement est déjà pris en charge ici aussi. La configuration du plug-in est simple et vous pouvez définir le widget de l'écran de chargement à partir de Modifier > Paramètres du projet > Écran de chargement commun.
Prêtez également attention aux options de débogage. En testant ces éléments dans l'éditeur, vous aurez une meilleure idée de la façon dont l'écran de chargement se comportera dans une version empaquetée.
Vous avez maintenant des niveaux qui se chargent avec un écran de chargement. Vous pouvez en apprendre plus sur BP_ParrotGameInstance pour voir comment nous avons configuré l'ordre des niveaux solo et multijoueurs. La configuration de l'état du jeu est traitée dans la documentation Cadre de gameplay Unreal.