Como desenhar Space Invaders

• Apresenta o Space Invader Generator e explica o princípio de geração automática de vários invaders em pixel art
• A estrutura usa geração simples de corpos vetoriais poligonais com regras geométricas como simetria, pontos aleatórios e espelhamento
• Elementos de membros, como braços, tentáculos e chifres, também são expandidos com aleatoriedade e métodos geométricos, oferecendo possibilidades fáceis e criativas de variação
• A partir da forma vetorial, faz a conversão para pixels e aplica cores, olhos e outros detalhes para concluir um visual familiar de gráfico de jogo
• Todo o processo de criação e a lógica de implementação do código são apresentados, permitindo que estudantes e desenvolvedores personalizem ou pratiquem por conta própria

---

Visão geral

O Space Invader Generator é uma ferramenta com a qual qualquer pessoa pode criar facilmente, de forma aleatória, invaders em estilo pixel art. Este texto explica como ele funciona e descreve o processo criativo de geração aleatória com animações e exemplos. A abordagem se destaca por combinar design e programação, incluindo a estrutura geométrica dos invaders, a conversão de vetor para pixel e a aplicação de cores.

Contexto inicial

• Ao desenvolver uma ferramenta de renderização 3D chamada Rayven, o autor percebeu a importância de criar resultados criativos concretos
• Escolheu um alvo intuitivo e facilmente reconhecível, como Space Invaders, por gerar resultados simples e divertidos
• Depois de desenhar vários invaders clássicos com renderização 3D baseada em vetor, surgiu a ideia de expandir isso para um gerador aleatório
• Essa experiência de criação também foi compartilhada no desafio de código da Creative Coding Amsterdam

Desafio de código

• O desafio de código de Space Invaders atraiu o interesse de muitos criadores e desenvolvedores
• Diferentes implementações e resultados estão sendo reunidos e compartilhados ativamente em comunidades de desenvolvimento

Do esboço ao pixel

• No início, o autor fez rabiscos e esboços à mão no papel para analisar a estrutura dos invaders
• Com a ferramenta Aseprite, experimentou desenhar várias formas de invader em uma grade de 15x15 pixels
• Descobriu padrões geométricos em comum, como simetria no eixo central e corpos poligonais simples
• Ao combinar as vantagens da pixel art e dos gráficos vetoriais, conseguiu implementar uma função que gera automaticamente a maioria dos designs antes desenhados à mão
• Mais detalhes da implementação podem ser vistos no repositório no GitHub

Processo de geração dos invaders

Encontrando o centro

• Define o ponto central, que serve de referência para todas as operações
• Os tentáculos são gerados na parte inferior, então o corpo principal é posicionado um pouco mais acima
• Aproveita a simetria geral, desenhando apenas um lado e depois espelhando horizontalmente para concluir a forma

Definindo topo e base

• Ao projetar as laterais do corpo, escolhe aleatoriamente os pontos superior e inferior
• A forma dos dois lados permanece idêntica de acordo com o eixo de simetria

Desenhando o lado esquerdo

• Posiciona aleatoriamente de 1 a 5 pontos no lado esquerdo do corpo
• Gera diversos resultados a partir de um polígono convexo simples com deformações livres
• A sobreposição de linhas é corrigida naturalmente durante o processo de pixelização

Espelhamento à direita

• Usa os dados dos vértices do lado esquerdo para gerar automaticamente o reflexo à direita

Conectando o polígono do corpo

• Liga os pontos para completar o corpo poligonal vetorial
• Ao adicionar membros sobre essa base, a forma essencial do invader é definida

Adicionando membros

Como gerar tentáculos e chifres

• Gera separadamente tentáculos inferiores (tentacle) e chifres superiores (horn), aplicando o mesmo método com diferenças apenas de posição e ângulo

Encontrando a raiz do tentáculo

• Toma como base o ponto mais inferior do corpo e começa a gerar aleatoriamente o tentáculo esquerdo

Esboçando a linha central

• Usa pontos aleatórios para criar uma polilinha (linha central)
• Isso permite variar o comprimento e a forma dos tentáculos em vários sentidos

Aplicando espessura (fat line)

• Como a linha central sozinha é fina demais, gera pontos dos dois lados para criar um tentáculo mais espesso
• A forma fica mais grossa perto do corpo e mais fina na ponta, produzindo um efeito de afunilamento
• Em partes com ângulos acentuados, reduz a largura da linha para representar uma conexão mais natural
• Usa um parâmetro de easing para controlar a largura

Finalizando o tentáculo

• Conecta os pontos das duas extremidades para completar o tentáculo espesso

Expandindo para vários tentáculos e chifres

• O mesmo método pode ser expandido para simetria esquerda-direita, tentáculos centrais e chifres superiores
• No caso do tentáculo central, a geração é encerrada mais cedo para evitar colisão com os tentáculos laterais já desenhados
• Os chifres são posicionados à esquerda e à direita com um intervalo de ângulo mais estreito para evitar sobreposição

Conversão de vetor para pixel

Pixelização do corpo

• Um pixel do corpo é definido verificando se o centro de cada pixel está dentro do polígono vetorial
• A prioridade aqui é a simplicidade e a velocidade de execução, mais do que a precisão

Pixelização dos membros

• Tentáculos e chifres são finos, então muitas vezes o centro não fica dentro da forma
• Nesses casos, o pixel é atribuído verificando a distância entre os pontos e os centros dos pixels adjacentes
• Também é possível melhorar a naturalidade dos tentáculos refinando a linha central com line splitting

