21. Créer une interface utilisateur (UI) pour afficher votre score

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 :

21. Implémenter le système de ramassage et de score

Dans cet épisode, nous passons à l’étape cruciale de l’interaction : transformer notre objet statique en un élément de gameplay fonctionnel. Nous allons apprendre à détecter la collision entre le joueur et la pièce, mettre à jour une variable de score et supprimer l’objet de la scène.

Résumé des étapes clés#

  • Détection de collision : Utilisation de l’événement Event Actor Begin Overlap dans le Blueprint de la pièce.
  • Cast vers le personnage : Utilisation du nœud Cast To ThirdPersonCharacter pour s’assurer que seule la collision avec le joueur déclenche l’action.
  • Gestion du score :
    • Récupération de la valeur actuelle via Get Score.
    • Addition de la valeur (via Integer + Integer) pour permettre une flexibilité sur le gain de points.
    • Mise à jour de la variable via Set Score.
  • Feedback visuel : Utilisation temporaire de Print String pour vérifier le bon fonctionnement du compteur.
  • Nettoyage : Utilisation de Destroy Actor pour supprimer la pièce de la scène une fois ramassée.
  • Level Design : Astuces pour dupliquer et disposer les pièces dans le niveau tout en conservant les propriétés de taille personnalisées.

Ce qui reste d’actualité aujourd’hui#

Bien que cet épisode utilise les bases d’Unreal Engine 4, les concepts abordés sont fondamentaux et toujours valides dans Unreal Engine 5 :

22. Afficher le score du joueur dans l'interface (HUD)

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 :

22. Création du menu principal et gestion de l''interface

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 :

23. Création de l''écran de Game Over et gestion du score

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.

© 2026 - Créé avec ❤️ sous Hugo & Relearn.

24. Ajouter des effets sonores lors du ramassage d''objets

Dans cet épisode, nous allons finaliser l’interaction de ramassage de nos pièces en ajoutant un retour audio immédiat. Au lieu d’un simple changement de score visuel, le joueur bénéficiera d’un feedback sonore spatialisé, renforçant ainsi le “game feel” de notre projet. Nous verrons comment utiliser la position de l’acteur lui-même pour déclencher ce son.

Résumé des étapes clés#

  • Accès au Blueprint : Ouvrez le Blueprint ZonePièce pour modifier la logique existante.
  • Insertion du nœud : Entre le Set Score et le Destroy Actor, insérez un nœud Play Sound at Location.
  • Sélection du son : Choisissez votre asset audio (ex: “Pièce”) dans la bibliothèque.
  • Spatialisation : Utilisez le nœud Get Actor Location avec la cible Self pour que le son soit émis précisément à l’emplacement de la pièce dans le monde.
  • Compilation et test : Compilez le Blueprint et testez en jeu pour vérifier que le son se déclenche bien lors de la collision.
  • Optimisation : Ajustez les délais (ex: temps d’attente de victoire) pour affiner le rythme de votre jeu.

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 :

26. Création et intégration de matériaux complexes pour Landscape

Dans cet épisode, nous abordons une étape cruciale pour donner vie à votre environnement : l’habillage de votre terrain. Si un matériau simple suffit pour des objets basiques, le Landscape demande une approche plus dynamique. Nous allons voir comment importer des matériaux complexes via une astuce de copier-coller de nœuds Blueprint et comment configurer le “Layer Painting” pour gérer automatiquement les textures selon l’inclinaison et l’altitude.

Résumé de l’épisode#

  • Création de base : Mise en place d’un matériau simple via un Vector Parameter pour tester l’application sur le Landscape.
  • L’astuce du copier-coller : Utilisation du format texte des nœuds Blueprint pour importer des matériaux complexes sans passer par la migration de fichiers .uasset.
  • Matériaux dynamiques : Explication du fonctionnement des masques et des interpolations (Linear/Non-linear) pour mélanger automatiquement les textures (herbe, roche, neige, sable).
  • Configuration du Landscape : Utilisation de l’onglet “Paint” pour créer des Layer Info et permettre au moteur de calculer le rendu des différentes couches.
  • Sculpting : Ajustement du relief pour observer la transition automatique des textures en fonction de la hauteur et de la pente.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions récentes d’Unreal Engine (UE5) aient introduit le système de Landscape Layered Materials et les Virtual Textures, les concepts abordés ici restent fondamentaux :

