Dans ce cinquième épisode de notre série sur Construct 2, nous allons approfondir la gestion de l’interface utilisateur et des mécaniques de jeu essentielles, en nous concentrant sur les munitions et le rechargement.

Résumé des notions clés abordées :#

• Gestion du HUD Statique avec Parallax (0,0)
  • Apprentissage de la propriété Parallax pour les calques (Layers) dans Construct 2.
  • Configuration du calque HUD (Heads-Up Display) avec une valeur de parallax de 0,0 pour s’assurer que les éléments d’interface (vie, munitions) restent fixes à l’écran, indépendamment du défilement de la caméra.
• Affichage des Munitions
  • Création d’un objet Text sur le calque HUD pour afficher le nombre de munitions restantes.
  • Personnalisation du texte (police, taille, couleur, position).
• Variables d’Instance pour les Munitions
  • Pour le Joueur (Marine) :
    • MaxMun : Variable d’instance pour définir la capacité maximale de munitions que le joueur peut porter (ex: 6 pour un revolver).
    • Munition : Variable d’instance pour suivre le nombre actuel de munitions du joueur.
  • Pour les Chargeurs (Charger) :
    • Charge : Variable d’instance pour définir la quantité de munitions qu’un chargeur (pickup) fournit.
• Initialisation des Munitions au Démarrage du Niveau
  • Utilisation de l’événement système On Start Of Layout pour initialiser la variable Munition du joueur à la valeur de MaxMun. Cela assure que le joueur commence chaque niveau avec un chargeur plein.
• Mise à Jour de l’Affichage des Munitions
  • Dans l’événement système Every Tick (à chaque image du jeu), mise à jour de l’objet Text des munitions pour qu’il affiche la valeur actuelle de la variable Munition du joueur.
• Mécanique de Tir et Consommation de Munitions
  • Modification de l’événement Mouse - On Left Button Clicked (lorsque le joueur tire).
  • Condition : Ajout d’une condition Marine.Munition > 0 pour s’assurer que le joueur ne peut tirer que s’il a des munitions.
  • Action : Soustraire 1 à la variable Munition du joueur après chaque tir.
• Ramassage des Chargeurs (Pickups)
  • Création d’un objet Sprite pour représenter un chargeur de munitions sur le sol.
  • Événement : Marine - Is Overlapping another object (Charger) (lorsque le joueur entre en collision avec un chargeur).
  • Condition Cruciale : Ajout d’une condition pour éviter de recharger au-delà de la capacité maximale : Marine.MaxMun >= Marine.Munition + Charger.Charge. Cela vérifie si l’ajout des munitions du chargeur ne dépasse pas la capacité maximale du joueur.
  • Actions :
    • Ajouter la valeur de Charger.Charge à la variable Munition du joueur.
    • Détruire l’objet Charger pour le faire disparaître du niveau.

Ce qui reste d’actualité aujourd’hui#

Bien que ce tutoriel utilise Construct 2, les concepts abordés sont des piliers fondamentaux du développement de jeux vidéo et restent entièrement pertinents, quel que soit le moteur ou le langage utilisé :

Note : Cet article est une archive pédagogique du sixième épisode de ma série sur la création d’un jeu de plateforme avec Construct 2.

Programme de l’épisode#

• Gestion avancée des collisions : Distinguer l’interaction “saut sur l’ennemi” (destruction) de l’interaction “contact latéral” (perte de vie/redémarrage).
• Interface (HUD) : Création d’une interface fixe pour afficher la vie (cœurs) et le score.
• Optimisation UI : Utilisation du comportement Anchor pour maintenir l’interface à l’écran pendant le défilement.
• Ajout d’objets : Intégration de pièces à collecter.

Logique des collisions (Feuille d’événement)#

Pour gérer la différence entre écraser un ennemi et se faire toucher, on utilise des sous-événements basés sur l’état vertical du joueur :

Dans cet épisode, nous abordons une étape cruciale pour l’expérience utilisateur : l’affichage d’informations en temps réel. Que ce soit pour un score, une barre de vie ou un compteur de munitions, le système de HUD (Heads-Up Display) est indispensable. Nous allons voir comment créer une interface utilisateur simple à l’aide des Widget Blueprints dans Unreal Engine 4 et comment l’injecter dans votre viewport dès le lancement de la partie.

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 :