SE CONNECTER
1,2,3... codez ! | Le site de la Fondation La main à la pâte
Module 123 Codez | Programmer | Informatics and Digital Creation

Projet « Jeu d’arcade » – Séance 7 Améliorer le rendu graphique du jeu


1, 2, 3, codez ! - Activités cycle 4 - Projet « Jeu d’arcade » - Séance 7 : Améliorer le rendu graphique du jeu

Discipline dominante

Mathématiques

Résumé

Les élèves améliorent le rendu graphique du jeu en créant et manipulant des « costumes » pour chaque lutin. Ils créent également un lutin appelé « game over » qui apparait à la fin du jeu. Pour faire communiquer les différents programmes entre eux, ils utilisent des « messages ».

Matériel

Identique à la séance précédente.

Note pédagogique :

  •  Le début de cette séance se prête particulièrement bien à un prolongement en arts plastiques, puisque l’on peut choisir de faire dessiner les costumes des différents lutins par les élèves eux-mêmes.
  •  On peut aussi, pour gagner du temps, se contenter de piocher dans des bibliothèques d’images (celle intégrée à Scratch, ou celle du site opengameart.org par exemple).

Les élèves reviennent sur la carte mentale élaborée lors de la Séance 2 et s’intéressent aux graphismes du jeu. Ils font la liste des fonctionnalités à programmer. Voici un découpage possible. Par nature, ce sont des raffinements non indispensables au jeu (mais qui rendront les élèves vraiment satisfaits de leur production) : ils peuvent s’étaler sur plusieurs séances.

Difficulté

Nom de la tâche

Travail à effectuer

Tâche 1 : créer un nouveau costume pour l’avatar

  • Créer un nouveau costume pour l’avatar à partir du costume actuel
  • Personnaliser ce costume

Tâche 2 : changer de costume lorsque l’avatar est percuté par un astéroïde

  • Initialiser le costume au lancement du programme
  • Changer de costume lorsque l’avatar est percuté par un astéroïde, puis revenir au costume initial après un bref instant (pour cela, il faut utiliser l’envoi de « messages »)

Tâche 3 : afficher « game over » à la fin du jeu

  • Créer un lutin « game over »
  • Cacher ce lutin au démarrage du jeu
  • Lorsque le nombre de vies restantes vaut zéro, afficher ce lutin, et stopper tous les autres programmes (utiliser un « message »)

Tâche 4 : changer aléatoirement l’apparence de chaque nouvel astéroïde

  • Créer plusieurs costumes pour le lutin « astéroïde »
  • Lorsqu’un nouveau clone est créé, basculer sur un costume aléatoire, et donner au clone une taille aléatoire

Tâche 5 (optionnelle) : donner une illusion de mouvement en alternant des costumes

  • Créer plusieurs costumes pour le lutin « recompense »
  • Alterner ces costumes de façon à créer une illusion de mouvement (par exemple, une rotation s’il s’agit d’une pièce)

Tâche 6 (optionnelle) : afficher le nombre de vies de manière graphique

  • Créer un lutin « vies » avec plusieurs costumes, chaque costume affichant un symbole correspondant au nombre de vies en cours
  • Changer de costume à chaque changement de nombre de vies

Tâche 1 : créer un nouveau costume pour l’avatar (15 minutes)

Comme cela a été vu dans l’exercice 4 de la Séance 1, Scratch permet de changer l’apparence de chaque lutin à travers l’utilisation de « costumes ». Un lutin peut posséder autant de costumes que l’on souhaite, et ainsi donner une illusion de mouvement (cf. le lutin « chat » qui semble marcher) ou tout simplement mettre en évidence un événement particulier. Ici, par exemple, on souhaite montrer que le vaisseau a été percuté par un astéroïde. Il faut donc créer un costume dans lequel son apparence a été modifiée. Pour cela :

  •  Sélectionner le lutin
  •  Cliquer sur l’onglet « costumes » (en haut de la zone de programmation)
  •  Cliquer, avec le bouton droit de la souris, sur le costume actuel, et choisir « dupliquer » (ainsi, le nouveau costume est identique à l’ancien)
  •  Modifier le nouveau costume à l’aide des outils de dessin (ou en important une image…)
  •  Renommer chaque costume pour faciliter la programmation ultérieure. Dans notre exemple, les 2 costumes du lutin « vaisseau » ont été renommés « normal » et « explose ».
On vérifie que le lutin change bien d’apparence dans la scène si l’on clique sur l’un ou l’autre des deux costumes.

Tâche 2 : changer de costume lorsque l’avatar est percuté par un astéroïde (30 minutes)

Dire au lutin « vaisseau » de prendre le costume « normal » lorsque le programme se lance est très simple. Il suffit d’ajouter l’instruction  au tout début du programme de ce lutin. Ce programme (qui n’avait pas été modifié depuis la Séance 3) devient donc :


Programme de l’avatar (lutin « vaisseau ») comportant l’initialisation du costume.
NB : on a également choisi de regrouper ici toutes les initialisations de variables (score, nombre de vies, vitesse de chute des astéroïdes), ce qui n’a rien d’obligatoire.

