Spritesheets e animação: dando vida aos personagens

Um spritesheet é uma única imagem com todos os quadros de animação de um personagem organizados em grade: a linha de cima com os quadros de andar, a de baixo com os de pular, e assim por diante. Jogos profissionais usam spritesheets porque carregar uma imagem grande é muito mais eficiente que dezenas de arquivos pequenos — e o Wicand Blocks suporta esse fluxo nativamente.

Fantasias: o jeito simples

Para animações curtas, você pode adicionar cada quadro como uma fantasia separada do ator e alternar entre elas com os blocos “mude para a fantasia [nome]” e “próxima fantasia” dentro de um loop com “espere”. Funciona bem para 2–6 quadros.

O limite aparece quando o personagem tem muitos estados (parado, andando, correndo, pulando, abaixado…): gerenciar 30 fantasias soltas vira um pesadelo. É aí que entra o recorte de imagem.

O bloco de imagem recortada

O bloco reporter “Imagem recortada [fantasia] x: _ y: _ largura: _ altura: _” cria uma “janela” sobre uma fantasia: só a região indicada é exibida. Combinado com o bloco “Use imagem [recorte]”, o ator passa a mostrar apenas aquele pedaço do spritesheet.

// mostra o quadro na coluna 2, linha 0 de um
// spritesheet com quadros de 80x90 pixels:
Use imagem (Imagem recortada "spritesheet"
            x: (2 * 80) y: (0 * 90)
            largura: 80 altura: 90)

Animar é trocar o X do recorte ao longo do tempo. Com uma variável frame incrementada a cada quadro:

sempre:
  adicione 1 a animTimer
  mude frame para (resto de (arredondar para baixo de (animTimer / 6)) por 8)
  Use imagem (Imagem recortada "spritesheet"
              x: (frame * 80) y: 0
              largura: 80 altura: 90)

O “/ 6” controla a velocidade (troca de quadro a cada 6 quadros do jogo ≈ 10 trocas por segundo a 60 FPS) e o “resto … por 8” faz a animação voltar ao início depois do oitavo quadro.

Estados de animação

Personagens reais têm vários estados. Use a coordenada Y do recorte para escolher a “linha” do spritesheet conforme o estado, e o X para o quadro dentro da linha:

• ▸Parado → linha 0, alternando 2 quadros lentamente.
• ▸Andando → linha 1, 6–8 quadros em velocidade proporcional a vx.
• ▸Pulando → linha 2, quadro fixo enquanto vy > 0, outro quadro caindo.

Guarde o estado em uma variável e mude apenas os parâmetros do recorte — o script de animação continua sendo um só.

Direção e espelhamento

Para o personagem olhar para onde anda, use o estilo de rotação “esquerda-direita” e o bloco “aponte para a direção [90/-90]”. O Wicand Blocks espelha a imagem automaticamente, então você não precisa de quadros duplicados virados para a esquerda no spritesheet.