Développe ton jeu avec Micro:bit

Thématiques

  • Algorithmie
  • Scratch
  • Micro:bit
  • Programmation
  • Électronique
  • Jeu vidéo
  • Moteur de jeu

Participants 8

Durée Deux séances de 2h

Public 10-14 ans

Prérequis Maîtrise de base de l’ordinateur

Matériel

  • Vidéoprojecteur
  • 1 poste informatique par participant
  • 1 carte Micro:bit par participant avec son câble USB
  • 1 ruban LED par participant
  • 1 shield Grove par participant (pour brancher le ruban LED)
  • 1 joystick et 3 pinces crocodiles par participant
  • Eventuellement, un jeu de 32 cartes

Préparation

Démarrer les postes des participants et ouvrir le navigateur sur un nouveau projet Makecode.

Pour le confort, fabriquer en amont des boîtiers pour faire office de manettes et y brancher les joysticks. Une imprimante 3D peut être pratique pour cela.

Pour la seconde séance, préparer des bases de jeux et les installer sur des cartes qui serviront de démonstration pour les participants. Imprimer des versions papier du code. Préparer des idées pour modifier, améliorer ou étendre ces prototypes de jeux, idées dont pourront s’emparer les participants. Des idées sont proposées en ressource.

Prototypes de jeu

Une des difficultés de l’atelier est de trouver des idées de jeu adaptés en dimension un. Voici quelques idées obtenues jusque-là.

Jeu du loup

Principe du jeu. Deux entités : le joueur, contrôlé par le joystick, et un ennemi, qui se déplace aléatoirement. Le joueur doit éviter de se faire toucher par l’ennemi.

Modifications possibles :

  • Animation ou bruitage lorsque le loup attrape le joueur
  • Utiliser un bouton pour aller plus vite (boost), mais avec un temps de recharge ou un nombre limité par partie
  • Définir différentes phases de jeu de l’ennemi : rapide dans une seule direction, puis change beaucoup de direction, etc.

Adaptation de Snake

Principe du jeu. Le joueur peut manger des fruits qui apparaissent aléatoirement sur la ligne. S’il mange un fruit, il grandit. Mais il n’y a qu’une petite fenêtre de temps pour le faire : trop tôt, le fruit n’est pas mûr, trop tard, le fruit est trop mûr. Manger un fruit pas assez ou trop mûr fait rétrécir le joueur.

Modifications possibles :

  • Afficher la taille du joueur sur l’écran de la carte
  • Varier la vitesse du joueur
  • Ajouter un chronomètre pour limiter le temps disponible pour jouer

Jeu de précision

Principe du jeu. Le joueur doit parcourir tout le ruban, du début à la fin, mais il y a des obstacles, des zones qu’il faut traverser d’une certaine façon. Par exemple, une zone rouge définit une vitesse maximale à ne pas dépasser, ou une zone violette définit une vitesse minimale à maintenir.

Modifications possibles :

  • Afficher le nombre de traversées réussies (le score) sur l’écran de la carte
  • Modifier les valeurs de vitesse minimale ou maximale
  • Ajouter d’autres types de zones, comme des zones clignotantes qu’il ne faut pas toucher (difficile à faire)

Idées en vrac

  • Simon. Un jeu de mémoire très connu. Quatre zones de couleur (rouge, vert, bleu et jaune) se trouvent sur le ruban, et clignotent (ou s’agitent) dans un ordre aléatoire. Le joueur doit de déplacer entre les zones dans le même ordre. En dimension un, le joueur doit rester longtemps sur une zone pour que cela soit compté comme une activation.
  • Zone mouvante. L’inverse du jeu du loup : une zone se déplace aléatoirement sur le ruban, sa taille fluctue, et le joueur doit toujours rester à l’intérieur de la zone.
  • Combat. Il faut affronter un ennemi en lui rentrant dedans, avec une mécanique mesure de l’accélération par exemple pour déterminer qui l’emporte dans la joute.
  • Labyrinthe. Sur la même disposition que le Simon, différentes portes sont proposées au joueur. Chaque porte l’amène à un niveau différent, identifié par une couleur des portes particulière. Il faut se déplacer de niveau en niveau en trouvant les bonnes portes pour accéder au niveau final (la sortie).

