Como o lipp aprendeu a voar

O boneco antigo do topo era uma imagem só, recortada em cabeça, tronco e pernas, e cada parte girava um pouco para fingir que ele voava. Funcionava, mas era um boneco de papel.

Agora ele tem uma sprite sheet de verdade: uma linha parado no ar, outra voando para a esquerda e outra voando para a direita. E ele não fica mais só no topo: voa pelo site inteiro.

Recortar sem grade

A folha original não tinha uma grade regular. Cada quadro tinha um tamanho, um espaçamento e uma posição diferentes, e as bordas vinham semitransparentes.

Em vez de recortar na mão, escrevi um script que lê o PNG direto, sem nenhuma dependência, só com o zlib do Node:

1. Toda borda semitransparente vira pixel cheio ou vazio. Pixel art não tem meio-termo.
2. Cada sprite é achado pela transparência, como uma ilha de pixels. Sujeira pequena é descartada.
3. As ilhas são agrupadas em linhas: parado, esquerda e direita.
4. Todo quadro é alinhado pelo centro de massa e copiado para uma célula do mesmo tamanho.

Nenhum pixel é reamostrado. Se a arte mudar, é só rodar de novo:

node tools/build-sprites.mjs

Voar, não grudar

A primeira versão era rápida demais e colava no cursor. Ficava parecendo um ponteiro com roupa.

Agora o cursor é só um destino. Ele acelera aos poucos, tem velocidade máxima, sofre arrasto e freia quando chega. E ele não chega: para a uma distância fixa e fica flutuando de leve. Se o mouse vai para cima dele, ele recua.

A física roda em passos fixos, independente da taxa de atualização da tela. A animação também anda pelo relógio, entre 6 e 8 quadros por segundo, para manter a cara de jogo antigo.

Virar sem teleporte

Quando você troca de lado no meio do voo, só a sprite vira. O corpo continua com o embalo, freia e faz a curva. É um detalhe pequeno, mas é o que faz parecer que ele tem peso.

Os detalhes

• Ele não bloqueia nenhum clique. Tudo embaixo dele continua funcionando.
• No topo, ele passa por trás da caixa de diálogo, e não por cima.
• Com redução de movimento ligada no sistema, ele fica parado no topo da página.
• Abra o site com ?debug no fim da URL para ver o alvo, a posição, a velocidade e o estado dele em tempo real.

Ah, e o site agora tem segredos. Se travar, o terminal lá no rodapé dá dicas.

* Você leu até o fim. Isso conta para alguma coisa.