ATH de joueur

L'interface utilisateur (IU) d'un jeu comprend tous les éléments avec lesquels le joueur interagit, notamment les menus, les écrans de pause, l'inventaire, les boîtes de dialogue et l'affichage tête haute (ATH). L'ATH désigne les éléments de l'interface qui restent visibles à l'écran pendant le jeu, par exemple les PV du joueur, son équipement ou ses indicateurs d'objectif.

Maintenant que votre personnage est capable de ramasser des objets, vous allez apprendre à utiliser le système UMG (Unreal Motion Graphics) de l'Unreal Engine pour créer un ATH qui indique au joueur les clés qu'il a ramassées. Grâce à UMG, vous pouvez concevoir un ATH en faisant glisser les éléments d'interface dans un éditeur visuel et en les organisant. Vous saurez ainsi exactement ce que le joueur voit dans le jeu.

Avant de commencer

Assurez-vous de bien comprendre les concepts abordés dans les sections précédentes du cours Concevoir une aventure de type énigme :

• Les principes de base des blueprints, à savoir les variables, les fonctions, les graphiques d'événements et l'ajout de nœuds.

Vous aurez besoin des ressources suivantes décrites dans la page Créer une clé :

• Classe de blueprint BP_Key

• Classe de blueprint BP_AdventureCharacter

• Énumération Enum_KeyType

Créer un blueprint de widget

UMG inclut un type de blueprint spécial, appelé widget, qui permet de construire divers éléments d'interface. Pour commencer à créer votre ATH, créez une ressource Blueprint de widget. 

Pour créer un nouveau blueprint de widget, procédez comme suit :

1. Dans le navigateur de contenu, accédez à Contenu > AdventureGame > Concepteur > Blueprints, puis créez un dossier nommé Widgets pour y stocker vos ressources d'interface.

   

2. Dans le nouveau dossier Widgets, créez une nouvelle ressource en faisant un clic droit dans une zone vide du dossier et en sélectionnant Interface utilisateur > Blueprint de widget.

   

3. Dans la fenêtre Choisir la classe parente, cliquez sur Widget utilisateur.

   

4. Donnez un nom à votre widget. Dans ce tutoriel, nous utilisons WBP_PlayerHUD.

5. Double-cliquez sur le blueprint pour l'ouvrir.

Explorer l'éditeur de blueprints de widget

Les blueprints de widget s'ouvrent dans un éditeur de widget spécial qui dispose de deux modes : Concepteur et Graphique. Pour passer d'un mode à l'autre, utilisez les boutons situés en haut à droite de l'éditeur. 

En mode Concepteur, vous pouvez ajouter et modifier des parties individuelles de votre interface. 

Sur le côté gauche de l'éditeur de widgets, la palette contient tous les différents types de widgets que vous pouvez ajouter à votre interface. Le panneau Hiérarchie affiche la structure des composants de votre interface. L'ordre et l'imbrication des widgets dans ce panneau ont une incidence sur la disposition et le rendu de votre interface.

La grille au centre de la fenêtre constitue le concepteur visuel. Comme dans le graphique d'événements de votre blueprint, utilisez la molette de la souris pour effectuer un zoom avant et arrière, et faites un clic droit pour effectuer un panoramique.

Le niveau de zoom situé en haut à gauche de la grille se met à jour lorsque vous effectuez un zoom avant ou arrière. Le niveau Zoom 1:1 indique que vous visualisez votre interface à une échelle de 100%, ce qui vous permet de voir comment les éléments de votre interface apparaîtront dans le jeu sur un écran de cette résolution. Si un joueur exécute votre jeu sur un écran plus petit, l'Unreal Engine utilise la mise à l'échelle PPP pour adapter votre interface à cet écran.

Le coin inférieur gauche de la grille contient des informations sur le préréglage de taille d'écran actuel. Il s'agit de la taille d'écran sur laquelle votre modèle de widget est prévisualisé. Par défaut, elle est définie sur un écran de télévision 720p.

Commencer avec un panneau Zone de dessin

Dans l'onglet Palette, les widgets sont classés par type. Ceux de type panneau n'affichent rien à l'écran ; ce sont en quelque sorte des conteneurs qui contrôlent la disposition et le positionnement des widgets qui y sont placés. Les panneaux sont utiles pour mettre à l'échelle automatiquement l'interface afin qu'elle s'adapte aux différentes tailles d'écrans de télévision et résolutions de moniteur.