Déroulé

Introduction de la première séance (5 min)

Présenter l’Atelier, l’objectif de l’animation et le déroulé des séances. La première séance sera surtout une découverte des outils, une première approche de la programmation. La seconde sera beaucoup moins guidée, chaque participant pourra travailleur à son projet, avec l’aide d’un animateur.

Utiliser une carte Micro:bit (30 min)

Présenter les cartes aux participants. Chaque participant attrape un sachet avec une carte et un câble USB. Brancher les cartes aux postes informatiques.

Afficher une icône. Présenter le premier composant de la carte, la matrice de LEDs, en faisant deviner les participants. Les enfants connaîtront sûrement les rubans de LEDs, que l’on peut montrer également. Pour les contrôler, il faut donner l’instruction à la carte, comme ce que l’on a fait pour le robot et le labyrinthe. Montrer le bloc d’instruction « Montrer l’icône » dans l’onglet « Base ». Le placer dans « Au démarrage ». Il faut enfin envoyer ce code à la carte, en téléchargeant le fichier, et en copiant-collant le fichier HEX. Tester en affichant différentes icônes.

Utiliser les boutons. Présenter un nouveau composant : les boutons A et B, toujours en faisant deviner les participants. Une nouvelle possibilité s’offre alors à nous : afficher une icône différente selon si on appuie sur le bouton A, ou le bouton B. Montrer le bloc d’instruction « Lorsque le bouton X est pressé » dans l’onglet « Entrée ».

Coordonnées. Petit aparté sur les composants de la carte. Présenter le bloc « allumer x » dans le groupe LED, qui permet de contrôler précisément quelle LED allumer. Cela va servir pour la suite, avec le joystick.

Utiliser le joystick. Présenter le joystick et indiquer comment le brancher sur la carte : une pince sur le 3V, une pince sur le GND et la dernière sur le P1. Dans le programme, afficher en continu la valeur relevée sur la broche P1. Demander d’abord aux participants d’intuiter le comportement du système : quelle est la valeur lorsque le joystick est relâché ? lorsqu’il est au maximum dans un sens ? au maximum dans l’autre sens ? que se passe-t-il sur la direction orthogonale ? L’idée est de montrer que l’on obtient une valeur entre 0 et 1023, représentative de la position du joystick de gauche à droite, 512 étant le milieu.

Si les participants sont intéressés et que le temps le permet, expliquer le principe de fonctionnement d’un potentiomètre, dont la résistance varie avec la position du joystick, résistance qui conditionne linéairement la tension sur la broche P1.

Utiliser le joystick comme un premier contrôleur linéaire. Dans la boucle pour toujours, effacer l’écran puis allumer la LED selon la position du joystick, projetée de 0 à 1023 entre 0 et 4. Ajouter une pause pour rendre l’affichage plus lisible.

Les bases de la programmation (45 min)

Variables. Introduire la notion de variable comme étant une façon d’enregistrer une information, un nombre ou un texte. Commencer par afficher simplement la valeur d’une variable, puis à la modifier à chaque appui sur un bouton. Petit exercice : au lieu d’ajouter 1 à chaque appui, comment doubler à chaque appui ? Réponse : utiliser le bloc « Définir X à Y » et un bloc de groupe « Math ».

Conditions. Introduire la notion de condition : projeter la valeur du joystick entre 1 et 4 et stocker le résultat dans une variable. Afficher une icône différente selon chaque cas, à l’aide d’un gros bloc « Si, Sinon si, Sinon ».

Boucles. Introduire la boucle « répéter X fois » pour faire clignoter un icône un certain nombre de fois à chaque appui sur un bouton. Introduire la boucle « pour index allant de 0 à N » pour faire bouger une LED de gauche à droite, comme lors du test du joystick. Petit exercice : comment déplacer la LED sur toute la grille, comme en lisant un livre ? Réponse : imbriquer deux boucles, une pour l’indice de ligne, une pour l’indice de colonne.

