Blog de Metlivi

Cómo planificar una hoja de sprites reutilizable para varios estados de animación de una mascota

En el caso del sprite de una mascota que necesita varias animaciones, planifique la hoja en función de cómo se seleccionará y reproducirá cada estado: defina un tamaño de fotograma y un anclaje compartidos, agrupe los fotogramas por estado con nombre y establezca una cuadrícula predecible antes de dibujar cada fotograma. Conserve un archivo de origen por capas y exporte la imagen con metadatos cuando su herramienta y entorno de ejecución lo admitan. Esto facilita la revisión de los estados y ayuda a evitar que los recortes se desvíen o se lean en el orden incorrecto.

15 de octubre de 2026Lectura de 6 minPor Metlivi Editorial Team
Sección 1

Comience con los estados que la mascota realmente necesita

Enumere los estados requeridos de la mascota antes de elegir las dimensiones de la hoja. Un conjunto reducido podría incluir reposo (idle), movimiento y una breve reacción; la lista exacta dependerá del proyecto. Para cada estado, decida si se reproduce en bucle, una sola vez o en orden inverso al final. Marque el primer y el último fotograma y calcule cuántas posturas distintas necesita el movimiento. Esta es una ayuda de planificación, no una fórmula de animación prescriptiva.

En Aseprite, las etiquetas de fotogramas (frame tags) pueden marcar rangos como animaciones con nombre, y cada etiqueta puede especificar una reproducción hacia adelante, hacia atrás o de tipo ping-pong. Nombrar y etiquetar los rangos a medida que planifica hace que los límites de cada estado sean visibles en el archivo fuente, incluso si luego los exporta juntos. Aseprite: Tags

Sección 2

Elija un cuadro de fotograma y un anclaje que sirvan para todos los estados

Establezca un ancho y un alto de celda coherentes para los fotogramas de animación cuando la herramienta de destino espere una cuadrícula regular. Deje espacio para la postura más ancha de la mascota, las orejas o la cola levantadas y cualquier movimiento pequeño más allá del cuerpo. Sitúe a la mascota respecto a un anclaje compartido, como el centro de sus patas o el centro de su postura en reposo. Cuando la mascota cambie de postura, mueva el dibujo alrededor de ese anclaje en lugar de desplazar el anclaje en sí; de lo contrario, la mascota podría dar la impresión de saltar de un fotograma a otro.

Una cuadrícula fija es fácil de dividir porque cada celda tiene las mismas dimensiones y posición de fila o columna. La importación de hojas de sprites en Aseprite solicita el ancho y el alto de los fotogramas, y admite un desplazamiento (offset) y espaciado (padding) cuando la imagen tiene separaciones. Si los fotogramas difieren sustancialmente de tamaño o necesitan puntos de pivote individuales, un atlas con metadatos por fotograma puede encajar mejor que una cuadrícula uniforme. Aseprite: Sprite sheets

Sección 3

Asigne estados a filas o etiquetas antes de dibujar

Esboce un pequeño esquema de diseño con los nombres de los estados y los rangos de fotogramas. Para una cuadrícula regular, reserve una fila por estado y mantenga los fotogramas de cada estado en orden de reproducción de izquierda a derecha. Si el número de fotogramas varía según el estado, deje vacías las celdas no utilizadas o use una tira independiente por estado; no coloque posturas no relacionadas en una fila solo para rellenarla. Una secuencia lineal es compacta, pero puede ser más difícil de inspeccionar; una matriz hace que la agrupación por estados sea más clara tanto para las personas como para los importadores sencillos basados en cuadrículas.

No existe una convención universal para el orden de las filas. El orden que espera el importador es fundamental: la documentación de Aseprite señala que el tipo de hoja afecta al orden en que se toman los fotogramas al importar, y su exportación admite disposiciones horizontales, verticales y de matriz. Elija un orden que el motor de destino pueda interpretar y, a continuación, regístrelo en las notas del proyecto o en los metadatos. Aseprite: Sprite sheets

Sección 4

Mantenga el archivo de origen editable separado de la hoja exportada

Trate la hoja de sprites como una imagen final de entrega, no como el único archivo de trabajo editable. Conserve el proyecto nativo con sus capas, fotogramas, etiquetas y cortes (slices), de modo que pueda modificar un estado individual sin tener que reconstruirlo a partir del archivo exportado y acoplado. La documentación de Aseprite indica que su archivo .aseprite conserva información como capas, fotogramas, etiquetas y cortes; la exportación en PNG resulta útil para consumir el material gráfico en otros lugares. Aseprite: Files

