Descrever a geometria do quadro e a ordem da animação
Em uma grade regular, armazene a largura e a altura da célula, o número de colunas e o índice de cada quadro da animação. Calcule x de origem como (índice do quadro módulo número de colunas) × largura da célula, e y de origem como o índice da linha arredondado para baixo (índice do quadro / número de colunas) × altura da célula. Em atlas irregulares, armazene retângulos de origem explícitos. Mantenha a ordem da animação separada da ordem dos arquivos; se a arte estiver organizada por pose e não por sequência, uma caminhada de oito quadros pode usar os índices [0, 1, 2, 1, 0, 3, 4, 3].
Se os sprites forem cortados para remover as margens transparentes, armazene também o tamanho original da tela e o deslocamento do corte. Desenhe em torno de um pivô estável, como os pés do personagem, para que os limites do quadro não movam o corpo da colisão ou o contato visual com o solo conforme a arte muda.
Use o retângulo de origem deliberadamente
Canvas drawImage tem uma sobrecarga que seleciona um retângulo de origem e o dimensiona em um retângulo de destino. O MDN documenta a origem x, y, largura e altura separadamente do destino x, y, largura e altura. Use essa separação para manter o corte do atlas exato enquanto altera o tamanho renderizado. Teste o primeiro, o último e os quadros de limite de linha; uma contagem de colunas errada geralmente aparece como uma fatia de um pixel do sprite adjacente nesses limites.
Verifique as costuras e o carregamento antes de diagnosticar a geometria
Se a arte de células vizinhas vazar durante o desenho em escala, deixe uma margem transparente entre as células do atlas e confira se o modo de filtragem escolhido combina com o estilo da arte. Desenhe um retângulo de depuração ao redor de cada quadro de destino e identifique temporariamente seu índice. Aguarde o carregamento e a decodificação da imagem antes de desenhar; depois, teste na escala real do canvas e na resolução do buffer interno. Compare um quadro sem escala com um quadro escalado. Se só o escalado apresentar uma emenda, investigue a amostragem e as margens internas do atlas antes de alterar as coordenadas de origem.
Perguntas sobre renderização do atlas sprite
Por que parte do sprite vizinho aparece?
O retângulo de origem pode incluir pixels vizinhos, ou a amostragem em escala pode mostrar pixels de borda de um atlas compactado. Verifique o corte e adicione espaçamentos adequados entre as células antes de alterar a ordem dos quadros.
As caixas de colisão devem usar os limites do sprite aparados?
Geralmente mantenha as dimensões de colisão vinculadas ao personagem do jogo, e não aos pixels transparentes incidentais. Um pivô estável e um hitbox explícita evitam que os quadros de animação alterem a geometria do jogo.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção