Série: Développement d'un Top-Down Shooter on Créer un jeu vidéo

1. Introduction et premiers pas

Fri, 27 Oct 2023 00:00:00 +0000

Plongez dans le monde de la création de jeux HTML5 avec Construct 2 ! Ce premier tutoriel vous guide à travers l’installation, la découverte de l’interface et la mise en place des bases de votre premier jeu, un Top-Down Shooter.

*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}▶" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

Résumé des notions clés#

Introduction à Construct 2 et HTML5
- Avantages du HTML5 : Compatibilité multiplateforme (PC, Mac, Linux, iOS, Android), permettant de créer un jeu jouable partout.
- Construct 2 : Logiciel intuitif et accessible, idéal pour une première approche du développement de jeux.
- Versions de Construct 2 : Gratuite (avec limitations), personnelle (environ 60€), et commerciale (plus de 200€ pour la revente de jeux).
- Objectif de la série : Apprendre à créer un jeu de tir vu de dessus (Top-Down Shooter - TDS).
Prise en main de l’interface de Construct 2
- Panneau de propriétés (à gauche) : Affiche les attributs de l’élément sélectionné.
- Zone de travail centrale :
  - Layout : La partie graphique où vous placez vos éléments de jeu.
  - Event Sheet : La partie logique où vous définissez les interactions et comportements.
- Panneau de droite :
  - Project Explorer : Gère l’ensemble de votre projet (layouts, event sheets, etc.).
  - Layers : Permet de superposer les éléments du jeu sur différents niveaux (calques).
  - Objects : Liste tous les objets présents dans la scène actuelle.
Configuration du projet
- Création d’un nouveau projet (.capx pour un fichier unique).
- Nom du projet : TDS.
- Taille de la fenêtre de jeu (Window Size) : Définie à 640x480 pixels.
- Navigateur de prévisualisation (Preview Browser) : Permet de choisir le navigateur pour tester le jeu.
Configuration du niveau (Layout)
- Renommage du layout par défaut en Level One.
- Taille du layout (Layout Size) : Définie à 1280x1224 (deux fois la taille de la fenêtre) pour un niveau plus grand que l’écran.
Gestion des Event Sheets
- Renommage de l’Event Sheet par défaut en ES_Level One pour une meilleure organisation et la possibilité de réutiliser la même feuille d’événements pour plusieurs niveaux.
Organisation des calques (Layers)
- Renommage du calque par défaut en Fond.
- Ajout de nouveaux calques : Joueur, Ennemis, HUD.
- Limitation de la version gratuite : Seulement 4 calques disponibles.
- Verrouillage du calque Fond : Empêche toute modification accidentelle une fois le fond configuré.
Ajout des premiers éléments graphiques
- Arrière-plan (Tiled Background) :
  - Ajout d’un objet Tiled Background sur le calque Fond.
  - Chargement de l’image BG.png.
  - Positionnement à 0,0 et redimensionnement à la taille du layout (1280x1224) pour couvrir tout le niveau.
- Personnage joueur (Sprite) :
  - Ajout d’un objet Sprite sur le calque Joueur.
  - Chargement de l’image player.png.
  - Renommage du sprite en Marine.
Introduction aux comportements (Behaviors)
- Sélection du sprite Marine.
- Ajout du comportement 8 Direction via le panneau des propriétés.
- Ce comportement permet un déplacement facile du personnage avec les touches directionnelles du clavier, sans écrire de code.
- Test du jeu pour visualiser le personnage se déplaçant.

Ce qui reste d’actualité aujourd’hui#

Bien que Construct 2 ait été remplacé par Construct 3, les concepts fondamentaux introduits dans ce tutoriel restent d’une pertinence capitale pour tout développeur de jeux, quel que soit le moteur utilisé :

2. Visée à la Souris et Tirs de Balles

Fri, 27 Oct 2023 00:00:00 +0000

Plongez dans la deuxième partie de notre série de tutoriels Construct 2, où nous allons donner à notre personnage la capacité de viser avec la souris et de tirer des projectiles !

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

Ouverture de Projet et Prévisualisation
- Comment ouvrir un projet récent dans Construct 2.
- Utilisation de la fonction “Preview” pour tester le jeu en cours de développement.
Introduction aux Événements Construct 2
- Explication du concept d’événement : “Si [condition], alors [action]”.
- Utilisation de l’exemple de la cuisson des pâtes pour illustrer la logique événementielle.
- Comment ajouter un événement (Add Event) et une action (Add Action).
L’événement Système “Every Tick”
- Présentation de l’événement System -> Every Tick, qui s’exécute à chaque cycle de lecture du programme (la boucle de jeu).
- Son importance pour les actions continues.
Intégration de la Souris
- Ajout de l’objet Mouse au projet pour capter les entrées de la souris.
- Utilisation des expressions Mouse.X et Mouse.Y pour obtenir les coordonnées du curseur.
Visée du Personnage avec la Souris
- Action Marines -> Set Angle Towards Position pour orienter le personnage vers un point spécifique.
- Combinaison de cette action avec Mouse.X et Mouse.Y pour que le personnage suive le curseur de la souris.
Création et Configuration d’un Projectile (Balle)
- Ajout d’un nouveau Sprite pour représenter la balle.
- Application du comportement (Behavior) “Bullet” au sprite de la balle.
- Configuration des propriétés du comportement “Bullet” (vitesse, accélération, gravité, rebond).
- Astuce pour masquer le sprite initial de la balle en le plaçant hors de la zone de jeu.
Système de Tir
- Création d’un événement Mouse -> On Click (bouton gauche) pour déclencher le tir.
- Action Marines -> Spawn another object pour instancier une balle à partir du personnage.
- Spécification du calque (Layer) sur lequel la balle doit apparaître.

