# Asigne celdas del atlas a rectángulos de origen y destino

> Mantenga alineados los marcos del atlas de sprites definiendo rectángulos de origen, reglas de recorte, pivotes y comprobaciones de carga en un mapa de representación.

- URL: https://oneshotgems.ai/es/topics/sprite-atlas-rendering
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Un atlas de sprites incluye muchos fotogramas en una imagen, pero el navegador sólo dibuja el rectángulo que le pides que dibuje. Un ancho de marco incorrecto puede dividir a un vecino; un pivote no coincidente puede hacer que una animación parezca tambalearse incluso cuando cada imagen es válida. Defina la geometría del marco en un mapa de datos y mantenga los píxeles de origen separados del tamaño de destino utilizado por el juego. Eso convierte la depuración del atlas en una verificación de rectángulos explícitos en lugar de ajustar cada llamada de dibujo a ojo.

## Describir la geometría del cuadro y el orden de la animación.

En una cuadrícula regular, guarde el ancho y el alto de cada celda, el número de columnas y el índice de fotograma de cada animación. Calcule x de origen como (índice de fotograma módulo número de columnas) × ancho de celda, y y de origen como el índice de fila obtenido al redondear hacia abajo (índice de fotograma / número de columnas) × alto de celda. En atlas irregulares, guarde rectángulos de origen explícitos. Mantenga el orden de la animación separado del orden de los archivos; si el arte está organizado por pose y no por secuencia, una caminata de ocho fotogramas puede usar los índices [0, 1, 2, 1, 0, 3, 4, 3].

Si los sprites se recortan para eliminar los márgenes transparentes, también almacene el tamaño original del lienzo y recorte el desplazamiento. Dibuja alrededor de un pivote estable, como los pies del personaje, de modo que los límites del marco no muevan el cuerpo de colisión o el contacto visual con el suelo a medida que cambia la obra de arte.

## Utilice el rectángulo fuente deliberadamente

Canvas drawImage tiene una sobrecarga que selecciona un rectángulo de origen y lo escala a un rectángulo de destino. MDN documenta el origen x, y, ancho y alto por separado del destino x, y, ancho y alto. Utilice esa separación para mantener exacto el recorte del atlas mientras cambia el tamaño renderizado. Pruebe los marcos primero, último y de límite de fila; un recuento de columnas erróneo suele aparecer como una fracción de un píxel del objeto adyacente en esos límites.

## Verifique las costuras y la carga antes de diagnosticar la geometría.

Si el arte de celdas vecinas se filtra al dibujar con escala, deje un margen transparente entre las celdas del atlas y compruebe que el modo de filtrado elegido sea adecuado para el estilo artístico. Dibuje un rectángulo de depuración alrededor de cada fotograma de destino y etiquete temporalmente su índice. Espere a que la imagen se cargue y decodifique antes de dibujar; después, pruebe con la escala real del canvas y su resolución interna. Compare un fotograma sin escalar con uno escalado. Si solo el escalado muestra una costura, revise el muestreo y los márgenes internos del atlas antes de cambiar las coordenadas de origen.

## Preguntas

**¿Por qué aparece parte del sprite vecino?** El rectángulo de origen puede incluir píxeles vecinos, o el muestreo a escala puede mostrar píxeles de borde de un atlas muy compacto. Verifique el recorte y agregue separaciones adecuadas entre celdas antes de cambiar el orden de los cuadros.

**¿Las cajas de colisión deberían usar los límites de sprites recortados?** Por lo general, mantenga las dimensiones de colisión vinculadas al personaje del juego, no a los píxeles transparentes incidentales. Un pivote estable y una hitbox explícita evitan que los fotogramas de animación cambien la geometría del juego.

## Sigue tu curiosidad

- [Cargar recursos del juego sin un comienzo en blanco](https://oneshotgems.ai/es/topics/game-asset-loading): Planifique una secuencia de carga de recursos que informe del progreso real, maneje las fallas y evite decodificar una imagen grande durante un fotograma crítico.
- [Establece la resolución del canvas para que el arte del juego se vea nítido](https://oneshotgems.ai/es/topics/canvas-pixel-density): Equilibre la resolución del respaldo del lienzo, la proporción de píxeles del dispositivo, el uso de la memoria y el costo del dibujo cuando un juego debe verse claro en todas las pantallas.

## Más información

- [MDN usando imágenes sobre lienzo](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [Imagen de sorteo de MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
Página canónica: https://oneshotgems.ai/es/topics/sprite-atlas-rendering