Il faut maintenant demander au lutin de basculer sur le costume « écrasé » quand il est touché par un astéroïde. Dans ce cas, puisque le vaisseau ne se cachera plus, il faut demander à l’astéroïde de se cacher (sinon, le contact est prolongé et la variable « vie » change continument, cf. Séance 4). Le problème, c’est que le test « est-ce que le vaisseau touche l’astéroïde » ne se trouve pas dans le programme de l’astéroïde, mais dans le programme du vaisseau. Or, dans le programme de du vaisseau, on peut changer l’apparence (costumes, montrer, cacher…) du vaisseau, mais pas l’apparence de l’astéroïde ou de ses clones. Comment faire ?
Heureusement, Scratch possède une fonctionnalité extrêmement pratique (et qui sera utilisée très souvent à l’avenir), permettant aux différents programmes de « communiquer » entre eux. Un programme (celui du vaisseau), peut envoyer un « message » aux autres programmes (celui de l’astéroïde, mais aussi celui de la récompense). Dans le programme de l’astéroïde, on veut déclencher la disparition du clone lorsque le message est reçu.

Note scientifique :
 Envoyer un message revient à créer un « événement » (tout comme le clic sur le drapeau vert était un événement, prédéfini, dans Scratch). Scratch est un langage de programmation dit « événementiel » : de nombreux sous-programmes peuvent cohabiter, chacun étant déclenché par un événement.

Dans le programme du vaisseau, on va ajouter l’instruction  à chaque fois que l’astéroïde entre en contact avec le vaisseau. Dans le programme de l’astéroïde, on va ajouter un sous-programme qui se déclenche lorsque le message est reçu, grâce à l’instruction
Ces 2 instructions se trouvent dans l’onglet « événement » (marron). Dans le programme du vaisseau, on ajoute un nouveau sous-programme, tandis-que dans le programme de l’astéroïde, on insère simplement l’envoi de message lors du test.


Programme du vaisseau modifié en utilisant la fonctionnalité « envoi et réception de messages » (solution provisoire).

Dans le programme de l’astéroïde, on ajoute simplement le bloc d’instructions suivant :


Ajout dans le programme de l’astéroïde (solution provisoire)

Lorsque l’on teste cette solution, on se rend compte qu’elle est fonctionnelle, mais pas vraiment satisfaisante : tous les clones de l’astéroïde sont supprimés d’un coup, lors d’un impact, alors qu’on aimerait ne supprimer que le clone qui a heurté le vaisseau.
Pour cela, la seule solution est de placer le test « si le vaisseau est touché par un astéroïde » dans le programme de l’astéroïde, et pas dans celui du vaisseau. Or, lorsque nous avons programmé cette fonctionnalité (cf. Séance 4), rien ne nous permettait d’imaginer cette contrainte. La solution la plus intuitive, pour gérer l’impact et le nombre de vies était de mettre, naturellement, ce test dans le programme du vaisseau. Il faut donc, désormais, modifier ces 2 programmes pour déplacer le test d’un lutin à l’autre.

Note pédagogique
 Nous aurions pu, dès la Séance 4, expliquer cette contrainte et ainsi placer le test au bon endroit dès le départ. Cependant, nous pensons qu’il est plus pertinent de laisser les élèves suivre leur intuition (d’autant plus qu’elle est justifiée) et de découvrir les contraintes au fur et à mesure, quitte à modifier le programme a posteriori.

Les élèves modifient donc le programme du vaisseau ainsi que celui de l’astéroïde de façon à résoudre ce problème. Finalement, les 2 programmes sont :


Programme du vaisseau (qui gère correctement le nombre de vies et le changement de costumes).


Programme de l’astéroïde (qui gère correctement la collision et la suppression du clone).

Tâche 3 : afficher « game over » à la fin du jeu (20 minutes)

Cette nouvelle fonctionnalité permet aux élèves de revenir sur l’envoi de messages vu lors de la précédente tâche. On souhaite faire disparaitre tous les lutins lorsque le nombre de vies restantes vaut zéro, et faire apparaître le message « game over » à la place. Il faut donc :

  •  créer un lutin dont l’apparence est le texte « game over » (on peut utiliser pour cela l’outil de dessin incluse dans Scratch, car cet outil donne la possibilité d’écrire du texte).
  •  Dans le programme qui gère le nombre de vies, ajouter un test : SI vies <1, ALORS envoyer le message « game over ».
  •  Pour tous les lutins (sauf « game over »), ajouter une instruction « stop tout » indiquant la fin des différents programmes lorsque le message « game over » est reçu.
  •  Pour le lutin « game over », ajouter l’instruction « montrer » lorsque le message est reçu.

 Programme du lutin
« game over »

Sous-programme qui gère le nombre de vies.

À ajouter dans les programmes des autres lutins, pour marquer la fin du jeu (aucune action n’est désormais possible pour ce lutin)

