Partie 5 : Ajouter des pièces et des points

Introduction

Avec la Partie 4 terminée, vous devriez maintenant avoir un niveau et un personnage jouable capable de courir et de sauter.

Nous devons maintenant donner un but à notre joueur. Pour cette partie du tutoriel, nous allons ajouter des pièces collectables et un score pour les suivre.

Les pièces cachées dans des blocs sont l'une des caractéristiques les plus emblématiques de Mario. Commençons ce tutoriel en créant cette fonctionnalité.

Cacher des Pièces dans des Blocs

Heurter le Bloc

Nous allons créer notre premier bloc de manière à pouvoir le modifier rapidement pour contenir autant de pièces que nous le souhaitons. Une fois le bloc terminé, vous pouvez le dupliquer et le placer où vous le souhaitez.

Ce tutoriel s'appuie sur la Partie 4 et suppose que vous avez extrait le projet de la Partie 4 depuis le hub.

Commencez par sélectionner l'un des blocs qui contiendra des pièces. Dans les propriétés de l'objet, appuyez sur le bouton "Comportements" pour ouvrir l'éditeur de comportement.

Dans la catégorie Objet, ajoutez le comportement Collision. Le comportement Collision déclenchera un événement chaque fois que 2 objets spécifiés se touchent.

Appuyez sur le comportement Collision que vous avez ajouté pour voir ses propriétés. Vous pouvez voir qu'il a 2 cases pour les objets sélectionnables (Appelés Objet A et Objet B). Le premier (Objet A) est sélectionné pour vous, et c'est celui auquel vous appliquez les comportements. Vous pouvez appuyer pour le changer si vous le souhaitez, mais nous allons le laisser tel quel.

La case vide est pour votre deuxième objet (Objet B), que le comportement de collision vérifiera. Appuyez sur la case vide et sélectionnez votre personnage joueur que vous avez ajouté dans la Partie 4 du guide.

Avec vos objets sélectionnés, vous pouvez maintenant changer quelle partie de Objet B déclenchera l'événement de collision. Désactivez tous les bascules, sauf l'option "Sur le Dessus". Désormais, le comportement de collision fonctionnera uniquement lorsque le dessus du personnage joueur touche le bloc.

Maintenant que le bloc vérifie si la tête des joueurs le touche, faisons-le rebondir de haut en bas. Pour ce faire, nous allons utiliser les comportements Déplacer de, pour le déplacer vers le haut, puis revenir vers le bas.

Dans la catégorie Transform, ajoutez le comportement Déplacer de et reliez-le au comportement de collision que vous avez précédemment ajouté.

Appuyez sur le comportement Déplacer de et examinez ses propriétés. Puisque nous voulons que le bloc monte lorsque le joueur le frappe, nous allons changer la Valeur Y. Réglez ceci sur un petit nombre car nous voulons seulement donner un petit effet de rebond. J'ai utilisé 0.20 Mètres.

Vous devrez également changer la Durée. La durée est le temps nécessaire pour que le déplacement soit terminé. Par défaut, la durée est réglée sur 1, mais cela signifie que le bloc se déplacera de 0,2 mètres en 1 seconde. C'est beaucoup trop lent pour nos besoins. Changez la durée en 0.10 Secondes.

Remarque : Réglage d'une durée de zéro, provoquera un déplacement instantané de votre objet vers la nouvelle position. Il ne s'animera pas en douceur. De plus, notez la case avec le texte "Linéaire". C'est l'effet d'animation qui est appliqué à votre déplacement. Si votre comportement a une durée, il se déplacera selon cet effet.

Maintenant, pour faire rebondir le bloc, ajoutez un autre comportement Déplacer de et reliez-le au précédent.

Encore une fois, modifiez les propriétés. Cette fois, nous voulons que le bloc redescende. Pour ce faire, changez la Valeur Y en un nombre négatif. Puisque nous voulons que le bloc revienne à sa position d'origine, nous allons le déplacer de -0.20 Mètres. Vous devrez également changer la durée en 0.10 Secondes.

