ndt: Avant de commencer, j'ai conscience qu'un grand nombre de fautes de Français se cachent au sein de cette traduction. Je dois reconnaître avoir perdu beaucoup de mon Français et le travail de traduction d'un document "technique" n'est pas chose aisée. N'hésitez pas à m'indiquer toute erreur que vous rencontrez afin de pouvoir avoir le guide du débutant le plus correct possible dans la langue de Molière.
Bravo, et bien joué d'avoir choisi Construct 2 ! Commençons à faire votre premier jeu en HTML5. Nous allons faire le jeu "Ghost Shooter" (tireur de fantômes) utilisé en démonstration. Essayez le ici afin de comprendre ce que nous allons réaliser: un joueur qui regarde en direction du curseur de la souris, se déplace à l'aide des flèches du clavier et tire sur des monstres avec la souris. Vous allez apprendre tout ce dont vous avez besoin afin de réaliser un jeu simple depuis les "layers" (couches) jusqu'au "event system" (système d'événements).
Note: S'il-vous-plaît ne postez pas de requêtes d'aide dans les commentaires de ce tutoriel! Préférez utiliser le forum officiel (ou le forum francophone si vous ne comprenez pas l'anglais) afin d'obtenir les meilleures réponses possibles à vos questions.
Tutoriels alternatifs
Il existe une alternative au guide du débutant : How to make a platform game, qui vous permettra de faire un jeu de plate forme de type "jump-and-run" (saute et cours) plutôt qu'un jeu de tir vu de dessus. Vous pouvez débuter avec n'importe quel tutoriel, mais nous vous suggérons fortement de parcourir les deux afin de vous forger une bonne idée de comment réaliser ces deux types de jeu !
Il existe aussi How to make an Asteroids clone in under 100 events par Kyatric qui est un peu plus avancé/compliqué mais qui est aussi très détaillé.
Note: au moment de la traduction de ce présent tutoriel, les alternatives n'ont pas encore été traduites.
Installer Construct 2
Si ce n'est pas déjà fait, téléchargez une copie de la dernière "release" (version/parution) de Construct 2 ici. L'éditeur de Construct 2 ne fonctionne que sous Windows mais les jeux réalisés peuvent fonctionner n'importe où, aussi bien sous Mac, Linux, iPad... Construct 2 peut être installé sur un compte d'utilisateur limité (un compte non administrateur sous Windows). C2 est aussi portable, donc vous pouvez l'installer sur une clé USB et l'emporter partout avec vous.
Commencer
Maintenant que vous êtes prêts, exécutez Construct 2. Cliquez sur le bouton File (fichier) et sélectionnez New (nouveau).
Vous n'avez rien besoin de changer dans la fenêtre New Project (nouveau projet). Cliquez simplement sur Create project (créer un projet). Construct 2 gardera l'intégralité du projet dans un seul fichier d'extension .capx pour vous. Vous devriez avoir devant vos yeux un layout vide - l'espace de design où vous créez et positionnez vos objets. Pensez un layout comme un niveau de votre jeu ou l'écran de menu. Dans d'autres outils cela peut être appelé room (salle), scene (scène) ou frame (cadre).
Insérer des objets
Tiled Background (carrelage de fond)
La première chose que nous voulons est un arrière plan qui se répète. L'objet Tiled background peut faire ça pour nous. D'abord, voici une texture de fond. Faites un clic droit et "enregistrer sous" quelque part sur votre ordinateur:
Maintenant double cliquez un endroit dans le layout pour y insérer un nouvel objet. (Plus tard si l'espace est déjà plein, vous pourrez aussi faire un click droit et sélectionner Insert new object (insérer un nouvel objet)). Une fois que la fenêtre Insert new object apparaît, double cliquez l'objet "Tiled Background" pour l'insérer.
Votre curseur prend la forme d'une croix pour vous indiquer qu'il faut placer l'objet. Cliquez quelque part au milieu du layout. L'éditeur de texture (texture editor) s'ouvre afin que vous insériez une texture. Importons l'image que vous avez précédemment sauvegardé. Cliquez l'icône "dossier" pour charger une texture depuis votre disque, naviguez jusqu'à l'endroit où vous avez avez sauvegardé le fichier et sélectionnez le.
Fermez l'éditeur de texture en cliquant le X en haut à droite. Si un avertissement apparaît soyez sûr de sauvegarder (save) ! Désormais vous devriez voir votre objet Tiled Background dans le layout. Redimensionnons le afin de couvrir l'intégralité du layout. Assurez vous que l'objet sois bien sélectionné, alors la Properties bar (barre des propriétés) sur votre gauche devrait vous montrer toutes les propriétés de l'objet, incluant sa taille (size) et sa position. Définissez sa position à 0, 0 (le point en haut à gauche du layout) et sa taille (size) à 1280, 1024 (la taille du layout).
Vérifions notre travail. Maintenez la touche control (ctrl) de votre clavier and faites défiler la molette de votre souris vers le bas afin de dézoomer. Vous pouvez aussi cliquer View - zoom out plusieurs fois dans le bandeau en haut de votre écran pour obtenir le même résultat. Vous pouvez aussi maintenir la touche espace ou le bouton du milieu de votre souris pour déplacer la vue. Joli n'est-ce pas ? Votre objet Tiled Backround devrait recouvrir le layout entièrement maintenant:
Pressez Ctrl+0 ou cliquez sur "View - zomm to 100%" pour revenir à la vue originale/dézoomée.
(Si vous êtes impatients comme moi, cliquez la petite icône 'run' (exécuter) dans la barre de titre un navigateur devrait s'ouvrir vous montrant votre projet en exécution ! Wahou !)