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