À ce stade, si vous appuyez sur play, votre joueur peut frapper le bloc par le bas et le bloc rebondira de haut en bas. Cependant, il y a quelques problèmes que nous devons résoudre.

1. Il y a un petit bogue dans notre logique. Si le joueur continue à sauter très rapidement sans laisser le bloc revenir à sa position d'origine, il continuera à monter.

2. Le bloc rebondit indéfiniment. Que se passe-t-il si vous voulez juste quelques pièces, puis il s'arrête quand il est vide ?

3. Il ne donne pas encore de pièces.

Commençons par résoudre le problème 1. C'est en fait un bogue simple à corriger. Tout ce que nous avons à faire est de désactiver le comportement de collision dès que le joueur l'atteint, puis de le réactiver une fois qu'il a terminé de se déplacer.

Pour cela, passez à la catégorie Personnalisé et ajoutez "Comportement Désactivé", puis reliez cela au comportement Collision.

Ensuite, dans les propriétés du Comportement Désactivé, appuyez sur la case vide intitulée "Sélectionner Comportement". Dans la liste, localisez le comportement de collision correct. Notez que la liste montre tous les comportements, de tous les objets. La liste est triée par nom d'objet.

Vous devez maintenant réactiver le comportement de collision lorsqu'il a terminé de rebondir. Pour ce faire, ajoutez simplement un Comportement Activé de la catégorie Personnalisé et reliez-le au deuxième comportement Déplacer de. Dans les propriétés du comportement, assurez-vous de sélectionner le comportement de collision à réactiver.

Pour le problème 2, nous allons utiliser un conteneur de boîte pour définir le nombre de pièces que chaque bloc contient. Cela permet de modifier facilement certains blocs pour qu'ils aient plus ou moins de pièces.

La première chose à faire est d'ajouter un conteneur de boîte depuis la catégorie Personnalisé, que vous pouvez placer n'importe où sur l'écran car il ne se connecte à rien d'autre. Vous pouvez également renommer ce conteneur de boîte en "Pièces" pour le retrouver plus facilement plus tard (pour vous rappeler comment renommer les comportements, consultez la Partie 4)

Dans les propriétés de comportement du Conteneur de Pièces, changez la propriété "Valeur par Défaut" à 3. Cela correspondra au nombre de pièces que le bloc contient.

Ensuite, dans la catégorie Logique, ajoutez un comportement Ajouter des Valeurs et reliez-le au deuxième Déplacer de que nous avons ajouté plus tôt. Nous allons utiliser ce comportement Ajouter des Valeurs pour suivre chaque fois que le joueur frappe le bloc.

Une fois le comportement "Ajouter des Valeurs" connecté, appuyez dessus pour voir les propriétés du comportement. Les propriétés affichent 2 champs de saisie, et le comportement "Ajouter des Valeurs" renverra la somme des valeurs saisies.

Dans notre cas, puisque nous utilisons la valeur d'ajout pour suivre chaque frappe, nous entrerons 1 dans le champ supérieur, et pour le champ inférieur, nous renverrons la somme du comportement "Ajouter des Valeurs" dans le deuxième champ d'entrée.

Ce que cela fait, c'est incrémenter la somme chaque fois que le comportement s'exécute. La première fois que le comportement s'exécute, ce sera 1+0 puisque la somme est nulle. La deuxième fois qu'il s'exécute, ce sera 1+1, puisque la somme de la fois précédente est stockée.

Ensuite, vous devez vérifier si la somme des valeurs ajoutées est égale au conteneur de Pièces que vous avez ajouté précédemment.

Pour ce faire, ajoutez un comportement SI de la catégorie Logique et reliez-le au Ajouter des Valeurs de l'étape précédente.

