Le guide du débutant à Construct2

Bravo, et bien joué d'avoir choisi Construct 2 ! Commençons à faire votre premier jeu en HTML5. Nous allons faire le jeu « Ghost Shooter » (tueur de fantômes) utilisé en démonstration.

1 commentaire Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Bravo, et bien joué d'avoir choisi Construct 2 ! Commençons à faire votre premier jeu en HTML5. Nous allons faire le jeu « Ghost Shooter » (tueur 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).

I-A. 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 d'avoir une bonne idée de la façon de 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é.

Au moment de la traduction de ce présent tutoriel, les alternatives n'ont pas encore été traduites.

II. Installer Construct 2

Si ce n'est pas déjà fait, téléchargez une copie de la dernière version 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). Construct 2 est aussi portable, donc vous pouvez l'installer sur une clé USB et l'emporter partout avec vous.

II-A. Commencer avec Construct 2

Maintenant que vous êtes prêts, exécutez Construct 2. Cliquez sur le bouton File (fichier) et sélectionnez New (nouveau).

Nouveau fichier

Vous n'avez rien à 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 voir 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).

II-B. Insérer des objets

II-B-1. Fond en tuiles

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 :

Un fond pour le jeu

Maintenant double-cliquez sur le layout pour y insérer un nouvel objet, (plus tard si l'espace est déjà plein, vous pourrez aussi faire un clic 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 sur l'objet « Tiled Background » pour l'insérer.

Insertion d'un objet

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. Importez l'image que vous avez précédemment sauvegardée. Cliquez sur l'icône « dossier » pour charger une texture depuis votre disque, naviguez jusqu'à l'endroit où vous avez sauvegardé le fichier et sélectionnez-le.

Charger une texture depuis un fichier

Fermez l'éditeur de texture en cliquant sur le X en haut à droite. Si un avertissement apparaît assurez-vous de sauvegarder ! Désormais vous devriez voir votre objet Tiled Background dans le layout. Redimensionnez-le afin de couvrir l'intégralité du layout. Assurez-vous que l'objet soit 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).

Propriétés de la tuile

Vérifiez votre travail. Maintenez la touche Ctrl de votre clavier et faites défiler la molette de votre souris vers le bas afin de dézoomer. Vous pouvez aussi cliquer sur 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 maintenant recouvrir le layout entièrement :

Image non disponible

Pressez Ctrl + 0 ou cliquez sur « View - zoom to 100% » pour revenir à la vue originale.

Si vous êtes impatients comme moi, cliquez sur 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 !

II-C. Ajouter un layer (couche)

OK, maintenant nous voulons ajouter plus d'objets. Cependant nous allons accidentellement continuer de sélectionner le Tiled Background à moins que nous ne le verrouillions (lock), le rendant ainsi non sélectionnable. Utilisons le système de layers pour ce faire.

Les layouts peuvent être composés de multiples layers (couches) que nous pouvons utiliser afin de grouper les objets. Imaginez les layers comme des plaques de verre empilées les unes sur les autres avec les objets peints sur chaque plaque. Cela vous permet de réorganiser facilement quels objets apparaissent au-dessus des autres. Les layers peuvent aussi être cachés (invisibles), verrouillés, avoir des effets de parallaxe et bien plus. Par exemple, pour ce jeu, nous voulons que tout apparaisse par-dessus le Tiled Background donc nous pouvons ajouter une nouvelle couche pour nos autres objets.

Pour gérer les layers, cliquez sur l'onglet layers qui se trouve généralement à côté de la barre des projets :

Onglet des layers

Vous devriez voir Layer 0 dans la liste (Construct 2 compte à partir de zéro, car cela fonctionne mieux en programmation). Cliquez sur l'icône crayon et rename (renommer) le layer en Background (arrière-plan), car il s'agit de notre layer d'arrière-plan. Cliquez sur l'icône verte add (ajouter) pour ajouter un nouveau layer à la liste pour vos autres objets. Appelez ce nouveau layer Main (principal). Enfin, si vous cliquez sur l'icône « cadenas » à côté de Background, le layer se retrouvera verrouillé. Cela signifie que vous ne pourrez plus sélectionner les objets qui se trouvent sur ce layer. C'est assez pratique pour notre Tiled Background, qui peut être accidentellement sélectionné alors que vous n'avez plus besoin d'y toucher. Cependant, si vous avez besoin d'effectuer des changements, vous pouvez toujours cliquer de nouveau sur le cadenas pour déverrouiller le layer.

Les cases à cocher vous permettent aussi de cacher les layers dans l'éditeur, mais nous n'avons pas besoin de cela pour l'instant. Votre barre de layers devrait ressembler à ceci maintenant :

Exemple de layers

Maintenant, assurez-vous que le layer 'Main' est sélectionné dans la barre des layers. C'est très important, le layer sélectionné est le layer actif. Tous les nouveaux objets seront insérés dans le layer actif, donc s'il n'est pas sélectionné, nous insérerons accidentellement des objets dans le mauvais layer. Le layer actif est indiqué dans la barre d'état et apparaît aussi en tant qu'infobulle quand vous insérez un nouvel objet, gardez un œil dessus.

II-D. Ajout des objets de contrôle (input)

Revenons au layout. Double-cliquez pour insérer un nouvel objet. Cette fois sélectionnez l'objet Mouse (souris) car vous allez avoir besoin de gérer les contrôles avec la souris. Faites de même pour l'objet Keyboard (clavier).

Ces objets n'ont pas besoin d'être positionnés dans le layout. Ils sont cachés et automatiquement accessibles à travers tout le projet. Désormais, tous les layouts de votre projet peuvent utiliser les contrôles de la souris et du clavier.

II-E. Les objets du jeu

Il est temps d'insérer les objets du jeu à proprement parler ! Voici des textures pour cela, sauvegardez-les sur votre disque dur comme précédemment.

Joueur :

Texture du joueur

Monstre :

Texture de monstre

Balle :

Texture de balle

et Explosion :

Texture d'explosion

Pour chacun de ces objets nous allons utiliser un objet sprite. Cet objet affiche la texture et peut être déplacé, tourné et redimensionné. En général les jeux vidéo affichent principalement des sprites. Insérons chacun des quatre objets précédents en tant que nouveau sprite. Le processus est similaire à l'insertion du Tiled Background :

  1. Double-cliquez pour insérer un nouvel objet ;
  2. Double-cliquez sur l'objet 'Sprite' ;
  3. Quand le curseur de la souris affiche une croix, cliquez dans le layout. L'infobulle devrait être 'Main'. (souvenez-vous, il s'agit du layer actif) ;
  4. L'éditeur de texture apparaît. Cliquez sur l'icône « ouvrir » (le petit dossier) et chargez l'une des quatre textures précédentes ;
  5. Fermez l'éditeur de texture, sauvegardant ainsi vos changements. Vous devriez maintenant voir les objets dans votre layout !

