Les bons tutos de Xavier : Comment faire un jeu de plateforme avec Scratch

7ème partie : Passage au niveau suivant

(Ce tuto est une adaptation en français sur Scratch 3.0 du tuto de Griffpatch sur Youtube)

Portail de fin de niveau

On va créer un portail de fin de niveau afin de pouvoir passer au niveau suivant. Pour cela, dupliquons le sprite “Élément à collecter” et appelons cette copie “Portail”.

Retravaillons son costume. On l’agrandit afin qu’il fasse à peu près 80 pixels de large. Et on agrandit son noyau afin qu’il prenne les 3/4 de l’espace à l’intérieur.

Pour agrandir une forme, en longueur et en largeur, on sélectionne la forme puis on fait glisser un des points situés sur les angles. Pour agrandir de telle manière que la forme reste centrée, il faut appuyer sur la touche Alt du clavier en même temps

Ensuite on change la couleur du rond extérieur à peu près comme ceci :

La couleur du rond intérieur en noir :

Et la bordure du rond intérieur de la même couleur que celle utilisée sur le rond extérieur en ajustant sa largeur à 4 :

Appelons ce costume “Fermé”. Il représente le portail quand il est fermé :

Dupliquons-le pour créer le costume “Ouvert”, pour quand le portail est ouvert. Et modifions sa couleur intérieur afin d’obtenir un dégradé de bleu ciel vers blanc :

Comme nous avons dupliqué le sprite “Élément à collecter”, on va pouvoir réutiliser son code pour placer notre portail. Pour cela, reprenons notre petit utilitaire de positionnement de souris ‘s’. On veut que le portail soit positionné juste derrière la dernière plateforme :

Pour moi, les coordonnées seront x = 1330 et y = 77

Il n’y a qu’un portail à positionner. Donc, dans le code du sprite “Portail”, on peut enlever les 4 positionnements en trop (qui correspondaient aux éléments à collecter) et modifier le premier avec les valeurs trouvées par ‘s’ :

On teste. Le portail est bien là :

Ouverture et fermeture du portail

Au départ, le portail est fermé. Il s’ouvre lorsque toutes les pièces ont été collectées.

Pour connaître le nombre total de pièces, on va créer une variable globale :

  • POINTS MAX

On l’initialise à 0 :

C’est une variable qui va dynamiquement compter le nombre de points maximum qu’on peut obtenir. Pour cela, on va lui ajouter 1 à chaque fois qu’un élément à collecter est créé et positionné (cloné) :

Une fois qu’on a attrapé toutes les pièces, le nombre de points est égal au nombre de points max. Donc, quand le nombre de points est égal au nombre de points max, on ouvre le portail (dans le code du sprite “Éléments à collecter”) :

Lorsque le nombre de points est égal au nombre de points max, on envoie un message d’ouverture du portail

Et maintenant, dans le code du sprite “Portail”, on réceptionne le message :

On teste. J’ai attrapé les 5 pièces du jeu et le portail est ouvert !

Passage au niveau suivant

Si notre personnage joueur entre dans un portail ouvert, alors on doit passer au niveau suivant.

Dans le code du script “Portail”, on va détecter cette action en modifiant l’instruction conditionnelle qui correspondait aux éléments à collecter :

On teste si le nom du costume est “Ouvert” et si le personnage touche le portail. Si c’est le cas, on renseigne l’information dans la variable “FIN”

Testons. On meurt dès qu’on touche le portail ouvert, comme pour les zones dangereuses.

C’est normal. Notre code ne repère pour l’instant que les fins mortelles. Pour lui, dès que la variable FIN a une valeur, ça veut dire que le joueur est mort.

Modifions cela :

Le nouveau bloc “Niveau suivant” est à créer sans cocher l’ “exécution sans rafraîchissement d’écran”.

Il va nous permettre de mettre en place une jolie animation de passage au niveau suivant :

Comme on modifie la taille et la transparence (effet fantôme) du sprite “Joueur”, il ne faut pas oublier d’initialiser les 2 propriétés au démarrage du jeu :

On ne veut pas non plus que notre personnage joueur tourne sur lui-même. Pour imposer cela, il faut cliquer sur la valeur de direction du sprite, puis le bouton Gauche/Droite situé sous le cercle d’orientation :

Le bug des clones

Testons notre code. Rien ne semble marcher !!

Un bug classique est venu perturber notre logique de programmation. En effet, dans le code, notre personnage doit s’orienter vers le portail mais celui-ci est un clone du sprite “Portail” et non pas le portail lui-même qui se trouve avec une coordonné x à -9999999 (petit rappel) :

Lorsque le personnage s’oriente vers le portail, ou quand on calcule la distance entre lui et le portail, ce ne sont pas les coordonnées du clone que Scratch utilise mais celle du sprite “Portail”.

Pour résoudre notre problème, on va tout simplement supprimer le clonage du portail dans le code du sprite “Portail”. Étant donné qu’il n’y a qu’un seul portail, il n’est en effet pas nécessaire :

Niveau 2

Créons maintenant un niveau 2 !

Créons un nouveau costume de plateforme qu’on appelle “Niveau 2 1” :

Plaçons le portail du niveau 2 un peu plus sur la droite (dans le code du sprite “Portail”) :

Initialisons les plateformes pour le niveau 2 (dans le code du sprite “Plateforme” :

Il n’y a pas de clone pour le moment car il n’y a qu’une seule plateforme dans le niveau 2

Il faut bien sûr faire la même chose sur le sprite “Danger”. Créons un costume “Niveau 2 1” vierge (car il n’y a aucune zone dangereuse). Et ajoutons le même code d’initialisation que le niveau 2 (ci-dessus).

Et voilà ! Testons. On passe maintenant au niveau 2 dans notre jeu !

Fin de cette partie

--

--

Classeur Voyageurs du Numérique à la Gaité Lyrique

Tous les derniers mardis de chaque mois, à la Gaité Lyrique, 3 bis rue Papin, 75003 PARIS, de 18h à 20h, entrée libre !