Avec le SI connecté, appuyez dessus pour voir les propriétés du comportement. Le comportement SI, vérifiera si une condition spécifique est remplie (en fonction des 2 champs d'entrée et de la condition sélectionnée).

Dans ce cas, nous allons partager la somme du comportement d'ajout et la placer dans le premier champ de l'IF.

Ensuite, donner le contenu du conteneur dans le second champ.

Avec ces valeurs saisies, le prochain comportement connecté ne sera exécuté QUE si la somme de la valeur ajoutée est égale à la valeur stockée dans le conteneur de pièces.

Ce que vous devrez maintenant faire, c'est désactiver le comportement de collision et changer le graphique afin que vous ne puissiez plus obtenir de pièces. Pour ce faire, ajoutez un nouveau comportement Comportement Désactivé de la catégorie Personnalisé, et reliez-le à l'IF. Comme précédemment, sélectionnez le comportement de collision que vous souhaitez désactiver.

Pour montrer au joueur qu'il n'y a plus de pièces, vous pouvez ajouter le comportement Changer Graphique de la catégorie Transform, et le relier à l'IF.

Une fois connecté, sélectionnez un nouveau graphique dans les propriétés du comportement Changer Graphique. Appuyez sur la deuxième case dans les propriétés du comportement et choisissez un nouveau graphique.

Maintenant, si vous appuyez sur play, vous pouvez sauter et frapper le bloc 3 fois avant qu'il ne s'arrête.

Obtenir des Points

Configuration de l'UI

La prochaine chose à faire est d'obtenir réellement des points et de collecter des pièces en frappant le bloc !

La première chose que nous allons faire est d'ajouter un compteur dans un coin de l'écran pour indiquer au joueur combien de points il a.

Donc, revenez à l'éditeur principal en appuyant sur retour depuis l'éditeur de comportement. Ensuite, vous devez faire apparaître la barre des Couches en appuyant sur les 3 points sur le côté droit de l'écran (vous pouvez également faire glisser depuis le bord de l'écran).

Sélectionnez la couche UI Globale. Les couches UI existent au-dessus des autres couches de la scène et sont généralement utilisées pour les boutons, les joysticks et les étiquettes. Elles sont également fixées au même endroit sur l'écran, et semblent se déplacer avec le reste du contenu dans votre scène.

Remarque : Les objets placés sur la couche UI Globale existeront dans chaque scène de votre projet. Si vous voulez que quelque chose n'existe que dans une seule scène, utilisez la couche UI de scène.

Avec la couche UI Globale sélectionnée, appuyez sur l'icône de l'objet spécial en forme d'ampoule dans le dock, ou faites-le glisser dans la scène.

Dans la fenêtre contextuelle sélectionnez Label, et un label sera placé dans votre scène.

Appuyez sur le label nouvellement ajouté pour ouvrir les propriétés de l'objet. Dans les propriétés du label, vous pouvez changer la couleur du texte, la police, le texte à afficher, et plus encore.

Appuyez sur la grande zone de texte et changez le texte pour dire "Points :".

Ensuite, appuyez sur "Alignement" pour développer les propriétés d'alignement. Réglez la Largeur sur 110 et Hauteur sur 64.

Remarque : Si vous les réglez sur 0, cela supprime la zone de texte, et permet à votre texte de grandir horizontalement indéfiniment.

Avec les propriétés du label toutes configurées, vous pouvez utiliser l'outil Déplacer/Transform pour positionner votre nouveau label dans le coin de l'écran et vous assurer qu'il n'entrave pas la vue du joueur.

Une fois votre label positionné, ajoutez un autre label dans la scène, nous allons utiliser ce label pour afficher vos points. Cette fois, définissez le texte sur 0, puisque votre joueur commence avec zéro point. Contrairement à avant, nous allons définir une largeur et une hauteur spécifiées. Réglez la Largeur sur 500pt, et la hauteur sur 64pt. Cela donne une zone spécifiée, où le texte peut apparaître. Si vous avez trop de texte pour tenir dans cette zone, il sera coupé.

De plus, réglez l'alignement horizontal sur aligné à gauche (Justifié à Gauche).

Lorsque vous avez terminé avec les propriétés du label, positionnez-le à côté du titre "Points".

Obtenir des Points