Note : une autre manière rapide d'insérer des objets sprite est de glisser/déposer le fichier image depuis l'explorateur Windows dans l'espace du layout. Construct 2 créera automatiquement l'objet Sprite avec la texture pour vous. Assurez-vous de glisser chaque image une par une cependant, si vous glissez les quatre à la fois, Construct 2 créera un seul objet Sprite contenant quatre pas d'animation.

Déplacez les Sprites balle et explosion en dehors des limites du layout (hors de l'espace blanc), vous ne voulez pas voir ces objets au démarrage de votre jeu.

Ces objets seront nommés Sprite, Sprite2, Sprite3 et Sprite4. Ce n'est pas très pratique et peut vite devenir très difficile à gérer. Renommez les objets en tant que Player (joueur), Monster (monstre), Bullet (balle) et Explosion(1).

Pour renommer, sélectionnez un objet et modifiez sa propriété Name (nom) dans la barre des propriétés :

Nom de l'objet

III. Ajouter des behaviors (comportements)

Les behaviors (comportements) sont des fonctionnalités fournies avec Construct 2. Par exemple, vous pouvez ajouter le behavior Platform à un objet, le behavior Solid à votre sol et instantanément vous pourrez déplacer et faire sauter votre personnage comme dans un jeu de plate-forme. Vous pouvez faire la même chose à l'aide des events (évènements) mais cela prend plus de temps et n'a pas toujours d'intérêt si un behavior permet déjà de le faire de manière appropriée. Jetons un œil aux behaviors que nous pouvons utiliser. Entre autres Construct 2 dispose de ces behaviors :

  • 8 Direction movement (mouvement huit directions). Cela vous permet de déplacer un objet à l'aide des flèches du clavier et vous permettra de faire les mouvements du joueur (objet Player) ;
  • Bullet movement (mouvement projectile). Ce comportement déplace un objet en ligne droite selon son angle actuel. Il fonctionnera très bien pour les balles (objet Bullet) que tirera le joueur. Malgré son nom il fonctionnera aussi très bien pour déplacer les monstres puisque tout ce que le comportement fait est de déplacer l'objet en avant à une vitesse constante ;
  • Scroll to (défiler jusqu'à). Ceci fait que l'écran suit la position de l'objet alors que celui-ci se déplace (le principe du scrolling). Ceci sera utile pour le joueur ;
  • Bound to layout (limité au layout). Cela évitera que l'objet sorte des limites du layout. Cela sera aussi utile pour le joueur afin qu'il ne sorte pas de l'écran ;
  • Destroy outside layout (détruire hors du layout). Au lieu d'empêcher un objet de quitter l'écran, ce comportement détruit l'objet une fois que celui-ci sort des limites du layout. Cela vous servira pour les balles. Sans ce comportement, les balles quitteraient l'écran et continueraient à voler à l'infini, continueraient d'utiliser quelques ressources mémoires et processeur. Ce comportement permettra de détruire directement ces objets une fois qu'ils ne seront plus utiles dans la logique du jeu, qu'elles auront quitté l'écran ;
  • Fade (disparition graduelle). Ce comportement fait disparaître graduellement l'objet. Il sera utilisé pour les explosions.

Ajoutons les comportements aux objets qui en ont besoin.

III-A. Comment ajouter un behavior

Ajoutons le behavior 8 direction movement au joueur (objet Player). Cliquez sur « Player » pour le sélectionner. Dans la barre des propriétés, notez la catégorie Behaviors. Cliquez sur Add/Edit (ajouter/éditer) dans cette catégorie. La fenêtre des behaviors (behaviors dialog) pour l'objet Player va s'ouvrir.

Ajouter un comportement

Cliquez sur l'icône verte add behavior (ajouter un behavior) dans la fenêtre. Double-cliquez le behavior 8 direction movement pour l'ajouter.

Liste des comportements

Faites la même chose et cette fois ajoutez le behavior Scroll To afin de faire que l'écran suive l'objet « Player », ainsi que le behavior Bound to layout pour limiter sa position aux limites du layout. La fenêtre des behaviors devrait ressembler à ceci maintenant :

Comportement du joueur

Fermez la fenêtre des behaviors et cliquez sur Run (exécuter) pour essayer le jeu !

Jouons !

Espérons que vous avez un navigateur compatible HTML 5 installé. Autrement soyez aussi sûrs d'avoir la dernière version de FireFox, Chrome ou encore Internet Explorer 9, si vous êtes sous Windows Vista et supérieur. Une fois que votre jeu est en cours d'exécution, notez que vous pouvez déjà déplacer le joueur avec les flèches du clavier et que l'écran le suit ! Remarquez aussi que le joueur ne sort pas des limites du layout grâce au behavior « Bound to layout ». C'est là l'utilité des behaviors : rapidement ajouter des fonctionnalités communes. Nous allons bientôt utiliser le système d'évènements pour ajouter des fonctionnalités personnalisées.

III-B. Ajouter les autres behaviors

Nous pouvons ajouter des comportements aux autres objets par la même méthode. Sélectionnez l'objet, cliquez sur Add/Edit pour ouvrir la fenêtre des behaviors et ajoutez certains behaviors. Ajoutez donc ces autres behaviors :

  • ajoutez les behaviors Bullet movement et Destroy outside layout à l'objet Bullet (balle) (pas de surprises ici) ;
  • ajoutez le behavior Bullet movement à l'objet Monster (monstre), car il ne fait que bouger en avant aussi ;
  • ajoutez le behavior Fade à l'objet Explosion (afin qu'il disparaisse progressivement après être apparu). Par défaut le behavior Fade détruit l'objet une fois la disparition effectuée, ainsi vous n'aurez pas à vous soucier des objets Explosions invisibles utilisant la mémoire et des performances du jeu.

Si vous exécutez le jeu maintenant, vous pouvez remarquer que la seule différence est que les monstres se déplacent plutôt rapidement. Ralentissez-les un peu pour un rythme plus appréciable. Sélectionnez l'objet Monster (monstre). Notez que puisque vous avez ajouté un behavior de nouvelles propriétés sont disponibles dans la barre des propriétés :

Propriétés des projectiles

Cela vous permet d'adapter et modifier le fonctionnement des behaviors. Changez lavitesse (speed) de 400 à 80 (il s'agit du déplacement en pixels par seconde).

