1. Introduction et premiers pas

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.

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

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

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 :