Pause. (si le temps le permet) Proposer une pause aux participants, pour se lever pendant quelques minutes. Pour occuper celles et ceux qui le souhaitent, afficher un algorithme en blocs permettant d’effectuer un tour de magie avec des cartes, et les inviter à appliquer cet algorithme pour faire le tour de magie (voir ressources). Idée prise des activités <DÉ>CODAGE.

Fonctions. Introduire une fonction comme un bout de code que l’on peut réutiliser plusieurs fois. Par exemple, créer une petite animation en affichant plusieurs icônes l’un après l’autre avec une courte pause entre chaque. Mettre cette animation dans une fonction, et déclencher l’animation à chaque pression du bouton A ou B.

Introduction au moteur de jeu (30 min)

Mise en place. Il est temps de passer aux choses sérieuses. Brancher la carte sur le shield et y brancher le joystick et le ruban LED. Sur le projet Makecode, ajouter une extension et rechercher « ychalier-rlv/manege ». Configurer le ruban LED avec Neopixel, ajouter l’entité du joueur avec les paramètres par défaut, et utiliser le bloc « peindre les entités ». Tester, et le joueur devrait apparaître sur le ruban.

Entités. Expliquer le principe des entités et des positions. Ajouter une seconde entité, de couleur différente, plus large, à une autre position du ruban. Tester et montrer.

Mouvement. La question est désormais : comment faire bouger le joueur ? Comment le relier avec le joystick ? Faire le lien avec la première petite démonstration, lors du test du joystick. L’idée de base serait de changer la position du joueur directement à partir de la valeur du joystick. Mettre cela dans la boucle « Pour toujours » avec le bloc « Peindre les entités » et tester (régler la couche du joueur à 1 pour être au-dessus de la seconde entité). Mais ce n’est pas bien naturel, donc on a une autre solution : utiliser le joystick pour contrôler la vitesse. Guider les participants pour paramétrer cela, en ajouter les blocs « Démarrer le jeu » pour démarrer le chronomètre, « Mettre à jour l’horloge » et « Mettre à jour les entités ».

Collisions. Enfin, montrer comment gérer le moment où le joueur touche l’autre entité. Faire que le joueur change de couleur lors de la collision, et revienne à sa couleur initiale ensuite.

Conclusion de la première séance (5 min)

Faire un résumé des principes et des possibilités rencontrés dans la séance, et inviter les participants à réfléchir à des idées pour leur jeu d’arcade en une dimension.

Introduction de la seconde séance (30 min)

Faire un rappel des principes et des possibilités rencontrés lors de la séance précédente.

Démonstration des prototypes. Présenter l’inspiration du Line Wobbler ainsi que la vidéo de démonstration en ressource. Présenter les jeux préparés à l’avance, avec le code qui correspond. Inviter les participants à les tester.

Brainstorming. Inviter les participants à réfléchir à une idée de jeu, soit ex nihilo, soit en s’inspirant des jeux préparés à l’avance et des pistes de modification envisagées, voir ressources. Il est souvent intéressant d’ajouter une gestion du score ou de trouver une utilité aux boutons A et B de la carte. Présenter la possibilité de mettre en scène le jeu dans l’espace, en utilisant la flexibilité du ruban LED.

Développement du jeu (60 min)

Les participants sont libres de coder leur idée. Ceux s’inspirant d’un prototype existant peuvent commencer par reproduire le code papier. Accompagner les participants pour leur donner des idées et les débloquer lorsqu’ils bloquent dans le codage.

Installation et jeu (30 min)

Lorsqu’un participant considère avoir terminé son jeu (ou maximum 15-20 minutes avant la fin de la séance), il peut le mettre pour de bon sur la carte, et le mettre à la disposition des autres participants. Ainsi, chacun peut joueur aux jeux des autres.

Lorsque tous les participants ont terminé, installer les jeux dans une section publique de la médiathèque pour permettre à plus de personnes d’y jouer.

Ressources

Ressources en ligne