Añada metadatos si el entorno de ejecución necesita ubicar fotogramas o leer tiempos y nombres de estados. Las opciones de exportación de Aseprite incluyen datos JSON, controles de espaciado (padding), recorte (trimming) y selección de etiquetas. Si utiliza una disposición empaquetada o recortes de tamaño variable, conserve esos metadatos junto con la imagen: las coordenadas de píxeles no se pueden deducir con certeza únicamente a partir de la fila y la columna. Los cortes de Aseprite también pueden almacenar límites con nombre y un punto de pivote, y la información de los cortes se puede incluir en el JSON de la hoja de sprites. Aseprite: ExportSpriteSheet, Aseprite: Slices

Sección 5

Defina el espaciado y el recorte teniendo en cuenta el importador

El espaciado (padding) define el espacio vacío entre los fotogramas o alrededor de la hoja; la cantidad adecuada dependerá del importador y de cómo se muestreará la textura. Mantenga las celdas separadas si el flujo de trabajo de destino requiere espacios visibles o si desea inspeccionar los límites con facilidad. Si los fotogramas están juntos, confirme que el importador pueda dividirlos de forma fiable. Aseprite presenta el espaciado de borde, de forma e interior como ajustes de exportación distintos, por lo que conviene comprobar el significado de cada opción en la herramienta en lugar de tratar el «padding» como un único ajuste universal. Aseprite: ExportSpriteSheet

El recorte elimina los márgenes transparentes, lo que puede reducir el área vacía, pero podría alterar los límites de los fotogramas exportados. Si recorta los fotogramas, conserve los desplazamientos, puntos de pivote u otros metadatos necesarios para volver a ubicar el recorte visible en el anclaje compartido. De lo contrario, una postura con una silueta más pequeña puede parecer desplazada, incluso si el dibujo original estaba alineado correctamente. En el caso de un flujo de trabajo con cuadrícula regular sin metadatos por fotograma, evite recortar celdas individuales a menos que el importador preserve su información de alineación original.

Sección 6

Valide la hoja como una animación, no solo como una imagen

Antes de exportar, revise los estados planificados en secuencia. Compruebe que el primer y el último fotograma de cada bucle se unan como se espera, que las acciones de un solo uso terminen en una postura final adecuada y que el anclaje de la mascota permanezca visualmente estable. Después, importe la hoja utilizando el orden de fotogramas, las dimensiones de las celdas, el desplazamiento y el espaciado previstos. Reproduzca cada estado con su temporización correspondiente; una hoja que se ve ordenada en un visor de imágenes aún puede presentar un recorte incorrecto, un fotograma omitido o un orden invertido en un importador.

Utilice esta lista de comprobación rápida antes de pasar la hoja a la siguiente fase:

  • Cada estado tiene un nombre claro y un rango de fotogramas definido.

  • Las dimensiones de la cuadrícula, las dimensiones de los fotogramas y el orden de lectura coinciden con los del importador.

  • La mascota se mantiene alineada con el mismo anclaje en todas las posturas.

  • El recorte y el espaciado no cortan detalles ni mezclan celdas adyacentes.

  • Los metadatos exportados, si se utilizan, acompañan a la imagen correcta y describen la disposición actual.

  • El archivo de origen editable sigue disponible para futuras revisiones.

Sección 7

Una secuencia de planificación práctica

En primer lugar, redacte la lista de estados y el comportamiento de reproducción. A continuación, decida si el importador espera una cuadrícula regular o si admite metadatos de fotogramas. Defina el tamaño de la celda y el anclaje a partir de la postura más ancha, asigne cada estado a filas o a rangos de fotogramas con nombre y, solo entonces, dibuje y pula la animación. Exporte una pequeña hoja de prueba al principio e impórtela en el entorno de ejecución real antes de terminar todas las posturas. Esa prueba revela supuestos de diseño mientras aún resulta económico modificarlos.

La decisión clave de planificación es el acuerdo o contrato entre el material gráfico y el importador: una cuadrícula regular necesita celdas uniformes y un orden conocido; una hoja empaquetada o recortada necesita metadatos fiables y que se conserve la información de posicionamiento. Deje ese acuerdo explícito y la misma animación de origen podrá mantenerse organizada mientras su diseño exportado cambia según las necesidades del proyecto.

Sección 8

Fuentes

Lecturas relacionadas

Sigue explorando este tema