Comment dessiner des Space Invaders

 (muffinman.io)
1 points par GN⁺ 2025-08-20 | 1 commentaires | Partager sur WhatsApp
  • 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

À lire aussi

1 commentaires

 
GN⁺ 2025-08-20
Commentaire Hacker News

  • J’ai moi aussi créé un générateur de space invaders
    Il y a une version exécutable et le code source est également public
    Inspiré par Jared Tarbell
    J’ai constaté qu’il était plus facile que prévu d’obtenir de bons résultats
    L’essentiel, c’était les yeux, la symétrie bilatérale et des pixels aléatoires dans un petit carré

    • Je partage l’avis sur l’inspiration de Jared Tarbell ; ses œuvres ont aussi énormément compté pour moi quand j’ai découvert l’informatique
      levitated.net puis complexification.net étaient aussi des sites précieux des débuts du web
      Malheureusement, avec l’arrêt du support de Flash (Levitated) et de Java (Complexification), la plupart des exemples ne fonctionnent plus
      Cela dit, du côté de Complexification, on peut encore les exécuter en collant le code source Processing .pde dans l’éditeur Processing

    • J’aime beaucoup l’UI et la palette de couleurs aléatoires
      Le résultat est vraiment superbe

  • C’était l’une des meilleures expériences de lecture sur mobile que j’aie eues

    • Ce petit plaisir de voir le canvas remonter avec le scroll m’a vraiment marqué

  • J’ai été surpris par la qualité du résultat
    Visible sur muffinman.io/invaders
    C’est au-delà de ce à quoi je m’attendais en ne lisant que l’article
    Et aujourd’hui, j’ai découvert oklch

    • En faisant mes propres essais, j’ai moi aussi été surpris de voir à quel point le résultat sortait bien
      Une fois peaufiné et avec une UI ajoutée, j’ai trouvé ça nettement meilleur
      OKLCH est vraiment une énorme amélioration
      Manipuler les couleurs en code était difficile, et ça rend clairement les choses bien plus simples
      Personnellement, j’aime aussi HSLuv, mais malheureusement il n’est pas pris en charge nativement par les navigateurs

  • C’est amusant
    Paradoxalement, on a l’impression de sauver la planète (la Terre) en créant des invaders, une approche de hacker réjouissante sans brute force IA
    Ce projet mérite largement d’être recommandé

    • Merci, j’ai l’impression que l’IA enlève tout le plaisir de ce genre de projets
      La magie de la création réside justement dans ce travail manuel

  • Le fait de garder l’image fixée en haut pour nous montrer en permanence de quoi on parle pendant le défilement est vraiment excellent
    En général, je n’aime pas trop les pages qui changent de manière tape-à-l’œil au scroll, mais cette mise en page est une exception

  • Super
    Je collectionne des space invaders du monde entier
    space-invaders.com/flashinvaders vaut aussi le détour

  • Dans le même esprit, il y a levInvaderFractal (2003), créé par la légende du web des années 2000 levitated.net

  • J’ai pris énormément de plaisir à lire ça
    On sent le soin apporté à la manière de résoudre le problème, au texte lui-même et à la présentation

  • À mon avis, un bon space invader doit avoir l’air imposant et dangereux
    Si ses pinces bougent, c’est encore des points bonus

  • C’était très intéressant
    C’est un article particulièrement plaisant pour celles et ceux qui aiment l’esthétique 8-bit et le rétrocomputing
    En le lisant, je me suis dit que c’était peut-être au fond une incarnation numérique du « désir de Mère Nature de faire évoluer toute chose en crabe »
    À cause de la symétrie des space invaders et de leurs multiples structures évoquant des pattes ou des pinces, tous les invaders finissent par ressembler à des crabes
    Je me suis même demandé si nous n’étions pas en train d’apercevoir une forme de convergence dans la Matrix