🍦Newsletter #0
Ce mois-ci, on parle Hacktoberfest, réseau social en Unix et création d'un mini-jeu vidéo en Javascript vanille 🧋
News News News
Ça ne t’a probablement pas échappé, l’Hacktoberfest bat son plein. Si, comme exactement 100 % de l’équipe d’Electronic Tales et Lydia Hallie (une développeuse qui a 48.8K followers sur Instagram, en toute simplicité), tu es terrifié·e à l’idée de contribuer à un projet open source et de te faire envoyer bouler, on a une bonne nouvelle.
Cette année, Ogadaki, un membre de la communauté Electronic Tales, a décidé d’ouvrir son projet, Adacraft, aux contributions des débutant·e·s.
Tu hésites encore ?
D’abord, sache qu’Adacraft est un merveilleux projet qui permet de faire du code créatif et éducatif.
Ensuite, pour reprendre Jacques Brel, Ogadaki, c’est notre Noël, c’est notre Amérique à nous 🍟 Senior de chez senior, il n’en est pas moins ultra-bienveillant et pédagogue, et il trouve toujours le temps de répondre aux questions des poussins devs 🐣 sur Slack.
Pour participer, tu peux lire les infos du projet ici et rejoindre le canal #talk-hacktoberfest-2022 de notre Slack pour échanger directement avec Ogadaki et les membres de la communauté déjà partant·e·s.
Imaginarium
Le réseau social de ta grand-mère
Tu pensais que les réseaux sociaux étaient nés avec Facebook ? Alors laisse-nous te présenter Echo, une communauté qui existe depuis 1989.
Créée par Stacey Horn à New-York, Echo ne passait pas par le web, mais par une sorte de proto-internet moderne, le Bulletin Board System (BBS), qui a connu la gloire de la fin des années 70 au début des années 90.
Trente ans plus tard, Echo n’est toujours pas hébergé sur le web, mais sur Telnet, un système qui permet à deux ordinateurs de se connecter l’un à l’autre et de communiquer par commandes Unix et textes interposés. Les utilisateur·trice·s doivent d’ailleurs utiliser le protocole ssh pour s’y connecter (le même que celui qu’utilisent les devs pour se connecter à un serveur distant, oui oui).
Fait brillant: alors qu’au début des années 90, seulement 10 % des internautes étaient des femmes, elles étaient près de 40 % sur Echo. Et ce grâce à une politique volontariste de la part de Stacey Horn, qui avait rapidement compris qu’il fallait créer des espaces d’échange en non-mixité, mais aussi aider les femmes à se former techniquement. La créatrice donnait ainsi des cours d’Unix dans son appartement, afin que les limitations techniques ne freinent pas les utilisatrices d’Echo.
Et certain·e·s y ont même rencontré l’amour.
Arte and chill
L’angoisse te prend à l’idée de choisir ce que tu vas regarder ce soir ? Tu as la flemme de sortir ton téléphone pour chercher d’une main, tandis que tu agrippes la barre du bus et agites ta bouteille de solution hydroalcoolique de l’autre ?
Go voir Autopsie d’une intelligence artificielle sur Arte, qui a fait un excellent boulot de vulgarisation pour parler d’IA symbolique, de deep learning et de pourquoi les robots-docteurs sont un sacré échec d’IBM.
Ancient World
Un·e prof te l’a déjà sûrement répété: les ordinateurs sont stupides, ils ne font que ce qu’on leur demande de faire.
Oui, mais ils traitent aussi les données très vite – beaucoup plus vite que les profs, d’ailleurs 😛
Sur la base de ce cliché, Richard Feynman déconstruit l’idée qu’un ordinateur est une machine à calculer et préfère parler de “machine à bouger les données”.
Pour ce faire, il compare nos machines à des clercs de notaire.
Un résumé visuel de cette analogie a été fait par Llorenç Muntaner sur son site.
Modern World
J’ai testé… Coder un jeu vidéo en Javascript vanille (épisode 1)
Chaque mois, un·e membre de la communauté Electronic Tales se donne 5 heures pour explorer un sujet inconnu. Ce mois-ci, c’est votre serviteur Officier Azarov qui teste la programmation d’un jeu vidéo.
Je ne sais pas vous, mais moi, j’ai commencé à apprendre la programmation pour faire des jeux vidéo. C’était la grande époque des jeux riches en narration – beaux et pas super durs à jouer – comme Life is strange ou The Wolf Among Us.
Six ans plus tard, je suis dev Java et j’en suis toujours à faire des CRUD et des formulaires.
Du coup, cette année, je me suis dit que j’allais essayer. Et là, deux possibilités se sont présentées à moi. Généralement, les gens démarrent le développement de jeux vidéo (game dev, pour les intimes) en apprenant Unity, un moteur de jeux vidéo open source très populaire à l’interface conviviale et riante (non).
Malgré mon attirance naturelle pour les 50 nuances de gris façon Windows 95, j’ai décidé de ne pas prendre ce chemin tout de suite. Pourquoi ? Parce que je fais du Javascript depuis six ans et que je mourais d’envie de savoir comment faire pour déplacer un petit personnage mignon avec son clavier en Javascript pur (chacun·e ses rêves, hein). Je voulais aussi comprendre les mécaniques fondamentales de la programmation d’un jeu vidéo, sans tout le fluff qu’apporterait un logiciel aussi poussé que Unity.
À la recherche du tuto parfait
Call me picky, mais un de mes critères, pour trouver le tuto de mon cœur, était que les graphismes utilisés me plaisent. Car oui, je fais partie de ces gens de peu de fantaisie qui ont du mal à s’investir dans un tuto de 12 heures dont l’objectif est de faire avancer un carré rouge sur un fond blanc (que les fans de Malevitch me pardonnent).
Lors de mes errances sur Youtube, une vidéo m’a sauté aux yeux:
Un graphisme mignon. Des couleurs. 7 heures 16. Il ne m’en fallait pas plus pour me convaincre. Et me mettre dans la mouise, vu que l’objectif de cet article était de passer maximum 5 heures sur un sujet. D’où le fait que vous lisez actuellement l’épisode 1 de cette aventure seulement (quelle scénarisation - je ne désespère pas qu’Arte replay me repère bientôt).
J’ai donc foncé.
Après tout, j’étais même allée dans le bus Pokémon au salon du jouet 1998.
Nostalgie
La promesse du tuto: nous faire faire une mini-version du célèbre jeu Pokémon. C’est-à-dire, en gros, un perso qui se déplace sur une carte et rencontre des ennemis de temps en temps. Kafka n’aurait pas inventé mieux.
Première étape: créer la carte (= “map”) sur laquelle le personnage se déplacera.
L’auteur du tuto, Chris (aka l’homme cis avec lequel j’ai passé le plus de temps ce mois-ci), ne compte pas vraiment sur nos talents artistiques pour cela. Et il a raison.
Il nous envoie donc récupérer des assets (= des packs de dessins) sur itch.io. Quand j’ai vu cette plateforme, mon cerveau a juste explosé. Des centaines d’artistes offrent gracieusement leurs dessins aux créateur·trice·s de jeux vidéo.
Fuck Meta, les NFT et Amazon, Internet rayonne à nouveau dans mon cœur comme en 2001.
Et en parlant de 2001, justement, la prochaine étape est d’utiliser un logiciel, Tiled, pour former une carte à partir de tuiles, c’est-à-dire à partir des dessins recupérés sur itch.io. Je vous passe les détails, tout est dans la vidéo de Chris.
L’important, c’est de savoir qu’une fois la map terminée, on va l’exporter comme une bête image en .png, et c’est comme ça qu’on l’utilisera dans notre code.
En revanche, je ne peux me retenir de vous partager le bonheur intense que ça a été pour moi de jouer à assembler des petits éléments pour construire une map. J’ai eu l’impression d’avoir 13 ans à nouveau, à l’époque où j’essayais péniblement de créer un jeu vidéo avec RPG Maker, la star des logiciels du genre à l’époque. J’avais presque envie de réécouter Placebo pour accompagner.
Mais assez nostalgisé - parlons code.
La balise <canvas></canvas> est notre amie
Vous vous souvenez comment faire un site sans utiliser un framework type React ou Vue, vous ? Bien vu les ami·e·s, la première étape c’est de créer un fichier index.html. Et le moins qu’on puisse dire, c’est que Chris est minimaliste:
Pour faire des trucs animés en HTML, on va utiliser la balise <canvas>. Et c’est tout. Rideau. Fin de l’histoire en ce qui concerne le html.
Passons au Javascript. On commence par créer un sprite (= un élément graphique qui se déplace) pour notre map, que nous appellerons ici background.
Et voilà, on a un sprite background prêt à éclore sur nos écrans ébahis…
Mais pour cela, il va falloir faire quelque chose de choquant 😱
Et hop, une boucle infinie !
Je ne sais pas vous, mais moi on m’a toujours dit que les boucles infinies, c’était le mal. Je me souviens encore de cette belle émotion que j’ai ressentie le jour où j’en ai écrit une à mon 1er boulot par accident. Pour ne rien gâcher, le code tournait dans le cloud, c’était donc facturé à la milliseconde d’utilisation. Pour le dire poliment, j’ai eu l’impression d’avoir renversé un jerrican de vieille huile de colza Leader Price sur la gazinière de ma mamie, puis d’avoir allumé toute sa collection de briquets (eh ouais, ma mamie avait une touche de badass et une addiction à la nicotine).
Quelle ne fut donc pas ma surprise lorsque j’ai découvert que, dans un jeu vidéo, tout était basé sur une boucle infinie. Un pro me l’a confirmé pas plus tard qu’hier.
Je cite: “C’est que, huhu, il faut bien rafraîchir l’animation à chaque frame”.
Plus clairement, une frame = une itération de la boucle infinie qu’on va faire tourner, aussi appelée game loop (c’est ça, les gars, donnez-lui un autre nom pour que ça ait l’air moins grave, on vous dira rien).
Voilà à quoi ça ressemble:
Bon, là il y plusieurs choses très intéressantes.
Déjà, requestAnimationFrame(), c’est une fonction qui ressemble à setInterval() (généralement beaucoup plus connue). C’est-à-dire qu’elle déclenche l’appel d’une autre fonction (ici, animate()) à intervalle régulier. Sauf que, contrairement à sa cousine célèbre:
elle permet au navigateur d’optimiser les traitements pour garantir un rachaîchissement régulier (généralement à 60 images par seconde)
elle permet au navigateur d’interrompre l’animation lorsque l’onglet n’est plus visible, ce qui évite à notre ordi de se transformer en grille-pain
Ensuite, comme on peut le voir, requestAnimationFrame() est appelée au sein de la fonction animate(). Or, son rôle est… d’appeler la fonction animate().
On a donc une magnifique boucle infinie, qui va tourner dans notre navigateur jusqu’à ce qu’une bonne âme ait la charité de cliquer sur la petite croix en haut à droite pour fermer l’onglet (ami·e·s macintoshien·ne·s, je vous laisse adapter).
Entrée en scène de Jean-Hub’
Un background, c’est bien, mais un background avec un personnage, c’est mieux !
Pour le fabriquer, on va choper un spritesheet sur itch.io. Please meet Jean-Hubert, notre nouveau meilleur ami.
Ou plutôt Jean-Hubert, Jean-Hub’, Jean-Bert’ et Jhub (probablement mon préféré):
Donc là on a un souci, il y a beaucoup trop de zouzous sur l’image. C’est normal, car cela va nous servir, plus tard, à animer le perso. Mais pour l’instant, on voudrait juste avoir le premier zigoto, à savoir Jean-Hubert au naturel.
Je vous passe les détails, mais en gros on crope (= on retaille) l’image dans le code pour ne plus voir les trois autres amigos.
Ensuite, on dessine Jean-Hubert de la même façon qu’on l’a fait avec le background:
Le résultat:
De l’herbe, de l’eau, un écosystème qui paraît sain bien que suspectement trop chlorophyllé. Jean-Hubert semble relax et bien disposé à l’égard des rouages du destin.
Peut-être n’y a-t-il pas de pénurie de carburant dans sa région.
Mais comment bouge-t-il ?
C’est bien joli tout ça, mais pour l’instant on a juste une image statique. Pas de quoi faire frémir une game boy (il faudra qu’on parle du choix de ce nom, un jour). Or, ce qu’on désire ardemment, c’est que Jean-Hubert se meuve à mesure qu’on presse sur des touches, par exemple les flèches directionnelles haut-bas-gauche-droite 🎮
Pour cela, on va détecter si le·la joueur·euse appuie sur une de ces touches. Ceci via un banal eventListener. Voici un exemple pour les touches “haut” et “bas”:
À ce stade du tuto, je me suis dit “pas de soucis, on va faire bouger JH de x pixels dans la direction qui va bien à chaque fois qu’on appuie, bisous fin de l’histoire”. Que nenni ! Car si on fait cela, notre perso va disparaître de notre canvas en deux-deux. Or, ce qu’on veut, c’est qu’il soit toujours au centre du décor, pour avoir l’effet que la “caméra” du jeu le suit dans ses déplacements.
Et pour ça, on va utiliser une astuce simple et sioux à la fois: faire bouger le background plutôt que Jean-Hubert.
L’illusion est parfaite, j’ai l’impression d’être Christian Bale en train d’embobiner Hugh Jackman dans The Prestige.
Sur cette belle image poétique, je disparais et vous laisse en compagnie de notre héros, qui rêve probablement de l’instant où il gagnera en motilité et apprendra à ne pas tomber dans la mer - la suite au prochain épisode, comme on dit.
Délicieuse Lecture... Merci à vous :)
Super newsletter ! Continuez comme ça :)