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