Cómo dibujar un Space Invader

• Presenta Space Invader Generator y explica el principio con el que genera automáticamente distintos invaders de pixel art
• Se basa en una estructura que aprovecha generación de cuerpos poligonales en vectores y reglas geométricas como simetría, puntos aleatorios y espejado
• Los elementos de extremidades como brazos, tentáculos y cuernos también se expanden con aleatoriedad y métodos geométricos, ofreciendo posibilidades de variación fáciles y creativas
• Completa unos gráficos de juego familiares con la conversión de vector a píxel, aplicación de color y la adición de ojos
• Publica todo el proceso de creación y la lógica de implementación del código, para que estudiantes y desarrolladores puedan personalizarlo o practicar directamente

---

Resumen

Space Invader Generator es una herramienta con la que cualquiera puede crear fácilmente invaders aleatorios con estilo de pixel art. En este artículo se explica cómo funciona y el proceso creativo de generación aleatoria junto con animaciones y ejemplos. Destaca por su enfoque que combina diseño y programación, incluyendo la estructura geométrica de los invaders, la conversión de vector a píxel y la aplicación de color.

Contexto inicial

• Mientras desarrollaba una herramienta de renderizado 3D llamada Rayven, se dio cuenta de la importancia de crear resultados creativos reales
• Eligió como objetivo algo intuitivo y fácil de reconocer, como un Space Invader, por ser un resultado simple y divertido
• Empezó a desarrollarlo a partir de la idea de dibujar varios invaders clásicos con renderizado 3D basado en vectores y luego extenderlo a un generador aleatorio
• También compartió esta experiencia de creación en el code challenge de Creative Coding Amsterdam

Code challenge

• El code challenge de Space Invaders atrajo el interés de muchos creadores y desarrolladores
• Se están reuniendo distintas implementaciones y resultados, y se comparte activamente en comunidades de desarrollo

Del boceto al píxel

• Al principio analizó la estructura de los invaders haciendo garabatos y bocetos a mano sobre papel
• Probó distintas formas de invaders dibujándolas digitalmente en una cuadrícula de 15x15 píxeles con la herramienta Aseprite
• Descubrió patrones geométricos en común, como la simetría sobre un eje central y cuerpos poligonales simples
• Logró implementar una función que genera automáticamente la mayoría de los diseños dibujados a mano combinando las ventajas del pixel art y los gráficos vectoriales
• Los detalles de implementación pueden consultarse en el repositorio de GitHub

Proceso de generación del invader

Encontrar el centro

• Se establece un punto central como referencia para todas las operaciones
• Los tentáculos se generan en la parte inferior, por lo que el cuerpo principal se coloca un poco más arriba
• Se aprovecha la simetría general dibujando solo un lado y luego reflejándolo horizontalmente para completar la figura

Definir la parte superior e inferior

• Al diseñar los costados del cuerpo, se seleccionan aleatoriamente los puntos superior e inferior
• La forma se mantiene igual en ambos lados siguiendo el eje de simetría

Dibujar el lado izquierdo

• Se colocan aleatoriamente entre 1 y 5 puntos en la parte izquierda del cuerpo
• Se generan resultados variados a partir de una transformación libre de un polígono convexo simple
• Los solapamientos de líneas se corrigen de forma natural durante el proceso de pixelado

Reflejo hacia la derecha

• Usando los datos de vértices del lado izquierdo, se genera automáticamente el reflejo del lado derecho

Conectar el polígono del cuerpo

• Se conectan los puntos para completar el cuerpo poligonal vectorial
• Al agregar extremidades sobre esta base, se forma la silueta principal del invader

Agregar extremidades

Método de generación de tentáculos y cuernos

• Se generan por separado los tentáculos inferiores (tentacle) y los cuernos superiores (horn), aplicando el mismo método pero con distinta posición y ángulo

Encontrar la raíz del tentáculo

• Tomando como base el punto más bajo del cuerpo, se genera aleatoriamente primero el tentáculo izquierdo

Boceto de la línea central

• Se crea una polilínea (línea central) usando puntos aleatorios
• La longitud y la forma del tentáculo pueden variar desde varios ángulos

Aplicar grosor (fat line)

• Como la línea central sola es demasiado delgada, se generan puntos a ambos lados para formar un tentáculo grueso
• Cerca del cuerpo es más grueso y se vuelve más delgado hacia la punta (efecto de estrechamiento)
• En las zonas con giros bruscos se reduce el ancho de línea para representar un punto de unión más natural
• Se usa un parámetro de easing para ajustar el ancho

Completar el tentáculo

• Se conectan los puntos de ambos extremos para completar el tentáculo grueso

Extensión a múltiples tentáculos y cuernos

• Con el mismo método puede extenderse a simetría izquierda-derecha, tentáculos centrales y cuernos superiores
• En el caso del tentáculo central, se termina antes para evitar colisiones con los tentáculos laterales ya dibujados
• En los cuernos se reduce el rango de ángulos y se colocan a izquierda y derecha para que no se superpongan en el espacio

Conversión de vector a píxel

Pixelado del cuerpo

• Los píxeles del cuerpo se determinan según si el centro de cada píxel está dentro del polígono vectorial
• Se prioriza la simplicidad y la velocidad de ejecución por encima de la precisión

Pixelado de extremidades

• Los tentáculos y cuernos son delgados, así que muchas veces su centro no queda dentro
• Se asignan píxeles verificando la distancia entre los puntos y el centro de los píxeles adyacentes
• La subdivisión de la línea central (line splitting) puede mejorar la naturalidad de los tentáculos

Agregar ojos

• Se elige aleatoriamente entre varios conjuntos de ojos preparados previamente
• Se colocan cerca del centro del cuerpo y se aplica padding con píxeles de protección hacia afuera
• Los píxeles superpuestos se vacían automáticamente para que se vean como huecos

Aplicación de color

Lógica de generación de color

• Usa el espacio de color OKLCH
• A diferencia de HSL, mantiene un brillo (lightness) constante y permite combinaciones de color vivas y variadas
• Se fija un valor de brillo y se asignan aleatoriamente los otros dos parámetros para lograr distintas variaciones
• Ofrece una impresión continua y visualmente consistente de los invaders

Uso de variaciones en CSS

• El color puede ajustarse con variables de CSS
• Se aplican cambios de luminosidad y saturación según cada situación, como el contraste de los elementos de la UI o el modo de depuración

Implementación de la animación

• Como en el juego original, da movimiento a tentáculos, cuernos y ojos con una animación simple de 2 cuadros
• Se duplica la línea central de las extremidades y luego se desplaza aleatoriamente para generar un cuadro modificado
• Los ojos también se mueven un píxel para mejorar la sensación de vida

Ajuste de tamaño

• Al aumentar el tamaño de la cuadrícula, el invader se vuelve cada vez más detallado y complejo
• Si crece demasiado, se enfatiza la abstracción del vector y se pierde parte de la sensación original de invader
• Está limitado hasta 31x31 píxeles, con una opción oculta que permite llegar hasta 51x51

Conclusión

• Se completa un generador capaz de crear automáticamente una variedad infinita de invaders coloridos
• En el proceso de creación y publicación se materializan el aprendizaje, la diversión y la libertad creativa
• Como tanto el código como el principio están abiertos, resulta ideal para práctica, experimentación y personalización

Comentarios finales de producción

• El código JavaScript del post se conserva de forma que facilite el aprendizaje y la referencia
• Se aprovechó Anime.js y varias dependencias externas para diseñar la animación, y se implementó con TypeScript
• También cuenta con un modo de depuración independiente y opciones por pasos para explorar directamente el proceso de generación

Bonus - Post sobre dibujar cuerdas

• También vale la pena revisar un post interactivo anterior sobre cómo dibujar una forma de cuerda (rope) con SVG y JavaScript

[GN⁺]

Opiniones de Hacker News

• Yo también hice un generador de space invaders
  hay una versión ejecutable y también publiqué el código fuente
  me inspiré en Jared Tarbell
  descubrí que es más fácil de lo que parece lograr buenos resultados
  la clave fueron los ojos, la simetría bilateral y los píxeles aleatorios dentro de un rectángulo pequeño

  • Sobre lo de inspirarse en Jared Tarbell, a mí también sus obras me marcaron mucho cuando recién empezaba con las computadoras
    levitated.net y después complexification.net también fueron joyas de los primeros años de internet
    Lástima que ya no hay soporte para Flash (Levitated) ni Java (Complexification), así que la mayoría de los ejemplos ya no funcionan
    Aun así, del lado de Complexification todavía se pueden ejecutar si pegas el código fuente .pde de Processing en el editor de Processing

  • Me gustaron tanto la UI como la paleta de colores aleatoria
    el resultado está realmente genial

• Este fue una de las mejores experiencias que he tenido leyendo un artículo en el móvil

  • Esa pequeña alegría de ver cómo el canvas iba subiendo conmigo mientras hacía scroll fue realmente memorable

• Me sorprendió mucho lo bien que salió el resultado
  se puede ver en muffinman.io/invaders
  superó lo que esperaba con solo leer el artículo
  y además hoy aprendí sobre oklch

  • Cuando hice pruebas por mi cuenta, a mí también me sorprendió lo bien que salían los resultados
    al pulirlo y agregarle una UI sentí que mejoró bastante
    OKLCH es una mejora enorme
    trabajar con colores en código me costaba, pero esto definitivamente lo hace mucho más cómodo
    en lo personal también me gusta HSLuv, aunque por desgracia no tiene soporte nativo en los navegadores

• Está divertido
  irónicamente se siente como salvar al planeta (la Tierra) creando invaders, una forma hacker de divertirse sin brute force ni AI
  este proyecto merece ser recomendado sin problema

  • Gracias, siento que la AI le está quitando toda la diversión a proyectos como este
    la magia del proceso creativo está justamente en ese trabajo manual

• Está buenísimo que la imagen quede fija arriba y nos siga mostrando de qué se está hablando mientras hacemos scroll
  normalmente no me gusta mucho cuando la página se transforma de forma llamativa al hacer scroll, pero esta composición es una excepción

• Genial
  estoy coleccionando space invaders de todo el mundo
  también vale la pena ver space-invaders.com/flashinvaders

• Como relacionado, está levInvaderFractal (2003), una leyenda web de los 2000 hecha por levitated.net

• De verdad disfruté mucho leerlo
  se nota el cariño puesto en todo: la forma de resolver el problema, el texto mismo y hasta la presentación

• Creo que un buen space invader tiene que verse intimidante y peligroso
  si además agita las pinzas, suma puntos

• Estuvo muy interesante
  es un texto todavía más disfrutable para quien tiene cariño por la estética de 8 bits y la computación retro
  mientras leía se me ocurrió de pronto que esto tal vez sea, al final, una manifestación digital del deseo de la Madre Naturaleza de hacer que todo evolucione hacia el cangrejo
  por la simetría de los space invaders y sus distintas patas y estructuras como pinzas, al final todos los invaders terminan pareciéndose a cangrejos
  hasta me puse a imaginar si no estaremos viendo alguna coincidencia dentro de Matrix