Les types de panneaux Zone de dessin sont ceux qui offrent le plus de flexibilité et sont parfaits pour les ATH. Alors que d'autres panneaux organisent les widgets selon une certaine disposition ou orientation, les panneaux Zone de dessin utilisent des ancres pour que vous puissiez placer les widgets exactement où vous le souhaitez à l'écran, afin que tous les éléments restent en place si la taille de l'écran change.

Pour créer un panneau Zone de dessin, procédez comme suit :

1. Dans l'onglet Palette, recherchez Zone de dessin et faites glisser un panneau Zone de dessin dans le panneau Hiérarchie au-dessus de [WBP_PlayerHUD] afin de l'imbriquer dessous.

   

   Un rectangle apparaît dans la zone du concepteur visuel, au milieu de la fenêtre.

Cette zone de dessin correspond au widget racine de l'interface. Chaque blueprint de widget doit disposer d'un widget racine (l'élément d'interface de niveau supérieur qui contient tous les autres widgets). Lorsque vous placez un autre widget dans la zone de dessin, une relation hiérarchique s'établit entre les deux, selon laquelle la zone de dessin est le parent et l'autre widget est l'enfant.

Par défaut, un panneau Zone de dessin mesure 1 920 x 1 080 pixels et représente l'ensemble de l'écran. Cette résolution courante est un bon point de départ ; nous vous conseillons donc de conserver cette taille. Au moment de l'exécution, l'Unreal Engine met l'interface à l'échelle pour l'adapter à l'écran du joueur.

Créer la disposition de votre ATH

Maintenant que vous disposez d'une zone de dessin, vous allez ancrer les zones correspondant aux PV et à l'inventaire du joueur dans le coin supérieur gauche de l'interface. 

Pour définir les zones de texte sur la zone de dessin, procédez comme suit :

1. Dans l'onglet Palette, recherchez Superposition et faites glisser le panneau Superposition dans la hiérarchie pour l'imbriquer en tant que widget enfant sous le panneau Zone de dessin.

   

   Les panneaux de superposition permettent de superposer plusieurs widgets dans un même espace. Ils permettent d'ajouter une image d'arrière-plan derrière des éléments d'interface, ou bien une étiquette de texte ou une icône fixe sur ces éléments. Pour cet ATH, vous allez ajouter un effet de flou derrière le texte de l'interface utilisateur afin d'en faciliter la lecture.

2. Sélectionnez l'option Superposition. Ce panneau est un enfant de la zone de dessin. Il obtient donc un point d'ancrage dans le coin supérieur gauche de la zone de dessin.

   

   Dans le cadre de ce tutoriel, laissez ce point d'ancrage ici. Néanmoins, dans le panneau Détails, vous pouvez utiliser la propriété Ancres pour déplacer le point d'ancrage.

   

3. Dans le panneau Détails, définissez les paramètres Position X et Position Y sur 20. Ces valeurs indiquent le nombre de pixels qui séparent le panneau de superposition du point d'ancrage. L'ajout d'un décalage améliore l'apparence de l'interface et empêche toute coupure du texte sur le bord de l'écran.

4. Pour définir la zone d'affichage du texte de votre interface, faites glisser les poignées situées sur la boîte englobante du panneau de superposition pour la redimensionner jusqu'à ce qu'elle fasse environ 250 pixels de large sur 200 pixels de haut.

   Vous pouvez également accéder au panneau Détails, puis utiliser les paramètres Taille X et Taille Y pour redimensionner le panneau.

   

   Cette zone affiche les PV du joueur et le nom des clés que le joueur a ramassées.

5. Dans l'onglet Palette, recherchez un panneau Boîte verticale et faites-le glisser pour le convertir en enfant sous Superposition. Ce type de panneau ordonne verticalement les éléments d'interface qui s'y trouvent, comme dans une colonne de tableau.

6. Ajoutez deux panneaux Boîte horizontale en tant qu'enfants du panneau Boîte verticale. Les boîtes horizontales ordonnent horizontalement les éléments d'interface qui s'y trouvent, comme dans une ligne de tableau. L'une des boîtes horizontales est un conteneur qui renferme les informations de PV du joueur et l'autre un conteneur avec l'étiquette Clés ramassées.

   