De la même manière changez la vitesse (speed) de l'objet Bullet (objet balle) à 600 et la propriété Fade out time du behavior Fade de l'objet Explosion à 0.5 (une demi-seconde).

III-C. Créez des monstres

En maintenant la touche Ctrl, cliquez sur l'objet Monster (Monstre) et déplacez-le. Notez que cette opération crée une nouvelle instance de l'objet. C'est un autre objet du type d'objet Monster.

Les types d'objet sont essentiellement des 'classes' d'objets. Dans le système d'évènements vous avez principalement à faire à des types d'objet. Par exemple, vous pouvez créer un évènement qui dit « Bullet collides with Monster » (Balle est en collision avec un monstre). Cela veut en fait dire « N'importe quelle instance du type d'objet Bullet (balle) rentre en collision avec n'importe quelle instance du type d'objet Monster (monstre) ». Ceci permet de ne pas avoir à créer un évènement pour chaque (instance) monstre. Avec des Sprites toutes les instances du type d'objet partagent les même textures. Cela est très efficace quand des joueurs jouent à ce jeu en ligne, au lieu d'avoir à télécharger huit textures de monstres pour huit instances, ils n'ont besoin de télécharger qu'une fois la texture et Construct 2 l'applique huit fois.

Nous couvrirons plus en détails la différence entre type d'objet et instances plus tard. Pour l'instant un bon exemple est de penser que différents types d'ennemis sont des types d'objets différents et que les ennemis d'un même type sont des instances de ce type d'objet.

En utilisant la touche Ctrl et déplacer, créez sept ou huit monstres. Ne les placez pas trop près du joueur ou ils pourraient mourir rapidement ! Vous pouvez dézoomer en maintenant Ctrl et la molette de la souris, si ça aide et dispersez-les à travers l'intégralité du layout. Vous devriez obtenir quelque chose qui ressemble à cela :

Un jeu avec des monstres

Maintenant il est temps d'ajouter quelques fonctionnalités personnalisées à l'aide de la méthode de programmation de Construct 2 : le système d'évènements (event system).

IV. Évènements