Ce qui reste d’actualité aujourd’hui#

Bien que ce tutoriel utilise Construct 2, les concepts fondamentaux abordés sont intemporels et s’appliquent à la plupart des moteurs de jeu modernes, y compris Construct 3 et d’autres plateformes de développement :

3. Créer des Monstres et une IA Simple dans Construct 2

Fri, 27 Oct 2023 00:00:00 +0000

Dans cette troisième partie de notre tutoriel sur Construct 2, nous allons donner vie à notre jeu en introduisant des ennemis et une intelligence artificielle rudimentaire.

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

Préparation de l’environnement :
- Verrouillage des calques existants (HUD, Joueur, Fond) pour s’assurer de travailler exclusivement sur le calque “Monstres”.
- Création d’un nouveau Sprite nommé “Mubbe” (notre monstre) et importation de son image.
Comportement des Monstres :
- Ajout du comportement “Bullet” (Projectile) au monstre, le considérant comme un projectile qui se déplace.
- Réglage de la vitesse du monstre (ex: 50) pour un mouvement plus lent et contrôlé.
Intelligence Artificielle Simple (Suivi de Joueur) :
- Dans la feuille d’événements (Event Sheet), à chaque “tick” (chaque boucle de jeu) :
  - Le monstre utilise l’action “Set Angle Towards Position” pour toujours regarder et se diriger vers la position (X, Y) du joueur.
Gestion des Collisions :
- Balle vs. Monstre :
  - Événement : Quand la “Balle” entre en collision avec “Mubbe”.
  - Actions : “Mubbe: Destroy” (le monstre disparaît), “Balle: Destroy” (la balle disparaît après l’impact).
- Joueur vs. Monstre :
  - Événement : Quand le “Marine” (le joueur) entre en collision avec “Mubbe”.
  - Action : “Marine: Destroy” (le joueur disparaît – cette action est temporaire pour les tests et sera remplacée par un système de points de vie/Game Over plus tard).
Duplication des Monstres :
- Démonstration de la facilité à dupliquer les monstres configurés (Ctrl+C, Ctrl+V) pour peupler rapidement le niveau avec plusieurs ennemis.

Ce qui reste d’actualité aujourd’hui#

Bien que ce tutoriel utilise Construct 2, les principes fondamentaux du développement de jeux qu’il aborde sont intemporels et s’appliquent à la plupart des moteurs de jeu modernes :

4. Gérer les Dégâts et Introduire les Variables d'Instance

Fri, 27 Oct 2023 00:00:00 +0000

Dans ce quatrième épisode de notre série sur Construct 2, nous plongeons au cœur de la gestion des dégâts et de l’introduction des variables d’instance pour rendre nos interactions de jeu plus dynamiques et réalistes.

Résumé de l’épisode : Gérer les Dégâts et les Variables d’Instance#

Cet épisode clé nous guide à travers l’implémentation d’un système de dégâts et l’utilisation des variables, des concepts fondamentaux en développement de jeux.

5. Munitions, Rechargement et HUD Statique

Fri, 27 Oct 2023 00:00:00 +0000

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é :

6. Gérer la Vie, Créer un Menu et Optimiser son Jeu

Fri, 27 Oct 2023 00:00:00 +0000

Dans ce sixième épisode de notre série dédiée à Construct 2, nous allons approfondir la gestion des packs de vie, structurer notre jeu avec un menu d’accueil et peaufiner les performances et l’organisation de notre projet.

Résumé des notions clés#

Gestion des Packs de Vie (Health Packs)
- Création du sprite “Elpack” (Health Pack) et ajout d’une variable d’instance pv (points de vie) pour définir la quantité de soin.
- Ajout d’une variable d’instance MaxV (vie maximale) au joueur pour définir sa capacité de vie maximale.
- Initialisation de la vie du joueur à MaxV au démarrage du layout pour garantir une vie pleine au début.
- Implémentation de deux logiques de ramassage pour les packs de vie :
  - Ajout des pv du pack à la vie du joueur si cela ne dépasse pas MaxV.
  - Réinitialisation de la vie du joueur à MaxV si le ramassage du pack le ferait dépasser, évitant ainsi de soigner au-delà du maximum.
Création d’un Menu Principal
- Ajout d’un nouveau layout “Menu” et d’une feuille d’événements dédiée “ES_Menu” pour gérer la logique du menu.
- Intégration d’un bouton “Jouer” sur le menu qui, une fois cliqué, redirige le joueur vers le “Level 1” (le jeu).
- Modification de l’événement de mort du joueur pour qu’il revienne au menu principal plutôt que de simplement disparaître.
Optimisation et Améliorations du Jeu
- Nettoyage des balles: Ajout d’un événement pour détruire automatiquement les balles qui sortent du layout, économisant ainsi des ressources.
- Point de sortie du tir: Création d’un “Image Point” nommé “gun” sur le sprite du joueur, permettant aux balles de partir de l’extrémité de l’arme pour un rendu plus réaliste.
- Organisation du code: Utilisation de groupes d’événements (“System”, “Marine”, “Balles”) pour structurer et rendre plus lisible la feuille d’événements.
- Exportation du jeu: Explication du processus d’exportation du projet en “HTML5 Website” et des étapes pour le déployer sur un hébergement web.
Devoir Maison
- Appliquer la logique de “vie maximale” aux munitions : faire en sorte que ramasser un chargeur ne permette pas de dépasser la capacité maximale du chargeur du joueur.

Ce qui reste d’actualité aujourd’hui#

Bien que Construct 2 ait évolué vers Construct 3, les principes fondamentaux abordés dans ce tutoriel restent des piliers du développement de jeux vidéo et sont applicables à la plupart des moteurs de jeu modernes :