https://creerunjeuvideo.fr/tags/ui/index.html Hugo fr-fr Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/construct-2/tuto-top-down-shooter/construct-2-munitions-rechargement-hud-statique/index.html Fri, 27 Oct 2023 00:00:00 +0000 https://creerunjeuvideo.fr/construct-2/tuto-top-down-shooter/construct-2-munitions-rechargement-hud-statique/index.html 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é : https://creerunjeuvideo.fr/game-maker-studio/shoot-them-up/creer-menus-interactifs-gamemaker-studio/index.html Wed, 22 May 2024 00:00:00 +0000 https://creerunjeuvideo.fr/game-maker-studio/shoot-them-up/creer-menus-interactifs-gamemaker-studio/index.html Apprendre à concevoir des menus fonctionnels est une étape cruciale pour transformer votre prototype en un véritable jeu vidéo. Dans ce guide, nous explorons comment créer des boutons personnalisés et gérer la navigation entre les différentes salles (rooms) de votre projet. Résumé des notions clés La création d’une interface utilisateur (UI) dans GameMaker Studio repose sur une méthodologie simple mais efficace : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-afficher-hud-widget-blueprint-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-afficher-hud-widget-blueprint-unreal-engine-4/index.html 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. https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creer-interface-utilisateur-widget-score-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creer-interface-utilisateur-widget-score-unreal-engine-4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/afficher-score-temps-reel-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/afficher-score-temps-reel-unreal-engine-4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creation-menu-principal-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creation-menu-principal-unreal-engine-4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creation-ecran-game-over-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-un-jeu-android/creation-ecran-game-over-unreal-engine-4/index.html 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. 📺 Ma Chaîne YouTube S'abonner à la chaîne 📦 Ressources Téléchargements 🌐 Communauté 💻 GitHub 🦋 Bluesky 💼 LinkedIn 👾 Chaîne Twitch © 2026 - Créé avec ❤️ sous Hugo & Relearn. Mentions légales Confidentialité (RGPD) https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-assets-graphiques-menu-principal-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-assets-graphiques-menu-principal-unreal-engine-4/index.html Dans cet épisode, nous faisons une petite pause dans le développement pur sous Unreal Engine 4 pour nous concentrer sur l’aspect visuel de votre jeu. Un menu principal réussi commence par des assets graphiques cohérents et bien pensés. Nous allons voir comment concevoir un fond de menu et préparer les bases de nos futurs boutons en utilisant un outil simple et efficace : Paint.net. Résumé de la création des assets Définition du format : Choix de la résolution (1280x720, 1920x1080 ou 4K) selon vos besoins de rendu. Utilisation des dégradés : Maîtrise de l’outil dégradé (linéaire, radial, conique) pour créer une ambiance visuelle rapide. Gestion des calques : Importance de séparer le fond du texte pour faciliter les modifications ultérieures. Typographie : Intégration de polices personnalisées pour donner une identité forte au titre de votre jeu. Exportation : Rappel crucial d’exporter vos fichiers au format PNG (et non le format natif du logiciel) pour qu’ils soient lisibles par Unreal Engine, tout en aplatissant les calques. Ce qui reste d’actualité aujourd’hui Bien que les outils de création d’images évoluent, les principes fondamentaux abordés ici restent essentiels pour tout développeur débutant : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-assets-graphiques-menus-ue4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-assets-graphiques-menus-ue4/index.html Dans cet épisode, nous quittons temporairement l’éditeur Unreal Engine pour nous concentrer sur la préparation de vos assets graphiques. Une interface utilisateur (UI) propre repose sur une base solide : des boutons uniformes, bien alignés et exportés dans le bon format. Nous allons voir comment créer vos boutons de menu (Jouer, Quitter, Plein écran, Rejouer) avec une méthode de “marges” pour garantir une cohérence visuelle parfaite avant de les importer dans votre projet. https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-principal-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-principal-unreal-engine-4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-bouton-bascule-plein-ecran-fenetre-ue4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-bouton-bascule-plein-ecran-fenetre-ue4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-menu-victoire-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creer-menu-victoire-unreal-engine-4/index.html 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 : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-defaite-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-defaite-unreal-engine-4/index.html Dans cet épisode, nous allons finaliser l’expérience utilisateur en cas d’échec dans votre jeu. Plutôt que de laisser le joueur face à un écran figé, nous allons implémenter un menu de “Game Over” fonctionnel. L’approche choisie ici est l’optimisation : au lieu de repartir de zéro, nous allons dupliquer notre interface de victoire pour y intégrer un message d’alerte tout en conservant les options de navigation essentielles (rejouer ou quitter). https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/preparation-second-niveau-optimisation-ui-ue4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/preparation-second-niveau-optimisation-ui-ue4/index.html Dans cet épisode, nous faisons une pause dans la complexité technique pour préparer la structure de notre second niveau. L’objectif est de valider que nos systèmes de gameplay (checkpoints, zones de mort, collecte de pièces) sont modulaires et réutilisables. Nous en profitons également pour refactoriser l’affichage de notre interface utilisateur (UI) afin de la rendre globale et automatique. Résumé de l’épisode Modularité des assets : Création d’un second niveau en réutilisant les blueprints existants (pièces, checkpoints, zones de kill). Refactorisation de l’UI : Déplacement de la logique d’affichage du widget (Create Widget / Add to Viewport) du Level Blueprint vers le Character Blueprint. Avantage de l’approche : En plaçant l’UI dans le personnage, celle-ci s’initialise automatiquement à chaque chargement de niveau, évitant de dupliquer du code dans chaque Level Blueprint. Constat technique : Le score actuel est local au niveau. Le passage d’un niveau à l’autre réinitialise les variables, ce qui introduit la nécessité d’un système de persistance de données (GameInstance). Ce qui reste d’actualité aujourd’hui Bien que cet épisode se concentre sur Unreal Engine 4, les principes fondamentaux abordés restent des piliers du développement sous Unreal Engine 5 : https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-sauvegarde-unreal-engine-4/index.html Wed, 17 Jun 2026 00:00:00 +0000 https://creerunjeuvideo.fr/unreal-engine-4/creer-jeu-plateformes/creation-menu-sauvegarde-unreal-engine-4/index.html 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 :