Nous devons maintenant augmenter vos points chaque fois que vous obtenez une pièce. Revenez à votre couche principale, et retournez aux comportements pour le bloc contenant les pièces afin que nous puissions ajouter les comportements nécessaires.

Dans la catégorie UI, faites glisser le comportement "Ajouter au Score" et reliez-le au deuxième Déplacer de que nous avons ajouté plus tôt dans ce guide.

Ensuite, appuyez sur le comportement Ajouter au Score, et activez le bascule Score Infini. Si ce bascule était désactivé, le prochain comportement serait déclenché lorsque le score spécifié serait atteint. Assurez-vous également que le label "0" est sélectionné comme objet correct, car le comportement Ajouter au Score sélectionnera automatiquement un label aléatoire dans votre scène.

Si vous appuyez sur play maintenant, vous gagnerez 1 point chaque fois que le joueur frappe le bloc.

Vous pouvez maintenant dupliquer ce bloc (comme vous l'avez appris dans la partie 3) et le placer dans votre niveau.

Pièces Individuelles

Votre Première Pièce

Parfois, vous voudrez peut-être simplement ajouter des pièces dans votre niveau sans les cacher à l'intérieur de blocs. C'est relativement simple, et nous allons en parler maintenant.

Commencez par ajouter votre graphique de pièce dans votre scène, puis appuyez dessus pour voir les propriétés de l'objet.

Dans le bas des propriétés de l'objet, assurez-vous que l'onglet physique est sélectionné.

Tout en étant dans l'onglet physique, faites en sorte que la pièce soit passable. Cela permettra à notre joueur de continuer à courir à travers sans être arrêté ou ralenti.

Ensuite, nous allons ajuster les limites de collision de la pièce. Les limites de collision définissent la forme physique de l'objet. Les limites de collision peuvent être d'une taille ou d'une forme différente de l'apparence visuelle de l'objet. Pour ajuster les limites de collision, appuyez sur l'icône Collisions.

Dans l' Éditeur de Collision, vous pouvez utiliser la palette d'outils sur la gauche pour modifier et créer des formes de collision uniques.

Pour ce guide, nous allons sélectionner l'option "Cercle" pour créer une limite de collision circulaire.

Ensuite, faites glisser le point vert sur le cercle pour redimensionner la limite de collision. Faites en sorte que la limite de collision soit de la même taille que la pièce. Notez que si la limite de collision est plus grande que votre objet, le joueur peut interagir avec elle même avant qu'il ne touche physiquement le graphique de la pièce au milieu.

Lorsque vous avez terminé de créer la limite de collision, appuyez sur l'icône de coche dans la palette d'outils pour accepter et enregistrer la nouvelle forme.

Encore une fois, appuyez sur la pièce pour voir les Propriétés de l'Objet. Cette fois-ci, ouvrez l'éditeur de comportement pour la pièce.

Dans la catégorie Objet, ajoutez le comportement "Collision" à l'écran. Tout comme auparavant, ouvrez les propriétés du comportement de collision, et sélectionnez le joueur Green Spaceman pour Objet B.

Ensuite, dans la catégorie UI, faites glisser le comportement Ajouter au Score, et reliez-le à la collision. Encore une fois, dans les propriétés du comportement, activez le bascule pour Score Infini, et assurez-vous que le label de score correct est sélectionné.

Enfin, dans la catégorie Objet, ajoutez le comportement Détruire l'Objet, et reliez-le au comportement de collision. Cela supprimera complètement la pièce dès que le joueur s'en approche.

Si vous appuyez sur play, vous pouvez maintenant courir dans la pièce, et elle disparaîtra.

C'est tout ! Maintenant, votre jeu de plateforme a des pièces collectables. À ce stade, tout ce que vous devez faire est de dupliquer vos pièces et de les placer dans votre niveau. Essayez d'être créatif en plaçant vos pièces !

Vous pouvez télécharger la version terminée de la Partie 5 depuis le Hub et voir tout cela en action.

Dans la Partie 6, nous commencerons à ajouter un peu de difficulté au jeu en introduisant des ennemis.