Les boîtes verticales et horizontales sont des widgets de disposition. Ces panneaux sont similaires à des organiseurs invisibles. Ils n'ont pas de cadre visible dans le concepteur et sont automatiquement redimensionnés en fonction de leur contenu.

Chaque type de boîte aligne et organise le texte que vous ajoutez à l'interface :

• Dans la mesure où le panneau de superposition permet le chevauchement, la boîte verticale force les boîtes horizontales à s'aligner verticalement au lieu de s'empiler les unes sur les autres.

• Vous obtenez deux zones de texte dans la première ligne. Ajoutez deux boîtes horizontales pour contrôler l'alignement et l'espace de chaque zone de texte dans la ligne.

Ajouter des étiquettes de texte

Maintenant que vous avez défini la structure de l'ATH, vous pouvez ajouter du texte statique qui ne change pas en fonction de ce qui se passe dans le jeu. 

Vous devez pour cela placer une étiquette PV devant les PV du joueur et une étiquette Clés ramassées devant la liste des noms de clés. Vous allez également ajouter un texte d'espace réservé pour la valeur de PV actuelle du joueur. Dans une section ultérieure de ce tutoriel, vous remplacerez cet espace réservé par une variable afin d'indiquer le nombre de PV du joueur.

Procédez comme suit pour ajouter des étiquettes de texte relatives aux PV du joueur :

1. Dans l'onglet Palette, recherchez Texte et faites glisser deux widgets de texte dans la hiérarchie en tant qu'enfants de la première boîte horizontale. 

   

   Assurez-vous d'ajouter un widget de texte et non une zone de texte.

2. Sélectionnez le premier widget de texte sous Boîte horizontale. Dans le panneau Détails, accédez à la section Emplacement (emplacement de boîte horizontale), puis définissez l'option Marge intérieure sur 5. Le texte est ainsi défini à 5 pixels du bord de la boîte horizontale.

   

3. Dans la section Contenu, définissez l'option Texte sur PV :.

   

4. Dans la section Apparence, cliquez sur le nuancier à côté de Couleur et opacité, puis choisissez la couleur de votre texte. Dans ce tutoriel, nous utilisons le vert (sRVB hexadécimal = 78FF3FFF).

   

5. Sélectionnez le deuxième widget de texte. En haut du panneau Détails, renommez le widget TextBlock en txtHP. Plus loin dans ce tutoriel, vous devrez référencer ce widget. Par conséquent, donnez-lui un nom de variable unique et descriptif.

   

6. Modifiez la valeur du paramètre Marge intérieure sur 5 et celle du paramètre Texte sur 100.

   

Pour ajouter une étiquette de texte relative aux clés que le joueur a ramassées, procédez comme suit :

1. Dans l'onglet Palette, faites glisser un widget de texte pour le convertir en enfant de la deuxième boîte horizontale.

2. Définissez sa marge intérieure sur 5 et son texte sur Clés ramassées :.

3. Pour Couleur et opacité, choisissez une couleur. Dans ce tutoriel, nous utilisons la couleur orange (sRVB hexadécimal = FF6200FF).

Maintenant que chaque boîte horizontale contient du texte, vous pouvez apprécier la structure flexible de cette disposition. Si vous sélectionnez une boîte horizontale ou un widget de texte, des boutons fléchés apparaissent sur les bords de ce widget. Cliquez sur les flèches pour réorganiser les widgets. Les options de marge intérieure et d'alignement des widgets de texte vous permettent de contrôler l'espacement entre les éléments d'une même ligne et de plusieurs lignes différentes.

Ajouter un espace pour une variable

Dans un jeu, la plupart des ATH de joueur doivent s'actualiser pendant la partie en fonction des différentes actions, notamment les dégâts, la réception ou l'utilisation d'objets, ou l'obtention d'un bonus. Pour ce faire, vous allez connecter l'ATH à une variable qui assure le suivi des clés du joueur, de façon à ce que l'ATH se mette à jour lorsque le joueur les ramasse.

Procédez comme suit pour ajouter une zone de texte d'entrée afin d'afficher la liste des clés :

1. Dans l'onglet Palette, recherchez une zone de texte (multiligne) et faites-la glisser pour la convertir en enfant de la boîte verticale. Ce widget d'entrée accepte plusieurs lignes de texte saisi par l'utilisateur. Vous pouvez cependant utiliser une logique de graphique d'événements pour ajouter du texte à ce widget lorsque l'utilisateur ramasse une clé.

   

