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