Tâche 4 : changer aléatoirement l’apparence de chaque nouvel astéroïde (15 minutes)

Désormais, les élèves savent créer un costume, et manipuler des nombres aléatoires. Cette tâche ne présente donc pas de difficulté (le plus long étant de créer les costumes).
Voici par exemple les 5 costumes du lutin « astéroïde », ainsi que l’ajout de l’instruction permettant de choisir un costume et une taille aléatoires


Les 5 costumes de l’astéroïde

Choix d’un costume et d’une taille aléatoire chaque fois que l’on crée un clone de l’astéroïde.

Tâche 5 (optionnelle) : donner une illusion de mouvement en alternant des costumes (15 minutes)

Cette nouvelle tâche n’apporte pas grand-chose d’un point de vue de la programmation, mais elle embellit le jeu. On peut la passer en cas de manque de temps.
Il s’agit de créer des costumes d’un même objet (la pièce) vu sous différents angles, et ainsi créer une illusion de mouvement en alternant les costumes. L’exemple suivant a été réalisé en utilisant l’image « spinning coin » disponible ici : opengameart.org/content/spinning-coin
Il suffit de découper les différentes parties de l’image et de les enregistrer comme images indépendantes, puis d’importer ces images dans les différents costumes du lutin « recompense ».


Les 4 costumes de la pièce

Sous-programme de la pièce. L’utilisation de l’instruction « costume suivant » à chaque pas vers le bas  crée l’illusion d’une rotation de la pièce sur elle-même (NB : on peut ralentir cette rotation, si on le souhaite, en ajoutant une pause de quelques centièmes de secondes).

Tâche 6 (optionnelle) : afficher le nombre de vies de manière graphique (15 minutes)

Jusqu’à présent, le nombre de vies restantes est une variable dont la valeur est affichée à l’écran. C’est fonctionnel, mais peu esthétique. Dans la plupart des jeux vidéo, le nombre de vies est représenté par un symbole (en général, un cœur), que l’on répète autant de fois qu’il reste de vies.
Pour réaliser cette tâche, il faut donc créer un nouveau lutin, que l’on peut appeler « vies », et qui contient plusieurs costumes. Dans notre exemple, puisqu’on limite le nombre de vies à 3, il y a 4 costumes correspondant aux différentes étapes du jeu (3 vies, 2 vies, 1 vie, 0 vie), comme sur la capture d’écran suivante.


À noter que nous avons modifié l’arrière-plan pour qu’il affiche une bande noire en bas, dans une zone dédiée à l’affichage du nombre de vies et du score. Il a également fallu s’assurer que le vaisseau est bien au-dessus de cette bande.

Puisqu’il existe désormais un lutin dédié à l’affichage du nombre de vies, il semble logique de déplacer le sous-programme qui gère l’évolution du nombre de vies dans ce lutin (astuce : pour déplacer un programme d’un lutin à un autre, il suffit de cliquer sur le programme et de le faire glisser vers le lutin cible).
Le programme du lutin « vies » est donc composé de 2 parties :

  •  Une initialisation (position, taille, costume)
  •  Le sous-programme qui gère le nombre de vies (déclenché quand le vaisseau est touché par l’astéroïde). Ce sous-programme est modifié pour que l’on bascule vers le costume adéquat.

Les 4 costumes du lutin « vies »

Le programme complet du lutin « vies »

Fin du projet

Le projet consistant à créer un jeu d’arcade est désormais terminé, au sens où le programme créé répond au cahier des charges qui avait été défini en début de projet. Cependant, un tel jeu peut toujours être amélioré, complété (on peut, par exemple, ajouter une fonction de tir pour détruire les astéroïdes)…
Ne pas hésiter à poursuivre ce travail pour découvrir de nouvelles fonctionnalités Scratch :

  •  le stylo (permet à un lutin de dessiner à l’écran)
  •  les interactions avec l’utilisateur :
    o clavier (poser une question à l’utilisateur, qui tape la réponse au clavier, la réponse est enregistrée dans une variable que l’on peut manipuler)
    o souris (on peut déclencher des actions en cliquant sur un lutin par exemple, ou suivre les mouvements de la souris)
  •  les fonctions (un concept fondamental en programmation, mais que nous avons laissé de côté pour ce projet d’initiation à Scratch).
  •  etc.

Avant de clore définitivement ce projet, ne pas oublier de rendre publics les jeux créés par les élèves ! Pour cela, il faut avoir créé un compte utilisateur sur le site scratch.mit.edu/ (ce qui est déjà le cas pour les classes ayant travaillé en ligne).

Bilan : a-t-on fait des maths au cours de ce projet ?

Une discussion collective en fin de projet aidera les élèves à réaliser que ce qu’ils ont pris comme une activité ludique comporte de nombreux apprentissages, notamment mathématiques. Les élèves font souvent ressortir l’aspect « logique » de ce travail, mais il est nécessaire de les guider pour faire expliciter toutes les notions abordées. Le scénario conceptuel, en introduction, est très utile pour un tel bilan.