28. Création du Menu Principal et gestion de l''interface

Dans cet épisode, nous abordons une étape cruciale pour tout projet de jeu vidéo : la création du menu principal. Nous allons voir comment configurer une scène dédiée, concevoir une interface utilisateur (UI) avec le système UMG (Unreal Motion Graphics) et rendre les boutons interactifs pour naviguer dans votre jeu.

Résumé des étapes clés#

  • Création de la Map Menu : Mise en place d’une nouvelle carte vide dédiée exclusivement à l’affichage du menu.
  • Conception du Widget Blueprint : Utilisation de l’outil UMG pour ajouter une image de fond et des boutons (Jouer, Quitter, Plein écran).
  • Gestion des ancres (Anchors) : Configuration des ancres pour assurer une mise en page responsive, quel que soit le format d’écran.
  • Programmation du Level Blueprint : Affichage du widget au lancement de la scène via Create Widget et Add to Viewport.
  • Activation du curseur : Utilisation du node Set Show Mouse Cursor pour permettre au joueur d’interagir avec les éléments de l’interface.
  • Logique des boutons : Implémentation des événements OnClicked pour charger les niveaux (Open Level) ou quitter l’application (Execute Console Command).

Ce qui reste d’actualité aujourd’hui#

Bien que les versions récentes d’Unreal Engine (UE5) aient introduit des améliorations dans l’éditeur UMG, les fondamentaux présentés ici restent parfaitement valides :

29. Créer un bouton de bascule Plein Écran / Fenêtré

Dans cet épisode, nous allons apprendre à gérer l’affichage de notre jeu en permettant aux joueurs de basculer dynamiquement entre le mode “Plein écran” et le mode “Fenêtré”. Pour ce faire, nous utiliserons les Blueprints pour manipuler les variables d’état et les commandes de console intégrées à Unreal Engine 4.

Résumé de la mise en place#

  • Gestion d’état : Création d’une variable booléenne PleinEcran (par défaut à true) pour suivre le mode d’affichage actuel.
  • Logique de bascule : Utilisation d’un nœud Branch pour tester la valeur de la variable à chaque clic sur le bouton.
  • Mode Fenêtré : Utilisation de la commande r.SetRes 1280x720w pour forcer une résolution spécifique en mode fenêtré.
  • Mode Plein Écran dynamique :
    • Récupération des résolutions supportées via Get Supported Fullscreen Resolutions.
    • Extraction de la résolution maximale via le dernier index du tableau (Last Index).
    • Utilisation du nœud Append pour construire dynamiquement la commande r.SetRes avec les valeurs X et Y récupérées, suivie du paramètre f pour le plein écran.
  • Mise à jour de l’état : Utilisation du nœud Set pour inverser la valeur de la variable PleinEcran après chaque changement.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions récentes d’Unreal Engine (UE5) proposent des nœuds plus modernes comme Set Game User Settings, la logique présentée ici reste fondamentale pour comprendre :

30. Créer un menu de victoire dans Unreal Engine 4

Dans cet épisode, nous allons finaliser l’expérience utilisateur en ajoutant un écran de victoire. Lorsqu’un joueur atteint la zone de fin de niveau, il est crucial de lui offrir un retour visuel clair avec des options pour continuer à jouer ou quitter l’application. Nous allons voir comment créer ce Widget, le lier à notre zone de victoire et gérer les interactions à la souris.

Résumé de l’implémentation#

  • Création du Widget : Création d’un nouveau Widget Blueprint nommé HUD_Victoire dans le dossier UI.
  • Design : Mise en place d’une image de fond et de deux boutons (Rejouer et Quitter).
  • Logique des boutons :
    • Quitter : Utilisation de la commande Execute Console Command avec la commande quit.
    • Rejouer : Utilisation de Open Level pour charger la scène du menu principal.
  • Déclenchement : Modification du Blueprint Zone_Victoire pour remplacer la fermeture du jeu par l’affichage du widget.
  • Interaction : Utilisation de Set Show Mouse Cursor via le Player Controller pour permettre au joueur de cliquer sur les boutons.

Ce qui reste d’actualité aujourd’hui#

Bien que les versions d’Unreal Engine aient évolué (notamment avec l’arrivée d’UE5), les principes fondamentaux abordés ici restent le standard de l’industrie :