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 sobre representación del atlas de sprites
¿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.
Más información
¿Has visto algo desactualizado? Notificar una corrección