2. Dans l'onglet Hiérarchie, sélectionnez la zone de texte. Dans le panneau Détails, renommez-la txtKeys.

   

   Vous pouvez également afficher et modifier le nom d'un widget en faisant un clic droit dessus dans la hiérarchie.

3. Dans le concepteur visuel, la zone de texte d'entrée est dotée d'un arrière-plan par défaut, que vous devez supprimer :

   1. En haut du panneau Détails, développez Marge intérieure, puis définissez les valeurs suivantes pour insérer un retrait dans la zone de texte :

      • À gauche : 15

      • En haut, À droite et En bas : 4

      

   2. Dans la section Style, développez Style > Image d'arrière-plan normale et cliquez sur le nuancier à côté de Teinte.

      

   3. Définissez sRVB hexadécimal sur FFFFFF00 pour rendre l'arrière-plan transparent, puis cliquez sur OK.

      

4. Ce widget n'ayant pas de style de police par défaut, vous devez définir les propriétés de la police vous-même. Dans la section Style, développez Style de texte > Police et définissez les paramètres suivants :

   1. Définissez Famille de polices sur Roboto.

   2. Définissez Police de caractères sur Gras.

   3. Définissez Taille sur 24.

   4. Choisissez le blanc comme couleur.

      

Sélectionnez txtKeys ; vous constatez qu'en haut du panneau Détails, l'option Est variable est activée. Dans la mesure où l'utilisateur est censé saisir du texte dans les zones de texte, celles-ci sont automatiquement configurées comme variables. Si l'option Est variable est activée, vous pouvez référencer et utiliser txtKeys dans le graphique d'événements du blueprint de widget. 

Superposer un effet spécial

Vous pouvez faciliter la lecture de l'ATH en floutant l'arrière-plan de la boîte englobante de la superposition. Utilisez la fonctionnalité de mise en couches du panneau Superposition pour placer un effet de flou derrière les boîtes verticales et horizontales.

Pour utiliser un widget afin de flouter la zone de l'écran derrière votre texte d'ATH, procédez comme suit :

1. Dans l'onglet Palette, recherchez Flou et faites glisser un widget Flou d'arrière-plan dans la hiérarchie en tant qu'enfant de la superposition.

2. L'éditeur ajoute le flou d'arrière-plan en bas de la liste. Faites-le glisser pour qu'il devienne le premier enfant sous la superposition, au-dessus de la boîte verticale.

   

3. Dans le panneau Détails, accédez à la section Apparence, puis définissez l'option Force du flou sur 2.

   L'utilisation d'effets de flou importants implique un coût d'exécution plus élevé au niveau du processeur graphique. Pour obtenir une autre solution moins coûteuse, vous pouvez également utiliser un widget de bordure opaque ou appliquer une texture à l'aide d'un widget d'image.  

4. Faites en sorte que l'effet remplisse la totalité du widget de superposition :

   1. Dans la section Emplacement (emplacement de superposition), à côté de Alignement horizontal, cliquez sur Remplir horizontalement.

   2. À côté de Alignement vertical, sélectionnez Remplir verticalement.

   

Voici un exemple d'affichage de texte d'interface sans arrière-plan flou, mais avec un effet de flou exagéré :

Créer la logique de l'ATH

Pour terminer la création de votre blueprint de widget, vous devez créer la logique permettant d'afficher le nom de chaque clé ramassée par le joueur. 

Configurer les blocs de construction pour le ramassage des clés

Avant de commencer à créer la logique permettant d'ajouter des noms de clé à l'ATH, vous devez disposer des éléments suivants :

• Une variable de matrice qui suit les clés du joueur.

• Une fonction que le blueprint de votre personnage peut appeler lorsque le joueur trouve une nouvelle clé.

Pour déclencher l'exécution de la logique de l'ATH à partir d'autres blueprints, vous allez utiliser une fonction au lieu du graphique d'événements. La fonction obtient la clé que le joueur a ramassée, l'enregistre dans la variable nommée et saisit les noms des clés dans cette variable, dans la zone txtKeys.

Pour ajouter une variable et une fonction qui effectuent le suivi des clés du joueur, procédez comme suit :

1. Dans le coin supérieur droit de la fenêtre, cliquez sur Graphique pour modifier le graphique d'événements du blueprint de widget. Ce graphique fonctionne de la même manière que les autres blueprints que vous avez utilisés jusqu'à présent.

   

   Votre variable txtKeys est répertoriée dans le panneau sur le côté gauche de la fenêtre.

