[Arduino] Animation LCD Space Invaders

Les habitué(e)s du SdZ d’OpenClassrooms le savent surement, il y a quelques temps avait été organisé un petit atelier de programmation. Le thème de ce dernier était : Réaliser une animation d’écran « Space Invaders ». Derrière cela, le simple but était de s’amuser à coder pour faire bouger un Invader sur un écran. Comme il n’était pas précisé de quel écran il s’agissait ni quelles étaient les limites de l’application, je me suis amusé à sortir du cadre « ordinateur = CPU + clavier + écran » et j’ai proposé une solution à base d’Arduino et d’un écran LCD alphanumérique.
Le résultat peut-être vu sur la vidéo ci-dessous :

Je vous propose dans cet article de vous détailler la technique mise en oeuvre pour obtenir cette application.

Matériel nécessaire et mise en route

Le matériel

Pour effectuer ce montage, pas besoin de grand-chose ! Il vous faudra simplement une carte Arduino (Uno dans mon cas) et un écran LCD. Et c’est tout !

Câbler l’ensemble

Pour ce qui est du câblage, là encore rien de compliqué. Si vous avez suivi le tutoriel Arduino sur les écrans LCD il ne devrait pas y avoir de problème. C’est pourquoi je vous propose ici le schéma électronique qui présente comment brancher l’écran en mode « 4 bits » à l’Arduino. Pour plus d’explication, le tuto est ici 😉 .


Setup

Pour une fois l’initialisation et les variables de départ seront un peu plus conséquent que d’habitude. En effet, le dessin du petit invader n’existe bien entendu pas de base dans l’Arduino ou dans le jeu de caractères du LCD. Il va donc falloir lui « apprendre » à le dessiner. Pour rendre les choses un peu plus sympa, on va le dessiner de deux manières, comme sur le gif précédent : une fois avec les « bras » baissés et une fois avec les bras levés.
Voici un point de vue sous forme de grille de l’invader :

Invader avec les bras levés   Invader bras baissés

Comme vous pouvez le voir, ces figures ont une taille de 10 pixels de large et 8 de haut, hors un caractère affichable par l’écran ne peut avoir qu’une taille de 5 par 8. Il va donc falloir découper l’invader pour l’afficher en deux morceaux côte à côte comme montré avec la ligne rouge sur les images ci-dessus. Ce qui signifie qu’au final on va créer non pas deux caractères mais bien quatre, un pour chacune des parties de chaque invader. Si on avait voulu faire une animation avec trois étapes par invader, il aurait fallu faire 6 caractères (et je vous rappelle que l’écran est limité à 8 caractères personnalisé).

Créer les Invaders dans le code

Si vous ne vous vous souvenez plus trop comment faire des caractères personnalisés, n’hésitez pas à aller relire ce morceau du tutoriel 😉 .
Maintenant que le dessin est prêt, nous allons devoir créer ces caractères dans le code à envoyer à l’Arduino. Ainsi, notre carte pourra apprendre à l’écran les nouveaux dessins. Pour cela, on utilise quatre tableaux d’octet (byte). Ils sont triés dans l’ordre de tel façon que chaque paire (0-1 et 2-3) représente les parties gauches et droites de la figure. Chacun de ces tableaux représentera de manière binaire les images vues ci-dessus.

Le reste du setup

Voilà, le plus dur est fait, il ne nous reste plus qu’à intégrer les bricoles qui font que notre LCD va comprendre ce qu’on lui dit.
Pour cela, on va dans l’ordre :

  1. Ajouter la librairie en haut de notre fichier
  2. Déclarer un objet avec les bonnes broches à utiliser
  3. Dans le setup(), envoyer les 4 caractères au LCD (en mode « commande »)
  4. Démarrer la communication avec le LCD (passage en mode « écriture »)
  5. Démarrer le générateur de nombres aléatoires pour faire bouger l’invader

En code, cela pourra se traduire en code Arduino de la manière suivante :

Le code complet du setup avec la création des caractères :

Secret: Code complet SelectionnerAfficher

Animation et code complet

Maintenant que tout est mis en place, il ne reste plus qu’à réaliser l’animation proprement dite.
Pour faire les choses proprement, on va écrire une fonction drawInvader() pour dessiner. Cette fonction prendra en paramètre la ligne et la colonne où l’invader doit être dessiné et bien sûr l’état de l’invader (bras levés ou baissés).
Comme vous avez pu le voir dans le setup, on va utiliser une fonction permettant de générer des nombres aléatoires pour déterminer la position du vaisseau. Cette fonction se nomme tout simplement random() et prend en paramètre la borne inférieure (incluse) et la borne supérieure (non incluse) du nombre aléatoire à retourner (un long). Dans notre cas, en vertical on veut pouvoir obtenir 0 ou 1 et en horizontal 0 à 14 (car si on fait 15, la seconde moitié de l’invader ne sera pas affiché 😉 ). On va donc faire :

La suite de la loop est assez simple. Une fois que l’on a les coordonnées, on appelle la fonction drawInvader une première fois avec l’état « bras baissé », on fait une petite pause puis on refait l’appel avec les bras levés pour obtenir l’animation complète. De nouveau une petite pause puis le cycle repart du début.
Voici le code complet de la boucle :

C’est bien beau mais drawInvader dans tout ça ?

Une difficulté ? Où ça 😉 ? Si vous savez comment afficher un caractère personnalisé sur l’écran alors il ne devrait y avoir aucun problème 🙂 .
En effet, la suite logique des opérations sera la suivante :

  1. On efface l’écran
  2. On place le curseur au bon endroit
  3. On affiche la moitié gauche
  4. On affiche la moitié droite (logiquement à la suite)

Et en code, voici ce que cela donnerait :

« etat » sera la variable qui dira si les bras sont levés ou baissés. Comme les caractères sont enregistrés dans l’ordre (bras baissés gauche, bras baissés droite, bras levés gauche, bras levés droite), il suffit de faire une multiplication par 2 pour se situer au bon endroit. On ajoute 0 ou 1 si on envoi la moitié gauche ou droite (gauche : 0, droite : 1).
Et voila ! Vous avez maintenant tout le code pour faire une jolie animation Space Invaders sur votre écran LCD et donner un petit côté années 80 à votre Arduino 😀

Secret: Code complet SelectionnerAfficher

Bien sûr, comme pour tout code des améliorations pourraient-être faites. Par exemple, on pourrait utiliser des constantes avec des #define pour éviter d’envoyer 0 ou 1 pour l’état. On écrirait ainsi BAISSE ou LEVE et ca serait déjà plus propre.
Si vous le souhaitez, en guise d’exercice d’approfondissement vous pouvez essayer de rajouter une étape intermédiaire où les bras du vaisseau seront à l’horizontal. Attention, il faudra peut-être revoir l’ordre d’enregistrement des caractères dans la mémoire de l’écran et donc le calcul pour les appeler 😉 . Amusez-vous bien et n’hésitez pas à poser des questions ou faire des remarques en commentaires 🙂 .

9 commentaires

  1. hello,
    j’avais fais l’exo et commenté le jour même de sa parution, mais n’étant pas une expert, j’ai probablement zappé un clic qqpart
    merci encore pour votre investissement en temps

  2. Bonjour,

    Je débute dans le domaine de l’arduino et j’aimerais connecter une camera récupérée depuis mon ancien drone qui a rendu l’âme. La camera possède un lecteur de carte micro sd intégré et une sortie de 4 fils Rouge Noir Jaune et Bleu. J’aimerais pouvoir déclancher une prise de vidéo ou de photo avec un bouton.

    Merci d’avance pour toute réponse

Laisser un commentaire