Comment dessiner des Space Invaders

• Présentation de Space Invader Generator, avec une explication du principe de génération automatique de divers invaders en pixel art
• Le système repose sur une génération simple de corps polygonaux vectoriels et sur des règles géométriques comme la symétrie, les points aléatoires et le mirroring
• Les éléments de membres comme les bras, tentacules ou cornes sont eux aussi étendus à l’aide d’aléatoire et de méthodes géométriques, offrant des possibilités de variation simples et créatives
• La conversion du vectoriel en pixels, l’application des couleurs et l’ajout des yeux permettent d’aboutir à un graphisme de jeu familier
• L’ensemble du processus de création et la logique d’implémentation du code sont publiés, permettant aux apprenants et aux développeurs de personnaliser ou de reproduire eux-mêmes l’expérience

---

Vue d’ensemble

Space Invader Generator est un outil qui permet à n’importe qui de créer facilement et aléatoirement des invaders au style pixel art. Cet article explique son fonctionnement ainsi que son processus de génération créative aléatoire, avec des animations et des exemples à l’appui. L’approche se distingue par la combinaison du design et du code, notamment à travers la structure géométrique des invaders, la conversion vectoriel-vers-pixels et l’application des couleurs.

Contexte de départ

• En développant l’outil de rendu 3D Rayven, l’auteur a pris conscience de l’importance de produire de véritables créations
• Il a choisi un sujet intuitif et immédiatement reconnaissable, comme les Space Invaders, afin d’obtenir un résultat simple et amusant
• Après avoir dessiné plusieurs invaders classiques avec un rendu 3D basé sur des vecteurs, l’idée est née d’en faire un générateur aléatoire
• Cette expérience de création a aussi été partagée dans le cadre du code challenge de Creative Coding Amsterdam

Code challenge

• Le code challenge sur Space Invaders a suscité l’intérêt de nombreux créateurs et développeurs
• Différentes implémentations et réalisations sont en cours de collecte et largement partagées dans les communautés de développement

Du croquis au pixel

• Au départ, l’auteur a analysé la structure des invaders en griffonnant et en esquissant à la main sur papier
• Il a ensuite dessiné numériquement plusieurs formes d’invaders sur une grille de 15x15 pixels avec l’outil Aseprite
• Cela a permis d’identifier des motifs géométriques communs, comme la symétrie autour d’un axe central et les corps polygonaux simples
• En combinant les atouts du pixel art et des graphismes vectoriels, il a réussi à implémenter une fonctionnalité capable de générer automatiquement la plupart des designs qu’il avait dessinés à la main
• Les détails d’implémentation sont disponibles dans le dépôt GitHub

Processus de génération des invaders

Trouver le centre

• Un point central servant de référence à toutes les opérations est défini
• Les tentacules étant générés en bas, le corps principal est placé légèrement plus haut
• La symétrie globale est exploitée pour ne dessiner qu’un seul côté, puis compléter l’ensemble par une réflexion gauche-droite

Définir le haut et le bas

• Lors de la conception des côtés du corps, les points supérieur et inférieur sont choisis aléatoirement
• La forme reste identique des deux côtés grâce à l’axe de symétrie

Dessiner le côté gauche

• 1 à 5 points sont placés aléatoirement sur la partie gauche du corps
• On part d’un polygone convexe simple pour générer librement des résultats variés
• Les phénomènes de chevauchement de lignes sont naturellement corrigés lors de la pixellisation

Réflexion vers la droite

• Les données des sommets de gauche servent à générer automatiquement la réflexion sur la droite

Relier le polygone du corps

• Les points sont reliés pour former un corps polygonal vectoriel
• L’ajout des membres sur cette base fait apparaître la forme essentielle de l’invader

Ajout des membres

Méthode de génération des tentacules et des cornes

• Les tentacules en bas (tentacle) et les cornes en haut (horn) sont générés séparément, selon la même méthode, en ne changeant que la position et l’angle

Trouver la racine d’un tentacule

• Le tentacule gauche est généré aléatoirement à partir du point le plus bas du corps

Esquisser la ligne centrale