2. Créez une fonction qui exécute l'intégralité de la logique de l'ATH lorsqu'elle est appelée :

   1. Dans la section Fonctions, cliquez sur le bouton plus (+) pour ajouter une fonction. Un nouvel onglet correspondant à cette fonction apparaît au-dessus du graphique.

   2. Nommez la fonction fnAddKeyHUD.

   3. Une fois la fonction sélectionnée, accédez au panneau Détails puis, dans la section Entrées, cliquez sur + pour ajouter une nouvelle entrée de fonction.

      

   4. Nommez l'entrée KeyType et définissez son type sur Type de clé d'énum.

      

3. Dans le panneau Mon blueprint, créez une variable de matrice pour stocker les clés du joueur :

   1. Dans la section Variables, cliquez sur le bouton + pour créer une nouvelle variable.

   2. Nommez-la KeysToDisplay.

   3. Définissez son type sur Type de clé d'énum. Il s'agit de l'énumération que vous avez créée avec les options de type de clé rouge, jaune et bleu.

   4. Faites un clic droit sur le type de variable pour le convertir en matrice. Vous pouvez également utiliser le panneau Détails pour modifier le type de conteneur.

      

      Vous pourriez transmettre la matrice des clés du blueprint de personnage dans la fonction au lieu de la recréer à cette étape, mais le suivi indépendant des clés dans l'ATH vous offre plus de flexibilité si vous souhaitez exécuter une logique propre à l'ATH, comme l'affichage d'images pour chaque clé.

4. Pour afficher les noms des clés dans la zone de texte multiligne, vous devez les combiner dans une chaîne.

   Dans la section Variables locales, cliquez sur le bouton + pour ajouter une nouvelle variable. Nommez-la Keys et définissez son type sur Chaîne et son type de conteneur sur Unique.

   

Afficher les clés du joueur à l'écran

Vous pouvez maintenant ajouter une logique à la fonction fnAddKeyHUD. 

Une fois cette fonction appelée, elle commence par un type de clé rouge, jaune ou bleu. Vous devez ajouter ce type de clé à votre matrice KeysToDisplay, ajouter toutes les clés à votre variable de chaîne, puis convertir cette chaîne en texte pour pouvoir l'afficher à l'écran.

Commencez par créer la matrice KeysToDisplay en procédant comme suit :

1. Dans la vue Graphique du blueprint de widget, accédez à l'onglet fnAddKeyHUD.

2. Pour créer la matrice KeysToDisplay, ajoutez un nœud Add Unique après le nœud d'entrée de la fonction.

3. Pour sa matrice cible, connectez une référence à la variable KeysToDisplay.

