I. Préface▲
I-A. Blocs de construction - les objets à insérer▲
Un jeu de plate-forme est construit avec deux types d'objets :
- Les Solids(solides) qui représentent le sol et les murs restreignant les mouvements du joueur ;
- Les Platform (plates-formes) ayant un nom, ce qui peut, au début, apporter une confusion : plutôt que d'être la plate-forme sur laquelle les joueurs se battent, courent et sautent, ce sont des objets qui décrivent le comportement d'un solide.
L'avantage de l'objet Platform avec Construct 2 est que vous avez tous les comportements de base que vous pouvez attendre, et ce, sans écrire une seule ligne de programmation. Voici quelques exemples :
- lorsque vous appuyez sur les touches gauche et droite, les objets Platform se déplacent à droite et à gauche (en modifiant ces touches, vous pouvez utiliser les touches ‘A' et ‘D' ou les replacer par des actions tactiles sur les appareils mobiles) ;
- lorsque vous appuyez sur la touche Maj, en temps normal, ils sautent (une fois encore, vous pouvez changer cette touche et la remplacer par un geste tactile) ;
- lorsqu'ils n'ont pas d'objets solides sous eux, les objets Platform tombent.
II. Partie 1 : Commencer à construire▲
Je suppose que vous avez suivi le « Guide pour débutant de Construct 2 », donc je vais essayer d'éviter de répéter ce que vous y avez déjà appris.
II-A. Le modèle du joueur▲
Pour vous aider à prendre votre envol (sauter, courir), j'ai constitué un projet très basique. Téléchargez-le ici et il nous servira de fondation pour ce jeu :
Voici ce que vous voyez :
- quatre planchers de différentes hauteurs avec différentes longueurs, de sorte que les écarts entre eux augmentent la difficulté de sauter de l'un à l'autre. Cliquez dessus et vous verrez que le type d'objet est « Flooring » ;
- deux murs de chaque côté. Cliquez dessus et vous constaterez que le type d'objet est « Wall » ;
- un joueur à l'étage inférieur. (Tim, du très acclamé jeu de plate-forme Braid - son graphiste, David Hellmann a généreusement rendu les images disponibles gratuitement).
L'objet Tim est d'un type « Player ». Vous remarquerez, en regardant attentivement, que l'objet « Player » est un simple rectangle bleu et en dessous, il y a un autre type d'objet nommé « PlayerImages ». Pourquoi avoir fait une telle séparation ?
En fait, si vous regardez les recommandations du manuel : « pour le mouvement de la plate-forme la plus fiable, il est recommandé d'utiliser un sprite, rectangle invisible, sans animation avec le mouvement de la plate-forme. Ensuite, l'objet du joueur peut être positionné au-dessus de ce dernier. Sinon, la taille changeante et le polygone de collision de l'objet lorsque l'animation est active peuvent interférer avec le plancher, le mur et la détection du mouvement de la plate-forme causant une secousse ou un mouvement « glitch ».
En ce sens, vous pouvez cliquer sur « Player » dans la barre des projets et regardez sous l'onglet « Object type properties », à gauche, vous verrez que « Initial visibility » contient la valeur « invisible ». C'est ce qui sera utilisé par nos actions et épinglé à l'objet « PlayersImages » avec une taille et un polygone de collision qui changeront en fonction des comportements des animations du joueur. Ainsi, vous aurez des résultats de détection fiables. Regardez dans le layout, vous verrez que Tim est debout dans la bordure bleue de l'objet du joueur (visible heureusement dans le layout, mais invisible lorsque le jeu tourne).
III. Explorer les animations▲
Regardez les animations du « PlayerImages » que nous allons utiliser. Cliquez sur « PlayerImages » dans la barre du projet et à votre gauche dans la section « Properties », appuyez sur « Edit » en dessous de l'élément « Animations ». Vous devriez voir la fenêtre « Animations » comme ci-dessous (cliquer sur « Running » pour voir les cinq images de cette animation dans la fenêtre) :
Maintenant, exécutez le layout pour voir le résultat dans votre navigateur. Avez-vous essayé d'appuyer sur les touches directionnelles ? Et avez-vous été déçu ? C'est parce que nous n'avons pas encore attribué les comportements aux objets, ni même ajouté les événements qui utilisent ces comportements. Bref, ajoutons-les !
Cliquez sur l'objet « Flooring » dans la barre des projets. Ensuite, cliquez sur « Behaviors » dans la section « Behaviors » : « Add / Edit - Behaviors ». Ajoutez un comportement en cliquant sur le « plus » et sélectionner « solid » (sous l'onglet « Attributes »).
Faites de même pour l'objet « Wall ».
Cliquez sur l'objet « Player » dans la barre des projets et créez un nouveau comportement en choisissant cette fois le comportement « Platform » (sous l'onglet « Movements »).
Rappelez-vous que nous avons besoin d'épingler l'objet « PlayerImages » à l'objet « Player ». Ceci dit, cliquez sur « PlayersImages » dans la barre des projets et donnez-lui le comportement « Pin » (sous l'onglet « Général »).
Exécutez de nouveau le layout. Toujours pas de mouvement ? Eh bien, oui, il y en a en fait. Seulement, vous ne pouvez pas le voir, parce que l'objet du joueur est … invisible, vous vous souvenez ? Si vous changez temporairement sa visibilité initiale à « Visible », vous allez voir que le joueur bouge en effet comme les mouvements de l'objet Platform. Il n'a pas l'air très intéressant, même quand il est visible. En ce sens, habillons-le :
Cliquez sur l'onglet « Event sheet 1 » (Pour décrire les événements à ajouter, nous allons utiliser la notation de Ashley dans son guide du débutant.)
Condition : System → On start of layout
Action : PlayerImages → Pin: Pin to object → pour Object, choisissez l'objet Player
Action : PlayerImages → Set animation → pour Animation, insérez "Standing" (laissez 'From' pour 'beginning')
Exécutez de nouveau le layout. Maintenant, vous devriez voir Tim glisser le long du plancher lorsque vous appuyez sur les touches directionnelles, s'arrêter lorsqu'il se cogne dans un mur et le meilleur, sauter quand nous appuyons sur la flèche du haut. Tentez de voir si vous pouvez le faire aller du premier au dernier étage. Cependant, restez vigilant, parce que s'il tombe, il peut complètement sortir du jeu.
Tim va bientôt user ses chaussures brillantes s'il continue à glisser le long du plancher, corollairement nous avons besoin de le faire courir. Ajoutez un autre événement :
Condition : Player → Platform: On moved
Action : PlayerImages → Set animation → pour Animation, insérez "Running" (laisser 'From' pour 'beginning')
Exécutez de nouveau le layout et remarquez trois effets irréalistes :
- il court en marche arrière au lieu de tourner et de courir vers l'avant ;
- il continue à courir même après avoir heurté un mur ;
- il continue à courir sur place lorsque vous n'appuyez pas sur les touches directionnelles.
Pour faire face à la première problématique, nous avons évidemment besoin d'une autre animation montrant Tim en train de courir dans l'autre sens. Cependant, il n'y en a pas, et la bonne nouvelle, c'est que vous n'en avez pas besoin. Grâce à l'intelligence de Construct 2, il y a une démarche facile à suivre pour qu'il se retourne et coure dans l'autre sens. Ajoutez un autre événement :
Condition : Keyboard → Key is down → press the left arrow key
Action : PlayerImages → Set mirrored (sous 'Animations') (laissez 'Mirrored' tel quel)
Exécutez de nouveau le layout. Ah ! Enfin, Tim commence à courir à gauche même si vous le faites aller vers la droite. Ajouter un autre événement :
Condition : Keyboard → Key is down → press the right arrow key
Action : PlayerImages → Set mirrored → et cette fois, sélectionnez 'Not mirrored'
Maintenant, Tim court de manière beaucoup plus réaliste, sauf lorsqu'il fonce dans un mur où il continue toujours de courir. Deux événements supplémentaires sont requis :
Condition : Player → Platform: Is by wall → Side: left
Action : PlayerImages → Set animation → insérez "Standing" (laissez 'From' pour 'beginning')
Condition : Player → Platform: Is by wall → Side: right
Action : PlayerImages → Set animation → "Standing"
Maintenant, Tim possède un comportement beaucoup plus réaliste lorsqu'il heurte un mur. Toutefois, cette solution au deuxième problème a créé un effet secondaire indésirable. L'avez-vous repéré ? Oui, il reste dans la position debout lorsque vous vous éloignez du mur. Ce n'est pas suffisant de vérifier s'il est contre un mur avant de le mettre debout. Nous devons vérifier s'il est en mouvement ou non. Par conséquent, nous devons ajouter une deuxième condition :
Clic droit sur la condition « Platform has wall to left » et sélectionner « Add another condition »
Condition : Player -> Platform: Is moving
Mais ce n'est pas ce que nous voulons, mais le contraire. Pas de problème, nous inversons simplement la condition :
Faites de même pour la condition « Platform has wall to right ». Résolu !
Maintenant, pour résoudre le dernier problème où Tim continue de courir sans que vous n'appuyiez sur les touches. Peut-être qu'à ce niveau, vous pouvez trouver par vous-même ce dont vous avez besoin :
Condition : Player → Platform: On stopped
Action : PlayerImages → Set animation → "Standing"
Enfin, Tim se déplace (et arrête de bouger) de façon beaucoup plus réaliste.
IV. Conclure les animations▲
Reste à ajouter les finitions pour conclure la première section du tutoriel. Toutefois, nous ferons encore une chose pour rendre le jeu plus simple à jouer.
Je suppose que vous avez remarqué que si Tim arrive à manquer un palier, il tombe (c'est un autre comportement que vous obtiendrez avec les objets Platform). S'il n'y a pas de plancher pour stopper sa chute, il va continuer de tomber jusqu'à ce qu'il soit complètement hors du layout. Pour éviter d'avoir à régénérer le layout de nouveau, nous pourrions le ramener sur le premier plancher (sans doute au détriment d'un déclin de sa santé, si nous ajoutons un score). Voilà comment faire :
Condition : Player → Is outside layout (sous 'Size & Position')
Action : Player → Set position -> X: 370, Y: 100
C'est suffisant pour le faire tomber et atterrir sur le plancher inférieur, mais si nous ne changeons par l'animation de « PlayerImages », il semble continuer à tomber même après avoir atterri. Donc, nous allons changer l'animation pour « Standing », sauf que nous allons aussi avoir besoin de couvrir la situation où Tim tombe d'un étage tout en laissant notre doigt enfoncé sur une flèche directionnelle, donc il atterrit en courant.
Cela signifie que l'animation qui résulte de la condition « Platform On landed » dépendra d'une autre condition : si le joueur est en mouvement ou non. Deux sous-événements « either/or » sont nécessaires.
D'abord, ajoutons l'événement principal :
Condition : Player → Platform On landed
Ensuite, faites un clic droit sur la flèche verte sur l'extrême gauche de l'événement et dans le menu déroulant qui apparait, sélectionnez « Add », puis dans le sous-menu, sélectionnez « Add sub-event » :
Condition : Player → Platform: Is moving
Action : PlayerImages → Set animation -> "Running"
Maintenant, ajoutez un autre sous-événement avec le même état.
Condition: Player → Platform: Is moving → inversez-le
Action: PlayerImages → Set animation → "Standing"
Pendant que nous y sommes, nous allons lui donner une expression alarmante lorsqu'il tombe :
Condition : Player → Platform: On fall
Action : PlayerImages → Set animation -> "Falling"
Eh bien, c'est la fin de la première partie de ce tutoriel sur les plates-formes. La prochaine partie aborde les éléments clés d'un système de points des jeux de plate-forme ; nous avons besoin de faire la distinction entre les différents étages et les différents points qui se produisent sur chacun d'eux.
Avant de poursuivre, vous aimeriez probablement essayer de changer les propriétés de comportement de la plate-forme pour le joueur en voyant l'effet qu'il peut y avoir sur le comportement de Tim (et comment il rend le jeu plus facile ou plus difficile) :
Un autre changement que vous pouvez expérimenter est la vitesse de « PlayerImages » (dans la barre des propriétés lorsque vous choisissez « Animations - Edit » et ci-contre « Speed » comme images par secondes) :
V. Partie 2 : le système de points▲
Dans les jeux de plates-formes, le score a généralement besoin de tenir compte de l'emplacement particulier où chaque événement se produit. Avant d'aborder cette question, voici le système de points que nous allons utiliser dans ce tutoriel :
- Tim gagne des points lorsqu'il saute d'un étage à un autre étage :
- +1 pour le premier étage (« notation anglaise », le sol où il se trouve est le rez-de-chaussée et le premier est le suivant ; tout comme des tableaux en partant de l'indice zéro),
- +2 pour le deuxième étage,
- +7 pour l'étage supérieur (reflétant la difficulté de s'y rendre !) ; - Un score de 25 points est nécessaire pour passer au niveau suivant (donc Tim devra continuellement sauter entre les étages pour gagner suffisamment de points) ;
- Il obtient des points seulement lorsqu'il saute sur un plancher, et non lorsqu'il descend d‘un étage ;
- Il a trois points de vie pour commencer et perd un point chaque fois qu'il tombe en dehors du layout ;
- La partie est terminée quand sa santé tombe à 0.
De toute évidence, nous avons besoin de connaitre sur quel étage Tim vient de sauter, de sorte que nous pouvons lui accorder les points appropriés à l'étage en question. Et nous avons besoin d'une façon de dire que Tim s'est déplacé vers le haut ou vers le bas.
Tout d'abord, nous créons deux variables globales pour conserver les changements de valeurs pour le pointage et pour la vie de Tim, et leur donnons les valeurs par défaut nécessaires.
Ajoutez la variable globale : score (en laissant le type par défaut comme « Number » et la valeur initiale 0).
Ajoutez la variable globale : health (en laissant le type par défaut comme « Number » et la valeur initiale 3).
(Si vous n'êtes pas certain de savoir comment créer ces variables, regarder l'article Le guide du débutant à Construct 2.)
La valeur initiale du pointage devra être restaurée lorsque Tim tombera en dehors du layout et retombe par le haut ; sa vie devrait diminuer de un.
Maintenant, comment pouvons-nous dire si Tim se déplace vers le haut ou vers le bas ? En fait, si nous savons à quel étage il est à l'heure actuelle et à quel étage il était lorsque nous avions vérifié, nous pouvons comparer les deux valeurs : si la valeur du plancher où il se trouve est supérieure à la valeur du plancher précédente, il s'est déplacé vers le haut, et vice versa.
En ce sens, nous devons d'abord enregistrer le niveau de chaque étage. Pour ce faire, nous avons mis des attributs pour chaque instance de l'objet « Flooring » (en d'autres mots, pour chaque étage du layout). C'est expliqué dans Le guide du débutant à Construct 2. Dans la capture d'écran ci-dessous, chaque point numéroté correspond à l'étape numérotée dans les instructions qui suivent :
- Allez à la vue du « Layout 1 » et cliquez sur l'étage inférieur ;
- Dans la barre des propriétés, cliquez sur « Edit variables : Add / edit » et la fenêtre « Flooring : Instance variables » va ouvrir ;
- Cliquez sur l'icône « Add » et dans la boite de dialogue « New instance variable » ;
- Saisissez « floor » pour « Name » et appuyez sur « OK » (laissez les autres champs avec leurs valeurs par défauts). Ne fermez pas la fenêtre « Flooring : Instance variables », nous allons profiter de cette occasion pour définir la valeur des points pour chaque étage.
Appuyez sur l'icône « Add » de nouveau et ajoutez une seconde variable d'instance nommée « points ». (Encore une fois, laissez les autres champs à leurs valeurs par défaut.)
Vous devriez voir ces deux variables d'instance apparaitre dans la barre des propriétés :
C'est ce qui définit le plancher et les valeurs points pour le rez-de-chaussée. Maintenant, nous devons faire la même chose pour les autres planchers. Encore dans la vue du « Layout 1 », appuyez sur le premier plancher. Dans la barre des propriétés, replacez chaque « 0 » pour « floor » et « point » par 1 :
Cliquez sur le deuxième plancher et donnez-lui 2 pour « floor » et 2 pour « points ». Donnez à l'étage supérieur 3 pour le « floor » et 7 pour « points ».
VI. Terminer le système de points▲
Rappelons que pour dire si Tim se déplace vers le haut ou vers le bas, nous avons besoin de savoir sur quel étage il était lorsque nous avions vérifié la dernière fois. Ainsi, nous allons ajouter une autre variable globale que nous allons utiliser pour contenir le niveau de l'étage précédent.
Ajouter une variable globale : « prevFloor » (laissez le type par défaut à 'Number' et la valeur initial à 0).
Chaque fois que Tim tombe en dehors du layout, nous réinitialisons la valeur initiale de « prevFloor » dans Player → Is outside layout event.
Action : System -> Set value → prevFloor: 0
Nous pouvons maintenant faire usage de tous ces éléments ajoutés pour allouer à Tim le nombre approprié de points lorsqu'il saute sur un plancher (et y reste). Cependant, comment notre jeu sait sur lequel des planchers il a sauté ?
Eh bien, rappelons que nous avons ajouté une variable « floor » à « Flooring » dont la valeur correspond au niveau du plancher. Ainsi, une fois que le joueur a atterri sur un plancher, nous pouvons tester cette valeur et augmenter le score par la valeur correspondante à l'instance de la variable « point ». Nous avons juste besoin de savoir sur quelle instance du « Flooring » le joueur a atterri. Nous pouvons le faire en ajoutons une deuxième condition à « Player | Platform On landed event » :
Clic droit sur la condition « Player | Platform On landed » et ajoutez cette condition :
Flooring → (Pick) Pick nearest/furthest → (Which) nearest / (X) Player.X / (Y) Player.Y
Qu'est-ce que nous venons d'obtenir ? Eh bien, le manuel où le fonctionnement des événements est expliqué, indique : « the instances involved ... are 'picked' for the event. Then, the actions run for just the instances picked by the conditions » (les instances concernées sont … “choisies” pour l'événement. Ensuite, les actions s'activent uniquement pour les instances choisies par les conditions.) Dans ce cas, cela signifie qu'à chaque fois que le joueur atterrit, quelle que soit l'instance « Flooring », la plus proche sera choisie de sorte que lorsque nous ajoutons un sous-événement « System add Flooring.points to score » (ce que nous sommes sur le point de faire) et lorsque l'action s'exécute, le système connait exactement le nombre de points à ajouter sans que nous ayons à ajouter des événements séparés pour chaque instance de « Flooring ». C'est ce qui fait la puissance de Construct 2.
Maintenant, nous avons juste à ajouter les actions supplémentaires qui seront exécutées lorsque le joueur atterrira sur un plancher. Ces actions seront ajoutées en tant que sous-événements de la condition « Player | Platform On landed / Flooring | Pick nearest ... twin » :
Condition : System → Compare two values → First value: prevFloor Comparison: Less than Second value: Flooring.floor
Action : System → (Global & local variables) Add to → Variable: score Value:Flooring.points
Action : System → (Global & local variables) Set value → Variable: prevFloor
Value : Flooring.floor
Condition : System → Compare two values → First value: prevFloor Comparison: Greater or equal Second value: Flooring.floor
Action : System → (Global & local variables) Set value → Variable: prevFloor
Value : Flooring.floor
Après tout ce travail, nous n'avons rien pour le montrer ! Il est temps de créer le HUD (head-up display) (affichage tête haute).
Comme le montre la section 8 du guide du débutant à Construct 2, nous avons besoin d'ajouter un nouveau calque nommé « HUD ». (Assurez-vous qu'il est au sommet et sélectionné.) Sur ce, insérez deux objets de texte, un en haut à droite nommé « Status Text » et un autre dans le centre de l'écran nommé « ResultText » (vous pouvez définir l'objet « Text » dans les propriétés à une police un peu moins simple). « StatusText » sera utilisé pour garder la trace du score et de la vie, « ResultText » affichera soit « Game over » lorsque la vie de Tim baisse à zéro, ou « Level 2 reached » s'il arrive à l'étage supérieur avec un score de 25 ou plus (nous laissons le changement présent au niveau suivant pour une autre partie de ce tutoriel).
Maintenant, nous pouvons ajouter un autre sous-événement pour la condition « Player | Platform On landed / Player | Is overlapping Flooring twin » afin de montrer quand le niveau 2 va être atteint. Ce sous-événement a une paire de conditions :
Condition : Flooring → Compare instance variable -> floor: Equal to: 3
Condition : System → (Global & local variables) Compare variable ->Variable: score: Greater or equal: 25
Action : ResultText → Set text: ''Level 2 reached"
Maintenant, pour l'affichage du « Game over » et la réinitialisation de la vie de Tim pour le prochain tour, ce sera un nouvel événement (nous avons fini avec les sous-événements) :
Condition : System → (Global & local variables) Compare variable ->Variable: health: Equal to: 0
Action : ResultText → Set text: ''Game over"
Action : System → (Global & local variables) Set value → health: 3
Action : System → (Time) Wait → Seconds: 3
Action : ResultText → Set text: ''" (blanking out 'Game over', ready for the next round)
Enfin, lorsque le jeu est en cours, nous devons garder le score et l'état de santé continuellement mis à jour :
Condition : System → Every tick
Action : StatusText → Set text: "Score: " & score & " Health: " & health
VII. Conclusion▲
Pendant ce temps, si vous trouvez le jeu trop difficile, rappelez-vous qu'en tant que créateur du jeu, vous êtes libre de modifier les propriétés du comportement de la plate-forme pour le joueur.
Voici un petit cadeau pour ceux qui ont suivi jusqu'au bout… la version en ligne !
VIII. Remerciements▲
Cet article a été originellement publié par Velojet sur le site officiel de Construct2.
Merci à LittleWhite pour la relecture technique et à milkoseck pour la relecture orthographique.
