# Mapeie células do atlas para retângulos de origem e destino

> Mantenha os quadros do atlas sprite alinhados definindo retângulos de origem, regras de corte, pivôs e verificações de carregamento em um mapa de renderização.

- URL: https://oneshotgems.ai/pt-BR/topics/sprite-atlas-rendering
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Um atlas sprite agrupa muitos quadros em uma imagem, mas o navegador desenha apenas o retângulo que você pediu para desenhar. Uma largura de quadro errada pode dividir um vizinho; um pivô incompatível pode fazer com que uma animação pareça oscilar mesmo quando cada imagem é válida. Defina a geometria do quadro em um mapa de dados e mantenha os pixels de origem separados do tamanho de destino usado pelo jogo. Isso transforma a depuração do atlas na verificação de retângulos explícitos, em vez de ajustar cada chamada de desenho a olho nu.

## 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

**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.

## Siga sua curiosidade

- [Carregar recursos do jogo sem começar em branco](https://oneshotgems.ai/pt-BR/topics/game-asset-loading): Planeje uma sequência de carregamento de ativos que relate o progresso real, lide com falhas e evite a decodificação de uma imagem grande durante um quadro crítico.
- [Defina a resolução do Canvas para deixar a arte do jogo nítida](https://oneshotgems.ai/pt-BR/topics/canvas-pixel-density): Equilibre a resolução da tela, a proporção de pixels do dispositivo, o uso de memória e o custo de desenho quando um jogo precisa parecer nítido nas telas.

## Leitura complementar

- [MDN usando imagens em tela](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [Sorteio MDNImagem](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/sprite-atlas-rendering