• Une polyligne (ligne centrale) est créée à l’aide de points aléatoires
• La longueur et la forme du tentacule peuvent varier sous de nombreux angles

Appliquer l’épaisseur (fat line)

• Une simple ligne centrale étant trop fine, des points sont générés de part et d’autre pour former un tentacule épais
• Le tentacule est plus épais près du corps et s’affine vers l’extrémité, créant un effet de taper
• Dans les zones où l’angle est prononcé, l’épaisseur de trait est réduite pour obtenir une jonction plus naturelle
• Un paramètre d’easing est utilisé pour ajuster la largeur

Finaliser le tentacule

• Les points des deux extrémités sont reliés pour compléter un tentacule épais

Étendre à plusieurs tentacules et aux cornes

• La même méthode permet d’ajouter une symétrie gauche-droite, un tentacule central ou des cornes en haut
• Dans le cas du tentacule central, la génération s’arrête plus tôt afin d’éviter les collisions avec les tentacules latéraux déjà dessinés
• Pour les cornes, la plage d’angles est resserrée et leur placement se fait à gauche et à droite pour éviter les chevauchements

Conversion du vectoriel en pixels

Pixellisation du corps

• Les pixels du corps sont déterminés en vérifiant si le centre de chaque pixel se trouve à l’intérieur du polygone vectoriel
• La simplicité et la vitesse d’exécution sont privilégiées à la précision absolue

Pixellisation des membres

• Les tentacules et les cornes sont fins, si bien que leur centre ne se trouve souvent pas dans la zone intérieure
• Les pixels sont donc attribués en vérifiant la distance entre les points et le centre des pixels voisins
• Un raffinement de la mid-line (line splitting) peut améliorer le rendu naturel des tentacules

Ajout des yeux

• Un choix aléatoire est fait parmi plusieurs jeux d’yeux préparés à l’avance
• Ils sont placés près du centre du corps, avec un padding appliqué autour via des pixels tampons
• Les pixels qui se chevauchent sont automatiquement vidés afin de créer un effet de trou

Application des couleurs

Logique de génération des couleurs

• Utilisation de l’espace colorimétrique OKLCH
• Par rapport au HSL, il permet de conserver une luminosité (lightness) plus constante tout en produisant des palettes variées et dynamiques
• Une valeur de luminosité est fixée, tandis que les deux autres paramètres sont choisis aléatoirement pour produire de nombreuses variations
• Cela donne aux invaders une impression de continuité et de cohérence visuelle

Utilisation des variantes CSS

• Les couleurs peuvent être ajustées à l’aide de variables CSS
• Des variations de luminosité et de saturation sont appliquées selon les contextes, comme le contraste des éléments d’interface ou le mode debug

Implémentation de l’animation

• Comme dans le jeu original, une animation simple en 2 frames apporte du mouvement aux tentacules, aux cornes et aux yeux
• La mid-line des membres est dupliquée puis décalée aléatoirement pour générer une frame modifiée
• Les yeux sont eux aussi déplacés d’un pixel pour renforcer l’impression de vie

Redimensionnement

• En augmentant la taille de la grille, l’invader devient progressivement plus détaillé et plus complexe
• Si la taille devient trop grande, l’abstraction vectorielle prend le dessus et l’on perd un peu la sensation d’un véritable invader
• La taille est limitée à 31x31 pixels, avec une option cachée permettant d’aller jusqu’à 51x51

Conclusion

• Le résultat est un générateur capable de créer automatiquement une infinité d’invaders colorés
• Le processus de création et de publication concrétise l’apprentissage, l’amusement et la liberté créative
• Le code et les principes étant entièrement publiés, l’ensemble se prête bien à la pratique, à l’expérimentation et à la personnalisation

Retour sur la réalisation

• Le code JavaScript inclus dans le billet est conservé de manière à faciliter l’apprentissage et la consultation
• L’animation a été conçue avec Anime.js et plusieurs dépendances externes, et l’implémentation a été réalisée en TypeScript
• Un mode debug séparé ainsi qu’une option step permettent d’explorer directement le processus de génération

Bonus - billet sur le dessin de cordes

• Un précédent billet interactif sur le dessin de formes de corde (rope) en SVG et JavaScript mérite aussi le détour