Dans cet épisode, nous quittons la console de débogage pour offrir à nos joueurs une interface visuelle propre. Nous allons apprendre à créer un Widget Blueprint pour afficher le score en temps réel à l’écran, une étape essentielle pour transformer votre prototype en un véritable jeu.

Résumé de la mise en place#

• Création du Widget : Utilisation du menu User Interface > Widget Blueprint (nommé WD_Score par convention).
• Configuration visuelle : Ajout d’un élément Text dans le designer, avec un réglage précis des ancres (Anchors) pour garantir la compatibilité avec toutes les résolutions d’écran.
• Binding de données : Création d’une fonction de liaison (Binding) pour mettre à jour dynamiquement le texte en fonction de la variable Points stockée dans le personnage.
• Manipulation de chaînes : Utilisation du node Build String (Int) pour concaténer le label “Score : " avec la valeur numérique de notre variable.
• Affichage à l’écran : Utilisation de l’événement Event Begin Play dans le Character Blueprint pour instancier le widget via Create Widget et l’ajouter au viewport avec Add to Viewport.
• Nettoyage : Suppression des anciens Print String dans le Character pour une interface épurée.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions d’Unreal Engine aient évolué (UE5), les principes fondamentaux de l’UI restent identiques :

Dans cet épisode, nous finalisons l’interface utilisateur de notre jeu en rendant le score dynamique. Jusqu’ici, bien que la logique de collecte des pièces fonctionne en arrière-plan, le joueur ne reçoit aucun retour visuel. Nous allons apprendre à utiliser les “Bindings” dans les Widget Blueprints pour lier la valeur de notre variable Score à un élément textuel de notre interface.

Résumé de la mise en place#

• Accès au Widget : Ouverture du HUD_Score dans le dossier HUD.
• Création du Binding : Utilisation du bouton “Bind” dans les détails du composant texte pour générer une fonction de mise à jour automatique.
• Logique de récupération :
  • Utilisation d’un Cast To ThirdPersonCharacter pour accéder aux données du joueur.
  • Utilisation de Get Player Character pour définir l’objet source du cast.
  • Récupération de la variable Score via un Get.
• Conversion automatique : Unreal Engine gère nativement la conversion de l’entier (Integer) vers le format texte (Text) lors de la connexion au nœud Return Value.
• Test et itération : Vérification en jeu de la mise à jour du score lors de la collecte et ajustement du level design pour encourager l’exploration.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions récentes d’Unreal Engine (UE5) aient introduit des systèmes comme les Common UI ou les Data Bindings plus avancés, la méthode présentée ici reste un pilier fondamental pour les débutants :

Dans ce nouvel épisode de notre série sur Unreal Engine 4, nous allons mettre en place la porte d’entrée de votre jeu : le menu principal. L’objectif est de créer une interface utilisateur (UI) fonctionnelle permettant de lancer la partie et de préparer l’accès futur à un système de classement (leaderboard).

Résumé des étapes clés#

• Organisation des niveaux : Renommage de votre carte de jeu actuelle en Main Map et création d’un nouveau niveau dédié au Menu Principal.
• Configuration du projet : Ajustement des Project Settings pour définir la carte de démarrage par défaut.
• Création du Widget : Utilisation de l’éditeur de Widget pour concevoir le menu avec deux boutons : “Jouer” et “Classement”.
• Design et ancres : Importance de bien configurer les ancres (anchors) pour que votre interface reste cohérente sur différentes résolutions d’écran.
• Optimisation des assets : Rappel crucial sur l’utilisation de textures dont les dimensions sont des puissances de 2 (ex: 256x256, 512x1024) pour éviter des problèmes de rendu, surtout sur mobile.
• Programmation du menu :
  • Utilisation du Level Blueprint pour afficher le widget au lancement (Create Widget + Add to Viewport).
  • Activation du curseur de la souris via Set Show Mouse Cursor (en décochant Context Sensitive pour trouver la fonction).
  • Liaison du bouton “Jouer” à l’action Open Level.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions d’Unreal Engine aient évolué, les fondamentaux abordés ici restent le socle de toute interface utilisateur dans le moteur :

Dans cet épisode, nous allons finaliser l’expérience utilisateur en créant un écran de “Game Over” fonctionnel. Lorsqu’un joueur perd, il est crucial de lui offrir un retour visuel clair, d’afficher son score final et de lui proposer une option pour retourner au menu principal ou attendre une redirection automatique.

Résumé de la mise en place#

• Création du Widget : Conception d’un nouveau User Widget (WBP_GameOver) avec un texte de défaite, l’affichage dynamique du score et un bouton de retour.
• Gestion des ancres : Rappel sur l’importance de bien ancrer vos éléments UI pour garantir une compatibilité avec toutes les résolutions d’écran.
• Logique de redirection : Utilisation de l’événement Event Construct couplé à un Delay pour automatiser le retour au menu principal après 15 secondes.
• Affichage dynamique du score : Utilisation du Cast To vers votre Character pour récupérer la variable de score et l’injecter dans le widget via un Set Text.
• Nettoyage de l’interface : Utilisation de la fonction Remove from Parent pour supprimer l’affichage du score en cours de jeu avant d’afficher l’écran de Game Over, évitant ainsi les superpositions visuelles.

Ce qui reste d’actualité aujourd’hui#

• La modularité des Widgets : La méthode consistant à créer des widgets séparés pour chaque état du jeu (Menu, HUD, Game Over) reste la norme pour garder un projet propre et maintenable.
• Le Cast To : Bien que dans des projets complexes on privilégie souvent les Interfaces ou l’Event Dispatching pour éviter les dépendances directes, le Cast To reste l’outil le plus rapide et le plus pédagogique pour débuter sur UE4.
• Gestion du cycle de vie : L’utilisation de Remove from Parent est toujours la méthode standard pour gérer la destruction des éléments d’interface utilisateur en Blueprint.
• UX et monétisation : L’idée d’ajouter un délai sur l’écran de fin de partie est une pratique courante dans le jeu mobile pour laisser le temps à une publicité interstitielle de se charger ou d’être visionnée.

Dans cet épisode, nous posons les bases techniques nécessaires à la mise en place d’un système de sauvegarde persistante. Avant de manipuler les données, il est indispensable de créer une interface utilisateur (UI) permettant au joueur d’interagir avec le système de sauvegarde. Nous allons voir comment créer un menu simple et gérer son affichage via le Blueprint de votre personnage.

Résumé de la mise en place#

• Création du Widget : Conception d’un menu basique contenant deux boutons (sans logique pour le moment).
• Logique d’affichage (Flip Flop) : Utilisation du node Flip Flop pour alterner entre l’ouverture et la fermeture du menu à chaque pression de la touche ‘P’.
• Gestion des variables : Stockage du widget dans une variable (W_Menu) pour pouvoir le manipuler (l’ajouter au viewport ou le supprimer) sans avoir à le recréer.
• Interaction souris : Utilisation du node Set Show Mouse Cursor pour permettre au joueur de cliquer sur les boutons, en ciblant correctement le Player Controller.
• Nettoyage : Utilisation de Remove from Parent pour libérer l’interface de l’écran.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions d’Unreal Engine aient évolué, les principes fondamentaux abordés ici restent des piliers du développement :