Arregla Frames de Sprite Sheet Desplazados o Cortados
Si una animación salta hacia un lado, muestra parte del frame vecino o corta una extremidad, normalmente el sprite sheet se está cortando con una geometría incorrecta. Esta guía revisa ancho de frame, spacing, padding, trimming y ajustes de importación para decidir si debes cambiar la hoja, los metadatos o el loader.
La comprobación rápida de alineación
Empieza comparando un frame visible de la hoja con el tamaño exacto configurado en el motor. Si la hoja tiene celdas de 32x32 pero el loader usa 31x32, cada frame después de la primera columna se desplaza. Si el arte está centrado pero los metadatos tienen trim offsets, el frame puede renderizarse en la posición equivocada aunque el rectángulo sea correcto.
Problema de grilla uniforme
El mismo desplazamiento se repite por columnas o filas. Revisa frameWidth, frameHeight, spacing, margin, hframes y vframes antes de cambiar el arte.
Problema de metadatos de trim
El rectángulo es correcto pero el sprite aparece desplazado durante la reproducción. Revisa spriteSourceSize, pivot, origin y si el motor entiende frames recortados.
Dónde empieza el desplazamiento
Cinco causas comunes de frames desplazados
La mayoría de los desplazamientos vienen de una diferencia entre la hoja exportada y las suposiciones del loader. Primero revisa la geometría de la hoja; después, metadatos y comportamiento específico del motor.
Tamaño de frame incorrecto
Un loader configurado para 32x32 no puede cortar bien una hoja con celdas 33x32 o un último frame exportado más pequeño.
Spacing o margin ignorado
Si hay huecos entre frames, la fórmula debe incluirlos: x = col * (frameWidth + spacing) + margin.
Frames recortados sin metadatos
El trimming ahorra píxeles, pero el motor necesita offsets para devolver cada frame al mismo cuadro lógico.
Pivot u origen inconsistentes
Distintos origins hacen que el personaje salte aunque cada rectángulo fuente sea correcto. Mantén pivot y origin consistentes.
Padding confundido con spacing
El padding evita bleeding. El spacing cambia dónde empieza la siguiente celda. Confundirlos desplaza las coordenadas.
Mapa de ajustes por motor
Ajustes del motor que causan desplazamiento
Unity, Godot, Phaser y CSS usan nombres distintos para la misma geometría. La regla importante: el importer debe coincidir con la hoja exportada en dimensiones, huecos, márgenes, trim y origen.
Unity Sprite Editor
Usa Grid by Cell Size en hojas uniformes. Confirma que cell size, offset y padding coincidan con el layout exportado.
Godot hframes y vframes
En grillas uniformes, hframes y vframes deben dividir la hoja exactamente. En regiones de atlas, verifica region_rect.
Phaser frameWidth y spacing
Configura frameWidth, frameHeight, spacing y margin juntos. Si falta spacing, los frames posteriores leen huecos o vecinos.
CSS background-position
Usa offsets negativos e incluye los huecos en la fórmula. Evita porcentajes en sprite sheets de tamaño fijo.
Usa esta fórmula antes de reexportar
En una hoja uniforme, el rectángulo fuente empieza en x = margin + col * (frameWidth + spacing) y y = margin + row * (frameHeight + spacing). Si el motor separa spacing horizontal y vertical, calcula cada eje por separado. Si la fórmula no cae en los bordes visuales de las celdas, corrige la exportación o importación en vez de mover frames a mano.
Coordenada de columna
x = marginX + column * (frameWidth + spacingX). Omitir spacingX es la causa clásica del desplazamiento hacia la derecha.
Coordenada de fila
y = marginY + row * (frameHeight + spacingY). Un spacingY incorrecto mezcla partes de filas vecinas.
Caja lógica del frame
En animaciones con trim, cada frame visual necesita la misma caja lógica mediante sourceSize, pivot u origin.
Cuándo conviene reempacar la hoja
Reempaca solo cuando la geometría exportada es inconsistente o le faltan los datos que tu motor necesita. Si cada frame usa una celda uniforme, usa dimensiones fijas y un pequeño spacing. Si el arte tiene límites desiguales, desactiva trimming o exporta metadatos que conserven los offsets.
Usa frames uniformes con loaders simples
CSS sprites, hojas básicas de Phaser y hframes/vframes de Godot son más estables cuando cada celda tiene el mismo tamaño.
Mantén trim solo con soporte de metadatos
Los atlas pueden recortar píxeles vacíos de forma segura solo cuando el runtime lee tamaño original y offsets.
Separa padding de spacing
Spacing crea un hueco medible entre celdas. Padding o extrusion duplica píxeles de borde para reducir artefactos.
FAQ de frames desplazados
Reexporta con geometría consistente
Usa Sprite Sheet Maker para reconstruir grillas uniformes o atlas con metadatos, y luego replica exactamente esas dimensiones en Unity, Godot, Phaser o CSS.