Adicionando olhos

• Escolhe aleatoriamente entre vários conjuntos de olhos pré-preparados
• Posiciona os olhos perto do centro do corpo e aplica padding externo com pixels de margem
• Pixels sobrepostos são removidos automaticamente para parecerem buracos

Aplicação de cores

Lógica de geração de cores

• Usa o espaço de cores OKLCH
• Em comparação com HSL, mantém uma luminosidade (lightness) mais consistente e permite combinações de cores vibrantes e variadas
• Mantém um valor fixo de luminosidade e define aleatoriamente os outros dois parâmetros para criar múltiplas variações
• Isso produz invaders com continuidade visual e uma aparência consistente

Uso de variações em CSS

• As cores podem ser ajustadas com variáveis CSS
• Alterações de luminosidade e saturação podem ser aplicadas conforme a situação, como contraste com elementos da UI e modo de depuração

Implementação da animação

• Como no jogo original, aplica uma animação simples de 2 frames para dar movimento aos tentáculos, chifres e olhos
• Gera um frame modificado duplicando a linha central dos membros e deslocando-a aleatoriamente
• Os olhos também são movidos em um pixel para aumentar a sensação de vida

Redimensionamento

• Ao aumentar o tamanho da grade, o invader se torna cada vez mais detalhado e complexo
• Se ficar grande demais, a abstração vetorial se destaca e a sensação original de invader se perde
• O limite vai até 31x31 pixels, com uma opção oculta permitindo chegar a 51x51

Conclusão

• Foi concluído um gerador capaz de criar automaticamente uma variedade infinita de invaders coloridos
• O processo de criação e de escrita do post proporcionou aprendizado, diversão e liberdade criativa
• Como tanto o código quanto os princípios estão abertos, fica fácil praticar, experimentar e personalizar

Impressões sobre a produção

• O código JavaScript presente no post foi organizado para facilitar estudo e consulta
• A animação foi projetada com uso de Anime.js e várias dependências externas, e implementada em TypeScript
• Há também um modo de depuração separado e opções de etapa para explorar diretamente o processo de geração

Bônus - post sobre desenhar cordas

• Também vale conferir um post interativo anterior sobre como desenhar formas de corda (rope) com SVG e JavaScript

[GN⁺]

Comentários do Hacker News

• Eu também fiz um gerador de space invaders
  Tem uma versão executável e o código-fonte também está disponível
  Foi inspirado por Jared Tarbell
  Tive a experiência de ver que os resultados ficam bons mais facilmente do que eu imaginava
  O essencial eram os olhos, a simetria bilateral e pixels aleatórios dentro de um pequeno quadrado

  • Concordo com a opinião sobre a inspiração em Jared Tarbell; para mim também, os trabalhos dele tiveram grande significado na época em que comecei a mexer com computadores
    levitated.net e depois complexification.net também eram sites preciosos dos primórdios da internet
    Infelizmente, como o suporte a Flash (Levitated) e Java (Complexification) foi encerrado, a maioria dos exemplos não funciona mais
    Ainda assim, no caso do Complexification, dá para executar colando o código-fonte Processing .pde no editor do Processing

  • Gostei tanto da UI quanto da paleta de cores aleatórias
    O resultado ficou realmente incrível

• Este foi um dos melhores tipos de experiência que já tive lendo algo no celular

  • Aquele pequeno prazer de ver o canvas subir junto cada vez que eu rolava a página foi realmente marcante

• Fiquei surpreso com o quão bons ficaram os resultados
  Dá para ver em muffinman.io/invaders
  Foi além do que eu esperava só de ler o texto
  E hoje aprendi sobre oklch

  • Quando experimentei por conta própria, também fiquei surpreso com o quão bons os resultados saíram
    Depois de refinar e adicionar uma UI, senti que ficou bem melhor
    OKLCH é realmente um grande upgrade
    Trabalhar com cores em código era difícil, e isso definitivamente deixa tudo muito mais fácil
    Pessoalmente, também gosto de HSLuv, mas infelizmente ele não tem suporte nativo nos navegadores

• Divertido
  Ironicamente, parece criar invaders para salvar o planeta (a Terra), exatamente aquele jeito hacker divertido sem brute force AI
  Este projeto é fácil de recomendar

  • Obrigado, parece que a IA está tirando toda a diversão de projetos assim
    A magia do processo criativo está justamente nesse trabalho manual

• É muito legal fixar a imagem no topo e continuar mostrando do que estamos falando enquanto rolamos a página
  Normalmente não gosto muito quando a página muda de forma chamativa conforme o scroll, mas esta composição é uma exceção

• Legal
  Coleciono space invaders do mundo todo
  space-invaders.com/flashinvaders também vale a pena conferir

• Como algo relacionado, existe levInvaderFractal (2003), do lendário site da web dos anos 2000 levitated.net

• Gostei muito de ler
  Dá para sentir o cuidado colocado em tudo: na forma de resolver o problema, no texto em si e até na apresentação

• Acho que um bom space invader precisa parecer intimidador e perigoso
  Se balançar as garras, ganha pontos extras

• Foi muito interessante
  É um texto especialmente mais divertido para quem gosta de estética 8-bit e computação retrô
  Pensando bem, isso talvez seja a implementação digital do “desejo da Mãe Natureza de evoluir tudo para caranguejo”
  Por causa da simetria dos space invaders e das várias estruturas parecidas com pernas e garras, no fim todo invader acaba parecendo um caranguejo
  Talvez estejamos vendo algum tipo de coincidência dentro da Matrix