D'abord, cliquez sur l'onglet Event sheet 1 (feuille d'évènements 1) en haut pour passer sur l'éditeur d'event sheet. Une liste d'évènements est appelée Event sheet et vous pouvez avoir différentes event sheets pour différentes parties de votre jeu ou juste pour une meilleure organisation. Les events sheets peuvent aussi « include » (inclure) d'autres event sheets, vous permettant de réutiliser des évènements dans plusieurs niveaux par exemple, mais nous n'en aurons pas besoin tout de suite.

Onglet pour les événements

IV-A. À propos des évènements

Comme le texte dans la feuille d'évènements vide l'indique Construct 2 exécute tout dans cette feuille une fois par tick. La plupart des écrans mettent à jour leur affichage 60 fois par seconde donc, Construct 2 va essayer d'avoir le même débit afin d'assurer un rendu adapté. Cela signifie que l'event sheet sera généralement exécutée 60 fois par seconde, redessinant l'écran à chaque fois. C'est cela un tick, une unité de « exécute les évènements et dessine l'écran ».

Les évènements s'exécutent de haut en bas, donc les évènements placés en haut de la feuille d'évènements seront exécutés en premier.

IV-B. Conditions, actions et sub-events (sous-évènements)

Les évènements sont constitués de conditions qui testent si certains critères sont remplis (par exemple : « est-ce que la touche espace est enfoncée ? »). Si toutes les conditions sont remplies, les actions de l'évènement sont toutes exécutées (par exemple : « créer un objet balle »). Une fois que les actions ont été exécutées, tout sub-event (sous-évènement) est également exécuté (ces sub-events peuvent tester d'autres conditions, exécuter d'autres actions, ainsi que d'autres sub-events et ainsi de suite). En utilisant ce système, nous pouvons créer des fonctionnalités complexes pour nos jeux et applications. Cependant pour ce tutoriel nous n'aurons pas besoin de sub-events.

Revoyons ceci une fois de plus. En résumé un évènement s'exécute ainsi de base :

Est-ce que toutes les conditions sont remplies ?

---> Oui : exécute toutes les actions de l'évènement.

---> Non : aller à l'évènement suivant (en sautant les sub-events de l'évènement actuel).

Il s'agit d'une simplification du déroulement. Construct 2 fournit beaucoup de fonctionnalités d'évènements qui couvrent et permettent pas mal de choses dont vous pouvez avoir besoin. Cependant, pour l'instant, c'est une bonne manière de voir les choses.

IV-C. Votre premier évènement

Nous voulons faire en sorte que l'objet Player (joueur) regarde toujours en direction du curseur de la souris. Cela ressemblera à ceci une fois achevé :

Premier événement de suivi de la souris

Souvenez-vous, un tick s'exécute à chaque fois que l'écran est redessiné. Donc si vous faites en sorte que le joueur pointe dans la direction du curseur à chaque tick, il apparaîtra regardant vers le curseur durant toute l'exécution.

Commençons par cet évènement. Double-cliquez dans la feuille d'évènements. Cela va afficher une fenêtre nous permettant d'ajouter une condition pour le nouvel évènement.

Ajout d'un événement

Différents objets ont différentes conditions et actions en fonction de ce qu'ils peuvent faire. Il y a aussi un objet System (système) qui contient les fonctionnalités « standards » intégrées à Construct 2. Double-cliquez sur l'objet system comme indiqué.

La fenêtre affichera alors une liste de toutes les conditions de l'objet System :

Pour chaque tick

Faites un double-clic sur la condition Every tick (chaque tick) pour l'insérer. La fenêtre se fermera et l'évènement sera créé sans action. Votre feuille devrait désormais ressembler à ceci :

Fenêtre d'événement