4. Pour la deuxième entrée, connectez l'entrée de fonction Type de clé.

   

   Le nœud Add Unique prend une matrice et une nouvelle valeur et ajoute cette valeur à la matrice (si elle ne s'y trouve pas déjà). Ce nœud permet de n'afficher qu'une seule fois les noms des clés sur l'ATH.

Pour combiner toutes les clés ramassées dans la chaîne Clés, procédez comme suit :

1. Parcourez en boucle chaque élément de la matrice KeysToDisplay. Après le nœud Add Unique, ajoutez un nœud For Each Loop.

2. Connectez une autre référence KeysToDisplay à l'entrée Matrice de la boucle.

   

   Pour chaque objet (ou élément) de la matrice, ou chaque itération de la boucle, vous devez convertir cet élément en chaîne, l'ajouter à la variable de chaîne Keys et ajouter une nouvelle ligne après ce nom de clé (comme si vous appuyiez sur la touche Entrée de votre clavier). 

   Gardez à l'esprit que toute logique connectée à la broche d'exécution Corps de boucle s'exécute une fois par objet de matrice. Une fois la boucle terminée, l'exécution passe par la broche Terminé.

3. Faites un clic droit dans le graphique de nœud, recherchez Append String et ajoutez un nœud Append de type chaîne. Les entrées de chaîne sont combinées pour former une valeur de retour de chaîne unique.

4. Configurez le nœud Append pour qu'il récupère le contenu actuel de la variable Keys, ajoutez le nouvel élément de matrice, puis ajoutez un saut de ligne :

   1. Pour son entrée A, connectez une référence à Keys.

   2. Pour son entrée B, connectez la broche Élément de matrice du nœud de boucle. L'Unreal Engine ajoute un nœud Enum to String pour convertir la valeur.

   3. Cliquez sur Ajouter une broche pour ajouter une entrée C. Cliquez sur la zone de texte et appuyez sur Maj + Entrée pour ajouter une nouvelle ligne.

      

5. Faites glisser la broche Valeur de retour du nœud Append et ajoutez un nœud Set Keys.

6. Connectez la broche de sortie d'exécution de la boucle au nœud Set Keys.

   

Une fois le corps de la boucle terminé, vous obtenez une longue chaîne avec les noms de toutes les clés du joueur.

Pour transmettre la chaîne Clés à la zone de texte TxtKeys de l'ATH, procédez comme suit :

1. Faites glisser la broche d'exécution Terminé de la bouche et ajoutez un nœud SetText (Multi-Line Text Box).

   Si vous ne trouvez pas ce nœud, désactivez l'option Sensible au contexte dans le coin supérieur droit de la liste des actions du nœud. 

   

   Le nœud SetText reçoit l'entrée de type texte et l'affiche dans une zone de texte cible.

2. Configurez le nœud SetText (Multi-Line Text Box) :

   1. Pour Cible, connectez une référence à TxtKeys.

   2. Pour Dans le texte, connectez une référence à Keys. L'Unreal Engine ajoute un nœud To Text (String), qui convertit la chaîne Clés en texte. 

      

      Le texte est un type de données distinct. Alors que les chaînes sont destinées à la programmation et au débogage, le texte s'adresse à l'utilisateur et prend en charge la traduction et la mise en forme.

3. Compilez et enregistrez votre blueprint.

Votre fonction fnAddKeyHUD finale doit ressembler à ceci :

Votre ATH est prêt ! Vous devez maintenant l'ajouter à votre personnage joueur pour qu'il s'affiche à l'écran lorsque vous lancez le jeu.

Mettre à jour le personnage joueur

Pour terminer la configuration de votre ATH, vous devez ajouter une logique à votre blueprint de personnage, en vue d'ajouter le widget d'ATH au démarrage du jeu et le mettre à jour lorsque le joueur ramasse une clé. 

Appeler FnAddKeyHUD depuis le blueprint de personnage

Reliez la logique de clé dans BP_AdventureCharacter à la logique de l'ATH pour que l'ajout d'une clé au joueur ajoute également une clé à l'ATH. 

Pour déclencher l'ATH lorsque le joueur récupère une clé, procédez comme suit :

1. Ouvrez votre blueprint BP_AdventureCharacter. Dans le panneau Mon blueprint, sous la section Variables, cliquez sur le bouton + pour ajouter une nouvelle variable.

2. Nommez la variable ATH et définissez son type sur ATH du joueur WBP (référence d'objet). 

   

   Le widget d'ATH que vous allez créer sera ainsi stocké dans le graphique d'événements du personnage.

3. Accédez à la section du graphique d'événements dans laquelle l'événement fnBPIAddKey ajoute une nouvelle clé à la matrice HeldKeys du joueur.

   

   Dans la section Graphiques du panneau Mon blueprint, développez Graphique d'événements et double-cliquez sur un événement pour accéder à cette zone du graphique.

4. Après le nœud Add, reliez un nœud FnAddKeyHUD.

5. Configurez le nœud FnAddKeyHUD :

   1. Pour Cible, reliez une référence à la variable ATH.

   2. Pour Type de clé, reliez la broche à la broche Type de clé du nœud Event fnBPIAddKey.

      

   La nouvelle clé du joueur est récupérée et appelle la fonction FnAddKeyHUD dans le blueprint de widget d'ATH.

6. Enregistrez et compilez votre blueprint.

Afficher l'ATH au démarrage du jeu

Pour créer un ATH lorsque le joueur apparaît dans le niveau, procédez comme suit :

1. Recherchez un espace vide dans le graphique d'événements de votre personnage et ajoutez un nœud Event Possessed. Il s'agit de l'événement qui déclenche une diffusion lorsque le joueur prend le contrôle du personnage joueur ou le possède.

2. Faites un clic droit sur le nœud Event Possessed, puis sélectionnez Ajouter une fonction d'appel du parent pour vérifier que la logique Event Possessed de la classe du personnage parent continue de s'exécuter. Reliez la broche d'exécution et la broche Nouveau contrôleur de chaque nœud.

   

   Dans le coin supérieur droit de votre blueprint de personnage, vous constatez qu'il est dérivé de la classe de blueprint BP_FirstPersonCharacter. En d'autres termes, votre personnage utilise une logique lui appartenant et appartenant à son parent. Si vous ajoutez dans votre blueprint de personnage un événement qui existe déjà dans le parent, il est remplacé. Lorsque vous remplacez un événement, assurez-vous d'appeler également la version du parent afin que sa logique s'exécute avant d'ajouter le vôtre.

   

3. Pour créer l'ATH, reliez un nœud Create Widget et définissez sa classe sur ATH du joueur WBP. Une instance de votre blueprint de widget est ainsi créée.

4. Après le nœud Create Widget, ajoutez un nœud Set HUD et reliez les deux broches. Cela permet d'enregistrer le nouveau blueprint de widget dans votre variable.

   

5. Pour afficher l'objet d'ATH à l'écran, ajoutez un nœud Add to Viewport. Définissez sa cible sur la variable ATH.

   

   Bien que vous puissiez relier le nœud Create Widget directement au nœud Add to Viewport, dans ce tutoriel, nous séparons la création du widget de son affichage à l'écran. Cela est utile si vous voulez que le widget soit prêt, mais souhaitez le masquer jusqu'à un certain moment, par exemple l'affichage d'une alerte de combo après que le joueur a réussi plusieurs coups. Si un widget comporte un grand nombre d'animations, d'effets et de sons, il est préférable de le charger à l'avance pour éviter toute latence pendant le jeu.

6. Compilez et enregistrez votre blueprint.

Votre nouvelle logique de blueprint de personnage doit ressembler à ceci :

Tester l'ATH 

Cliquez sur Jouer pour tester votre jeu. Lorsque le jeu commence, les étiquettes PV et Clés ramassées du joueur doivent s'afficher dans l'ATH. Lorsque vous entrez en contact avec une clé, le nom de celle-ci est ajouté à l'ATH.

Ajustez l'ATH en cas de besoin. Voici quelques tests que vous pouvez effectuer : 

• Ajustez la taille du panneau de superposition.

• Modifiez la taille et le style de police.

• Modifiez le placement vers d'autres zones que le coin supérieur gauche.

• Ajoutez différents widgets pour les arrière-plans, comme des textures ou des matériaux.

Pour améliorer votre ATH, essayez de remplacer les étiquettes de texte par des icônes. Pour ce faire, importez une image dans le navigateur de contenu et ajoutez-la à votre ATH avec un widget d'image. Pour en savoir plus sur l'importation de ressources dans l'Unreal Editor, consultez la page Importing Assets Directly.

Concevoir des ATH efficaces 

Voici quelques stratégies de conception alternatives pour créer un ATH net et convivial pour le joueur.  

Facilitez la lecture :

Utilisez un texte contrasté, des polices claires et des tailles de police appropriées. Assurez-vous que votre ATH est lisible à une distance normale de l'écran, mais aussi lorsque le joueur se déplace dans un environnement animé et pas seulement lorsqu'il est immobile.

Faites preuve de clarté et de concision :

Affichez uniquement les informations dont le joueur a besoin sur le moment et masquez ou réduisez les informations moins pertinentes jusqu'à ce qu'elles soient nécessaires. N'oubliez pas cependant que le joueur doit toujours pouvoir accéder en un seul coup d'œil aux informations dont il a besoin afin de pouvoir prendre des décisions en toute confiance. 

Ajoutez des informations : 

Lorsque l'ATH se met à jour (par exemple, après le ramassage d'une clé), utilisez une brève animation, un changement de couleur ou un son pour informer le joueur de la modification.

Établissez la priorité des informations à l'aide des paramètres de taille et de position :

Les informations importantes doivent ressortir : utilisez une police de plus grande taille ou des couleurs vives, ou placez ces informations en haut à gauche ou au centre, là où les joueurs regardent naturellement en premier. 

Suivant

Dans la prochaine section, vous allez continuer à ajouter d'autres éléments de jeu à votre niveau et apprendre à programmer un interrupteur pour déclencher une action lorsque le joueur l'actionne.

• 

  Énigmes : interrupteurs et cubes

  Dans la première partie de la section dédiée aux énigmes de plateforme, utilisez les matériaux, la physique et les blueprints pour créer un interrupteur activé par un cube.