Maintenant nous voulons ajouter une action pour faire en sorte que l'objet Player (joueur) regarde vers la souris. Cliquez sur le lien Add action (ajouter action) à droite de l'évènement (assurez-vous de cliquer sur le lien « Add action », pas « Add event » en dessous qui créerait un tout nouveau niveau d'évènement). La fenêtre « Add action » s'affichera :

Ajout d'action sur le joueur

Comme pour l'ajout d'un évènement, nous avons la même liste d'objets dans laquelle on peut choisir, mais cette fois-ci, pour l'ajout d'une action. Essayez de ne pas vous mélanger les pinceaux entre l'ajout de condition et l'ajout d'action ! Comme montré, double-cliquez sur l'objet « Player », car c'est cet objet que nous souhaitons faire pointer vers le curseur. La liste des actions disponibles pour l'objet « Player » apparaît :

Ajout de l'action à faire sur le joueur

Remarquez comme le behavior 8-direction movement de l'objet Player a ses propres actions. Nous n'avons pas besoin de nous en soucier pour l'instant.

Plutôt que de définir l'angle du Player d'un certain nombre de degrés, il est plus pratique d'utiliser l'action Set angle towards position (définir l'angle vers une position). Cela calculera automatiquement l'angle entre l'objet « Player » et les coordonnées X et Y soumises et l'appliquera à l'objet. Double-cliquez sur l'action Set angle towards position.

Constuct 2 a besoin de connaître les coordonnées X et Y vers lesquelles le joueur doit pointer :

Configuration des paramètres de l'action

Ceux-ci sont appelés paramètres de l'action. Les conditions peuvent avoir des paramètres aussi, mais Every tick n'en a besoin d'aucun.

Vous voulez définir l'angle vers la position de la souris. L'objet « Mouse » (souris) vous fournit un moyen de le faire. Entrez Mouse.X pour X et Mouse.Y pour Y. Ce sont des expressions. Elles sont telles des formules mathématiques calculées. Par exemple vous pourriez aussi écrire Mouse.X + 100 ou sin(Mouse.Y) (bien que ces exemples précis ne soient pas particulièrement utiles !). De cette manière vous pouvez utiliser n'importe quelles données issues d'un objet, ou n'importe quel calcul pour élaborer les paramètres dans des actions et des conditions. C'est très puissant et une sorte d'origine secrète de la flexibilité de Construct 2.

Avez-vous rencontré une erreur qui disait « Mouse is not an object name » (Mouse n'est pas un nom d'objet) ? Assurez-vous d'avoir ajouté l'objet Mouse (souris) ! Retournez au paragraphe « Ajout des objets de contrôle (input)Ajout des objets de contrôle (input)  ».

Vous pouvez vous demander comment se rappeler toutes les expressions que vous pourriez écrire/utiliser. Heureusement il y a un « objet panel » (panneau d'objet) que vous devriez voir flotter en dessous de la fenêtre. Par défaut le panneau est semi-transparent afin de ne pas vous distraire.

Panneau des objets

Placez votre curseur dessus, ou cliquez dessus et le panneau deviendra complètement visible. Cela sert comme dictionnaire de toutes les expressions que vous pouvez utiliser, avec une description pour vous aider à les mémoriser. Si vous double-cliquez sur un objet vous verrez la liste de ses expressions disponibles. Si vous double-cliquez sur une expression elle sera insérée, vous évitant d'avoir à la taper manuellement.

Quoiqu'il en soit cliquez sur Done (Fini) dans la fenêtre de paramètres. L'action est ajoutée ! Comme vu précédemment l'évènement devrait ressembler à cela :

Comportement terminé

Et voilà, votre premier évènement ! Essayez d'exécuter le jeu et le joueur devrait pouvoir se déplacer tout en faisant toujours face au curseur de la souris. Voilà votre premier bout de fonctionnalité personnalisée.

V. Ajouter des fonctionnalités au jeu

Si chaque évènement doit être décrit avec autant de détails que précédemment, cela risque d'être un très long tutoriel. Accordez-vous pour rendre la description un peu plus brève pour les prochains évènements. Souvenez-vous, les étapes pour ajouter une condition ou une action sont :

  1. Double-cliquez pour insérer un nouvel évènement, ou cliquez sur le lien Add action pour ajouter une action ;
  2. Double-cliquez sur l'objet dans lequel la condition/action se trouve ;
  3. Double-cliquez sur la condition/action que vous voulez ;
  4. Entrez les paramètres au besoin.

À partir de maintenant les évènements seront décrits comme l'objet, suivi de condition/action, suivi des paramètres. Par exemple, l'évènement que nous venons d'insérer pourrait s'écrire :

Add condition System -> Every tick

Add action Player -> Set angle towards position X : Mouse.X, Y : Mouse.Y

V-A. Faire en sorte que le Player (joueur) tire

Quand le joueur clique sur l'objet Player celui-ci devrait tirer une balle. Cela peut être fait à l'aide de l'action Spawn an object de l'objet Player (joueur), qui créé une nouvelle instance d'un objet à la même position et angle qu'un objet référent. Le behavior Bullet movement que nous avons ajouté plus tôt le fera ensuite voler/avancer vers l'avant. Faites l'évènement suivant :

Condition : Mouse -> On click -> Left clicked (par défaut)

Action : Player -> Spawn another object -> Pour Object, choisissez l'objet Bullet (balle). Pour Layer, marquez 1 (le layer « Main » est le layer 1 - souvenez-vous Construct 2 compte à partir de zéro). Laissez Image point à 0.

Votre évènement devrait ressembler à ça :

Événement pour l'apparition des projectiles

Si vous exécutez le jeu vous remarquerez que les balles partent du milieu du corps du joueur plutôt que du bout de son arme. Corrigeons cela en ajoutant un image point au bout de l'arme (un « image point » est juste une position dans l'image depuis laquelle vous pouvez créer/placer des objets.).

Faites un clic droit sur l'objet « Player » (joueur) dans la barre de projet ou d'objet et sélectionnez Edit animations (éditer les animations).

Menu édition animation

L'éditeur d'images pour le joueur apparaît de nouveau. Cliquez sur l'outil « origin and image points » :

Éditeur d'images

…et la fenêtre d'« image points » s'ouvre :

Image points

Notez que le point d'origine de l'objet apparaît en tant que point rouge. C'est le « hotspot » ou « point de pivot » de votre objet. Si vous tournez l'objet, il tourne autour de son point d'origine. Nous désirons ajouter un autre « image point » pour représenter l'arme donc cliquez sur le bouton vert add (ajouter). Un point bleu apparaît, c'est notre nouvel « image point ». Faites un clic gauche sur le bout de l'arme du joueur afin de placer l'« image point » à cet endroit :

Placer un point sur l'image

Fermez l'éditeur d'image. Double-cliquez sur l'action Spawn an object que nous avons ajouté tout à l'heure et changez Image point à 1 (le point d'origine sera toujours le premier point et rappelez-vous que Construct 2 compte en partant de zéro). Cet évènement devrait maintenant rassembler à ceci :

Image non disponible

et notez bien que cela dit Image point 1 maintenant.

Lancez le jeu. Les balles partent maintenant du bout de votre arme ! Cependant, les balles n'ont aucun effet. Toutefois, vous allez vous rendre compte, lorsque vous aurez pratiqué le système d'évènements, à quel point l'ajout de fonctionnalités est rapide.

Maintenant faisons en sorte que les balles (objet Bullet) tuent les monstres. Ajoutons l'évènement suivant :

Condition : Bullet -> On collision with another object -> Sélectionne l'instance Monster (monstre).

Action : Monster -> Destroy

Action : Bullet -> Spawn another object -> Explosion, layer 1

Action : Bullet -> Destroy

V-B. L'effet d'explosion

Exécutez le jeu et essayez de tirer sur un monstre. Oups, l'explosion a une grosse bordure noire !

Explosion avec bordure

Vous aviez peut-être prévu que cela ressemblerait à l'explosion ci-dessus puis vous vous êtes demandé si votre jeu allait vraiment ressembler à cela ! Ne vous inquiétez pas, ce ne sera pas le cas. Cliquez sur l'objet Explosion, soit dans la barre d'objets en bas à droite, ou dans la barre de projet (qui est en onglet avec la barre de layers). Les propriétés de l'objet apparaissent dans la barre des propriétés à gauche. En bas, sélectionnez la valeur Addidtive de la propriété Blend mode. Maintenant essayez de nouveau le jeu.

Explosion correcte

Pourquoi cela fonctionne-t-il ? Sans entrer dans les détails techniques, les images ordinaires sont copiées par-dessus l'écran. Avec l'effet « additive », chaque pixel est ajouté (comme dans une addition) avec le pixel d'arrière-plan sous lui. Noir est un pixel de valeur 0, donc rien ne s'ajoute, vous ne voyez pas l'arrière-plan noir. Les couleurs plus claires ajoutent plus et donc apparaissent plus visiblement. Ceci est super pour les explosions et les effets de lumière.

V-C. Rendre les monstres un peu plus malins

Pour l'instant, les monstres se « promènent » vers l'extérieur du layout sur la droite. Rendons-les un peu plus intéressants. Tout d'abord, donnons leur un angle aléatoire au départ.

Condition : System -> On start of Layout

Action : Monster -> Set angle -> random(360)

Action monstre

Ils erreront encore pour toujours lorsqu'ils quittent le layout. Gardons-les à l'intérieur. Ce que nous allons faire est de les faire pointer en direction du joueur (objet Player) lorsqu'ils quittent l'espace du layout. Cela permet deux choses : ils restent toujours dans le layout et si le joueur ne se déplace pas les monstres iront directement sur lui !

Condition : Monster -> Is outside layout

Action : Monster -> Set angle toward position -> Pour X, Player.X - Pour Y, Player.Y.

Exécutez le jeu. Si vous attendez un peu vous allez remarquer que les monstres restent dans l'espace du layout et qu'ils vont dans toutes sortes de directions. C'est à peine une IA (intelligence artificielle) mais cela sera suffisant.

Maintenant, supposons que nous voulions tirer sur un monstre cinq fois avant qu'il ne meure au lieu d'instantanément comme à l'heure actuelle. Comment réalisons-nous cela ? Si nous utilisons un seul compteur « Health » (santé) alors lorsque nous aurons touché un monstre cinq fois tous les monstres vont disparaître. À la place, nous avons besoin que chaque monstre se « souvienne » de sa propre santé. Nous pouvons y parvenir à l'aide des variables d'instance (instance variables).

VI. Variables d'instance (Instance variables)

Les variables d'instance permettent à chaque monstre de stocker la valeur de sa propre santé. Une variable est juste une valeur qui change (ou varie) et elles sont stockées séparément pour chaque instance d'où le nom variable d'instance.

Ajoutez une variable d'instance health (santé) à notre objet Monster (monstre). Cliquez sur l'objet dans la barre de projet ou d'objets. Vous pouvez aussi revenir sur la vue de layout et cliquer sur l'objet « Monster » directement. Cela montrera les propriétés de l'objet dans la barre des propriétés. Cliquez sur Add/edit (Ajouter/éditer) dans la section Edit variables (Éditer les variables).

Variable d'instance

La fenêtre des variables d'instance s'affiche. Elle ressemble à la fenêtre des Behaviors que vous avez vue précédemment, mais vous permet d'ajouter et de modifier les variables d'instance de l'objet. Cliquez sur le bouton vert Add (ajouter) pour en ajouter une nouvelle.

Nouvelle variable d'instance : la vie

Dans la boîte de dialogue qui apparaît, tapez health pour le nom (name), laissez Type en tant que Number (nombre/numérique) et comme Initial value (valeur initiale) entrez 5 (comme illustré). Cela donnera cinq points de vie à tous les monstres dès le départ. Quand ils seront touchés la valeur de « health » sera diminuée de 1 et quand « health » tombe à zéro l'objet sera détruit.

Une fois terminé, cliquez sur OK. Remarquez que la variable apparaît maintenant dans la fenêtre de variables d'instance ainsi que dans les propriétés du monstre (vous pouvez rapidement modifier la valeur de départ dans la barre des propriétés, mais pour ajouter ou supprimer une variable d'instance vous devrez cliquer sur le lien Add/Edit (Ajouter/Editer).).

La vie est maintenant ajoutée

VI-A. Modifier les évènements

Retournez dans la feuille d'évènements (Event sheet). Pour l'instant nous détruisons les monstres dès qu'ils sont touchés par une balle. Modifions cela afin de soustraire un point de vie.

Trouvez l'évènement : Bullet - on collision with Monster.

Notez que nous avons une action « destroy monster ». Remplacez-la par une action « subtract 1 from health ». Clic droit sur l'action « destroy monster » et cliquez sur Replace (remplacer).

Remplacement d'action

La même fenêtre que si vous étiez en train d'ajouter une action s'affiche, mais cette fois elle remplacera l'action que vous avez sélectionnée à la place. Choisissez Monster => Substract from (dans la catégorie Instance variables) -> la variable d'instance « health » et entrez 1 en tant que Value (valeur). Cliquez sur Done (fini). L'action devrait maintenant apparaître comme suit :

Soustraction de vie

Maintenant quand nous touchons un monstre avec une balle, il perd un point de vie et la balle explose mais nous n'avons pas encore fait d'évènement pour tuer le monstre quand sa vie est à 0. Ajoutons un nouvel évènement :

Condition : Monster -> Compare instance variable -> Health, Less or equal, 0

Action : Monster -> Spawn another object -> Explosion, layer 1

Action : Monster -> Destroy

On explose le monstre !

Pourquoi « less or equal 0 » (moins ou égal à 0) plutôt que « equals 0 » (égal à 0) ? Supposons que vous ajoutiez une arme plus puissante qui soustrait 2 de health (santé). Lorsque vous tirez sur un monstre, sa santé ira de 5, 3, 1, -1, -3

Remarquez qu'à aucun moment health ne sera directement égal à 0, donc le monstre ne mourrait jamais !

Ainsi c'est une pratique correcte d'utiliser « less or equal » (moins ou égal) pour tester si quelque chose n'a plus de vie (health).

Exécutez le jeu. Vous devez désormais toucher les monstres cinq fois pour les tuer !

VII. Garder le score

Maintenant, ajoutons un score pour que le joueur sache qu'il a bien joué. Nous aurons besoin d'une variable de plus pour ceci. Vous pourriez penser « mettons le score en tant que variable d'instance de l'objet 'Player' ». Ce n'est pas mal a priori, mais souvenez-vous que la valeur sera stockée « dans » l'objet. S'il n'y a pas d'instance de l'objet, il n'y a pas de variables d'instance non plus ! Donc si vous détruisez le joueur, vous ne pouvez plus savoir quel était le score car la valeur a disparu avec l'instance.

À la place, utilisez une global variable (variable globale). Comme une variable d'instance, une variable globale (ou juste « globale ») peut stocker du texte ou un nombre. Chaque variable peut stocker un nombre ou un seul morceau de texte. Les variables globales sont aussi disponibles à travers tous les layouts, utile si vous voulez ajouter d'autres niveaux.

Faites un clic droit dans l'espace en bas de l'event sheet (feuille d'évènements) et sélectionnez Add global variable (ajouter une variable globale).

Ajout variable globale

Entrez Score en tant que nom (name). Les autres champs sont OK, cela fera commencer le nombre (number) à 0.

Ajout du score

Maintenant la variable globale apparaît en tant qu'une ligne dans la feuille d'évènements. Elle est placée dans cette event sheet mais est accessible depuis n'importe quelle autre event sheet depuis n'importe quel autre layout.

La variable de score

Il y a aussi des local variables (variables locales) qui ont une plus faible « portée » et ne peuvent être accédées que par des évènements « proches ». Pour l'instant nous n'avons pas besoin de nous soucier de celles-ci.

Donnez au joueur un point à chaque fois qu'il tue un monstre. Dans votre évènement « Monster : health less or equal 0 » (la variable d'instance « health » (santé) de l'objet « Monster » (monstre) est inférieure ou égale à 0 quand un monstre meurt, donc)), cliquez sur Add action (ajouter une action) et sélectionnez System -> Add to (ajouter dans la catégorie « Global & local variables ») -> Score, value (valeur) 1.

Maintenant l'évènement devrait ressembler à ceci :

Événement sur le score

Désormais le joueur a un score qui augmente de 1 pour tout monstre tué, mais il ne peut pas le voir ! Affichons le score à l'aide de l'objet « text » (texte).

VIII. Créer un affichage tête haute (heads-up display (HUD))

Un affichage tête haute (aussi appelé HUD en anglais) est l'interface qui montre la vie (health) du joueur, son score et d'autres informations en cours de jeu. Créons un HUD très simple à l'aide de l'objet « text ».

Le HUD reste toujours à la même place à l'écran. Si nous avons quelques objets d'interface, nous ne voulons pas qu'ils « scrollent » à mesure que le joueur (Player) se déplace, ils devraient plutôt rester à l'écran en permanence. Par défaut les layers « glissent » (scroll). Pour les garder à l'écran, nous pouvons utiliser le réglage Parallax des layers. La parallaxe permet à différents layers de « scroller » à différentes vitesses les uns par rapport aux autres dans un effet de pseudo 3D. Si nous mettons la parallaxe d'un layer à 0, le layer ne glissera pas du tout, idéal pour un HUD.

Retournez à la barre de couches (layers) que nous avons utilisé précédemment. Ajoutez un nouveau layer nommé HUD. Assurez-vous qu'il soit au niveau supérieur (en premier dans la liste) et qu'il soit sélectionné (souvenez-vous cela active le layer). La barre des propriétés devrait afficher ses propriétés. Fixez la valeur de la propriété Parallax à 0, 0 (0 sur l'axe des X et des Y).

Double-cliquez dans un espace du layout pour insérer un nouvel objet. Cette fois-ci sélectionnez l'objet Text (texte). Placez-le dans le coin supérieur gauche de votre layout. Cela sera difficile à voir si le fond est noir, donc dans la barre des propriétés rendez l'objet en gras (bold), italique (italic), de couleur jaune et choisissez une taille un peu supérieure pour la police. Redimensionnez l'objet de manière assez large pour qu'il puisse afficher tout le texte. Cela devrait ressembler à quelque chose comme ça :

Du texte à l'écran

Retournez à la feuille d'évènements. Faites en sorte de mettre à jour le contenu de l'objet « Text » avec le score du joueur. Dans l'évènement Every tick (tous les ticks) que nous avons ajouté précédemment, ajoutez une action TextSet text (définir le texte).

En utilisant l'opérateur & vous pouvez convertir un nombre en texte et l'adjoindre à un autre bout de texte. Pour la valeur « Text » entrez :

« Score: » & Score

La première partie (« Score: ») veut dire que le texte affiché commencera toujours avec les mots Score:. La seconde partie (Score) est la valeur de la variable globale (global variable) « Score ». Le & « joint » les deux parties en une seule et même ligne de texte.

Exécutez le jeu et tirez sur des monstres. Votre score apparaît et reste à la même position à l'écran malgré vos déplacements !

IX. Finitions

Vous avez presque fini. Ajoutons les dernières touches à notre jeu.

Tout d'abord, faites en sorte d'avoir des monstres qui « spawnent » (« naîssent ») de manière régulière autrement une fois que vous aurez tué tous les monstres créés dans l'éditeur, il n'y aura plus rien à faire. Vous allez créer un nouveau monstre toutes les trois secondes. Ajoutez un nouvel évènement :

Condition : System -> Every X seconds -> 3

Action : System -> Create object -> Monster, layer 1, 1400 (pour X), random(1024) (pour Y)

1400 est une coordonnée X juste à la droite du bord du layout et random(1024) est une coordonnée Y aléatoire qui appartient à la portée de la hauteur du layout (height).

Enfin, faites en sorte que les monstres tuent le joueur.

Condition : Monster -> On collision with another object -> Player

Action : Player -> Destroy

X. Conclusion

Félicitations, vous avez fait votre premier jeu en HTML 5 avec Construct 2 ! Si vous avez un serveur et que vous désirez montrer votre travail, cliquez sur Export (exporter) dans le menu File (fichier). Construct peut sauver tous les fichiers du projet dans un dossier de votre ordinateur que vous pouvez ensuite télécharger (upload) vers un serveur et/ou intégrer à une page web. Si vous n'avez pas de serveur disponible, vous pouvez partager votre jeu avec Dropbox.

Vous avez appris des bases essentielles à propos de Construct 2 : insérer des objets, utiliser les layers, les behaviors, les évènements et plus encore. Espérons que ce tutoriel vous a bien préparé à apprendre plus de Construct 2 ! Essayez d'explorer ses fonctionnalités et voir ce qu'il peut faire pour vous.

X-A. Le truc fini

Essayez de télécharger le projet tutoriel complet. J'ai (Ashley) ajouté des fonctionnalités en plus telles qu'un texte « Game over » et des monstres qui vont de plus en plus vite à mesure que le temps passe. Étant donné ce que vous savez maintenant, il ne devrait pas être trop difficile de deviner comment cela fonctionne. Il y a aussi beaucoup de commentaires (en anglais) qui décrivent le fonctionnement du jeu.

Bien joué ! Si vous avez le moindre problème ou si vous pensez que certaines parties du tutoriel pourraient être améliorées, laissez un commentaire ou un message dans les forums. Et montrez-nous de quoi vous êtes capables !

Enfin, si vous avez aimé ce tutoriel et pensez que l'une de vos connaissances pourraient aussi apprécier Construct 2, pourquoi ne pas lui envoyer le lien ? Cela ne peut faire de mal à personne.

X-B. Encore plus de lecture

Vous voulez ajouter de la musique et des effets sonores ? Allez lire Sounds & Music dans le manuel pour un aperçu rapide.

Vous pouvez être intéressés par le guide du débutant alternatif basé sur les jeux de plate-forme : How to make a platform game.

Si vous voulez en apprendre plus à propos de comment fonctionnent les évènements dans Construct 2 soyez sûrs de lire la section How Events Work dans le manuel.

C'est hautement recommandé afin de vous permettre à créer rapidement vos propres projets !

Et pour encore plus d'informations, n'oubliez pas la documentation complète dans le manuel (en anglais à l'heure d'écriture).

XI. Remerciements

Cet article a été originellement publié par Ashley sur le site officiel de Construct2.


Note de traduction : je préfère garder les noms anglais ici, car les exemples d'évènements plus tard dans le tutoriel auront ces mêmes noms.

  

Licence Creative Commons
Le contenu de cet article est rédigé par Ashley et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.