Sprite Sheet en Cocos: guía completa para dividir una imagen grande en frames de animación

Generaste con Midjourney o Stable Diffusion una secuencia de frames de animación de un personaje. Todos los frames están en una sola imagen: de pie, arranque, carrera y parada, 8 frames alineados.

La imagen se ve perfecta.

Pero al importarla en Cocos Creator, el problema aparece: no son 8 imágenes independientes, sino una sola imagen grande. ¿Cómo extraer cada acción del personaje? ¿Cómo convertirla en un Animation Clip reproducible?

Sin un plist listo y con el recorte manual demasiado lento, este artículo te ofrece tres opciones — desde herramientas online gratuitas hasta software profesional — para elegir la ruta más práctica.

¿Qué es un Sprite Sheet? ¿Por qué es esencial en desarrollo de juegos?

Un sprite sheet — en China los desarrolladores lo llaman «精灵图» o atlas — consiste en unir varias imágenes pequeñas en una sola imagen grande, con un archivo de configuración que registra la posición y el tamaño de cada subimagen.

Por ejemplo, tienes una animación de personaje con 8 frames de 64x64 píxeles. Guardadas por separado, serían 8 archivos PNG independientes. Como sprite sheet, esos 8 frames se combinan en una imagen de 512x64 o 256x256, más un plist o json que indica «el primer frame está en (0,0), el segundo en (64,0)».

¿Por qué complicarse tanto? Dos razones sólidas.

Reducir Draw Calls. Es la ganancia de rendimiento más directa. Un Draw Call es cada invocación de instrucción de dibujo de la GPU. Con 8 imágenes sueltas, aunque estén en la misma escena, la GPU debe procesarlas 8 veces — porque cada cambio de textura requiere una nueva operación de enlace. Unidas en una sola imagen, solo hace falta 1 Draw Call y la eficiencia de renderizado mejora de inmediato. En plataformas con hardware limitado como el móvil, la diferencia es notable.

Según la documentación oficial de Cocos, en escenas complejas los Draw Calls pueden pasar de decenas a unos pocos y mantener 60 FPS estables. Lo comprobé en un minijuego: al cambiar la animación del personaje de imágenes sueltas a atlas, el stuttering en Android de gama baja disminuyó de forma visible.

Reducir fragmentación de memoria. TexturePacker ha medido que un atlas ahorra entre un 30 % y un 50 % de memoria respecto a imágenes sueltas. La lógica es sencilla: cada imagen suelta tiene su propio buffer de textura, y los costes de alineación de bordes y conversión de formato se acumulan. Unidas en una sola imagen, la asignación de memoria es más compacta y la GPU trabaja con mayor fluidez.

¿Qué formato tiene el archivo de configuración? Cocos Creator usa plist; las herramientas genéricas suelen usar json. plist es el formato de configuración del ecosistema Apple, con estructura xml que registra el nombre, coordenadas, tamaño y rotación de cada SpriteFrame. json es similar pero más conciso; muchas herramientas online y Unity lo admiten.

Tres métodos de división: ¿cuál es el más práctico?

Tienes una imagen grande sin archivo de configuración. ¿Cómo dividirla? Tres opciones según tu escenario.

Opción 1: TexturePacker, herramienta profesional

Es la opción estándar en la industria de juegos. TexturePacker está especializado en empaquetado y descomposición de atlas, con soporte para Cocos, Unity, SpriteKit y otros motores.

Ventajas: funcionalidad completa. Algoritmos de disposición automática (MaxRects, Grid, Shelf), optimización de formato de píxeles (PVRTC para iOS, ETC para Android), soporte de rotación, recorte y compresión de zonas transparentes. Formatos de exportación completos; el plist de Cocos funciona directamente. También facilita el procesamiento por lotes — cientos de imágenes de una vez.

Desventajas: cuesta dinero. La versión básica cuesta $49 y la profesional $199. Aunque es potente, para desarrolladores independientes con proyectos pequeños, la inversión puede no compensar. Además requiere instalación; disponible en Windows y macOS, no en Linux.

Escenario ideal: proyectos de mantenimiento a largo plazo, grandes volúmenes de assets artísticos, juegos comerciales con actualizaciones continuas. Si es un producto en producción, la inversión merece la pena.

Alibaba Cloud - Opción preferida para desarrolladores, 15 % de descuento exclusivo en Lighthouse

Obtener 15% dto. →Anuncio

Opción 2: herramientas online de recorte automático

Sin instalar software: abres una web y listo. El principio es un algoritmo de detección de componentes conexos — identifica bloques de píxeles independientes sobre fondo transparente y calcula automáticamente los bounding boxes.

He probado varias; recomiendo dos fiables:

ImgCrop (imgcrop.com). Subes un sprite sheet, detecta los frames independientes y exporta PNGs separados. Tiene la opción «Nombrar en orden visual», de arriba abajo y de izquierda a derecha, sin renombrar manualmente.

图文工具箱 (imgtool.net). Funcionalidad similar, con soporte de procesamiento por lotes y conversión de formato.

Ventajas: gratis, sin instalación, rápido. Probé con una animación de 50 frames y obtuve resultados en 3 segundos, con nombres ordenados.

Desventajas: funcionalidad limitada. No maneja bien layouts complejos, zonas superpuestas o fondos no transparentes. Además depende de la red; no subas assets sensibles.

Escenario ideal: prototipos rápidos, procesamiento puntual, pocos assets. Si solo necesitas dividir unas animaciones generadas por IA, esta opción basta.

Opción 3: recorte manual (Photoshop o GIMP)

El método más básico: abres la imagen, trazas líneas con la herramienta de slices y exportas uno a uno.

Ventajas: control preciso. Formas irregulares, layouts especiales, recorte de zonas concretas — la operación manual es la más flexible. Si dominas PS, unas pocas imágenes no suponen problema.

Desventajas: baja eficiencia, propenso a errores. Decenas de frames cansan la vista. Cada cambio de asset obliga a repetir. La convención de nombres también se desordena con facilidad.

Escenario ideal: necesidades especiales, procesamiento único, ya tienes habilidades en PS. Por ejemplo, assets dibujados a mano con layout irregular que las herramientas automáticas no reconocen; entonces el recorte manual es la única opción.

Tabla comparativa

Práctica: flujo en cinco pasos de imagen grande a animación

Elegido el método, ¿cómo ejecutarlo? Ejemplo completo: «animación de personaje generada por IA → Animation Clip reproducible en Cocos Creator».

Paso 1: preparar el asset

Supón que generaste con Midjourney una animación de carrera, con un prompt similar a character running animation sprite sheet, 8 frames, transparent background. El resultado es un PNG con 8 frames en fila horizontal.

Comprueba dos cosas:

1. Fondo transparente. Formato PNG, zona transparente limpia, sin manchas ni marcas de agua. Las imágenes generadas por IA a veces dejan residuos en los bordes; límpialos con PS o herramientas online.
2. Alineación de frames. Confirma el orden — ¿de izquierda a derecha son frames consecutivos de la acción? A veces la IA desordena la secuencia; revísalo visualmente.

Sugerencia de nombre: character_run_sheet.png para identificarlo fácilmente.

Paso 2: elegir el método de división

La herramienta online es la más rápida. Abre ImgCrop (imgcrop.com) y sube el PNG.

Marca dos opciones:

• «Nombrar en orden visual» — de izquierda a derecha, los archivos exportados se llamarán frame_01.png a frame_08.png
• «Mantener tamaño original» — sin escalar, conserva la precisión de píxeles generada por IA

Haz clic en dividir y descarga. Listo en 3 segundos.

Si tienes TexturePacker, el flujo es similar. Abre el software, importa el sprite sheet, elige el modo «Dividir atlas existente» (no «Empaquetar imágenes sueltas») y exporta plist + SpriteFrames. Este método es más profesional y permite optimizar el formato de píxeles.

Paso 3: importar en Cocos Creator

Abre Cocos Creator 3.8 LTS (versión LTS actual). Arrastra los PNG divididos al directorio assets, por ejemplo en assets/sprites/character/.

Cada PNG genera automáticamente un archivo .meta. En el panel de propiedades, confirma que el tipo de imagen es sprite-frame (valor predeterminado, no hace falta cambiarlo).

Si usas atlas exportado por TexturePacker (con plist), arrastra plist + PNG completos. Cocos lo reconoce como recurso Atlas con múltiples subrecursos SpriteFrame.

Paso 4: crear el Animation Clip

Ya tienes 8 SpriteFrames; hay que convertirlos en una animación reproducible.

KiloClaw - OpenClaw gestionado para empresas: orquestación de agentes IA y enrutamiento inteligente

Empezar →Anuncio

1. Crea un nodo Sprite en la escena (clic derecho en Hierarchy → Create → Sprite)
2. Añade el componente Animation (Inspector → Add Component → Animation)
3. Crea el Animation Clip: clic derecho en assets → Create → Animation clip, nómbralo character_run.anim
4. Arrastra ese Clip a la propiedad Clips del componente Animation

Ahora la parte clave:

Abre el editor de Animation (menú Window → Animation). Selecciona el nodo Sprite y verás la pista de animación.

Arrastra los 8 SpriteFrames a la pista. Por defecto crea 8 keyframes, uno por imagen. Se colocan automáticamente con intervalo de 1 segundo — demasiado lento.

Ajusta el intervalo: en la parte inferior del editor, cambia Sample (tasa de muestreo) a 10 o 12. Eso significa 10-12 frames por segundo, velocidad razonable. Para correr, unos 10 fps suele verse natural.

Previsualiza: pulsa reproducir en el editor de Animation y el Sprite cambiará de imagen en secuencia; el personaje empieza a correr.

Paso 5: controlar la reproducción con script

Animation Clip listo. ¿Cómo invocarlo en el juego?

Escenario simple — reproducción en bucle automática:

// CharacterController.ts
import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
    
    @property(Animation)
    animation: Animation | null = null;
    
    start() {
        if (this.animation) {
            // Reproducir animación de carrera en bucle
            this.animation.play('character_run');
            // Configurar reproducción en bucle
            const state = this.animation.getState('character_run');
            if (state) {
                state.repeatCount = Infinity;
            }
        }
    }
}

Monta este script en el nodo Sprite y enlaza la referencia al componente Animation. Al iniciar el juego, el personaje corre automáticamente.

Cambio de animación — por ejemplo, de correr a parar:

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // Transición de 0.2 s, evita cortes bruscos
    }
}

// Llamada: el personaje deja de correr
this.playAnimation('character_idle');

crossFade suaviza la transición entre animaciones y evita saltos instantáneos. Es un detalle importante; sin él, los cambios se ven rígidos.

Trampas que ya pisé — para que las evites

El procesamiento de sprite sheets tiene problemas frecuentes; conocerlos de antemano ahorra tiempo de depuración.

Trampa 1: Cocos Creator 3.x no reconoce TexturePacker antiguo

Si usas TexturePacker 4.x o anterior, el plist importado en Cocos Creator 3.0+ dará error: «Atlas format not supported».

Motivo: Cocos Creator 3.x cambió el analizador de atlas y solo reconoce el formato de TexturePacker 5.x.

Solución: actualizar TexturePacker a 5.x. O usar Auto Atlas integrado de Cocos. En Cocos Creator, clic derecho en assets → Create → Auto Atlas, arrastra las imágenes sueltas y genera el atlas automáticamente.

Trampa 2: orden de nombres de frames desordenado

Tras dividir con herramientas online, los archivos se llaman frame_01.png, frame_02.png… pero a veces el orden no es correcto. Si la imagen generada por IA va de derecha a izquierda, la opción «orden visual» hace que el primer frame sea en realidad el último de la acción.

Al importar la animación, el personaje corre «hacia atrás».

Solución: confirma visualmente la dirección antes de dividir. Si va de derecha a izquierda, renombra manualmente o usa renombrado por lotes en PS. TexturePacker tiene opción de «orden espacial» con dirección personalizable (de arriba abajo, de izquierda a derecha).

Trampa 3: recorte de píxeles transparentes

El componente Sprite tiene la propiedad Trim, que por defecto recorta los píxeles transparentes del borde. Es una optimización para renderizado más compacto.

Pero a veces el recorte falla. Por ejemplo, en una animación de personaje cada frame no tiene exactamente el mismo tamaño — el primero 64x64, el segundo 64x70 porque el brazo se extiende. Tras recortar, cambian los límites del segundo frame y el personaje salta de posición al reproducir.

Solución: en las propiedades del SpriteFrame, cambia Trim Type a None (sin recorte) o Custom (recorte personalizado). Mantén todos los frames con el mismo tamaño para evitar deriva de posición.

Trampa 4: intervalo incorrecto en Animation Clip

Problema habitual de principiantes: el Animation Clip va demasiado rápido o lento.

La tasa de muestreo predeterminada es 60, es decir 60 fps. Con solo 8 imágenes, a esa velocidad termina en 0,13 segundos — el personaje corre como teletransportándose.

Vultr - Servidor cloud NVMe de alto rendimiento, 32 ubicaciones globales, despliegue Docker con un clic

Ver precios →Anuncio

Solución: ajusta el parámetro Sample. Para correr, suele bastar 8-12 fps; pon 10 o 12. Para cámara lenta (respiración, idle), 6-8 fps es suficiente.

En el editor de Animation también puedes ajustar manualmente la duración de cada frame. Selecciona keyframes y arrástralos para controlar el intervalo con precisión.

Optimización de rendimiento: cómo diseñar el atlas

Con el sprite sheet listo, aún puedes exprimir más rendimiento.

Tamaño recomendado del atlas

Un atlas individual no debe superar 2048x2048 píxeles. Es el límite de textura en muchos dispositivos de gama baja. Por encima, algunos dispositivos fallan o degradan el renderizado.

Si tu animación tiene muchos frames (por ejemplo, 50 de un ataque), considera dividir en dos atlas. TexturePacker puede dividir automáticamente configurando Max Size en 2048.

Elección de formato de píxeles

Cada plataforma tiene su formato óptimo:

• iOS: PVRTC (formato de compresión propietario de Apple). Al exportar con TexturePacker, elige PVRTC 4bpp; el tamaño puede reducirse a un cuarto.
• Android: ETC1 o ETC2. La mayoría de dispositivos los soportan con buena eficiencia de compresión.
• Multiplataforma genérico: RGBA8888 (sin compresión). Archivos grandes pero máxima compatibilidad; ideal para fase de pruebas.

En producción, elige el formato según la plataforma objetivo. TexturePacker admite «empaquetado multi-formato» para generar atlas de iOS y Android en una sola pasada.

Función de atlas dinámico

Cocos Creator tiene Auto Atlas, que combina automáticamente SpriteFrames sueltos en la escena para renderizado por lotes.

Cómo activarlo: clic derecho en assets → Create → Auto Atlas, arrastra todas las imágenes sueltas. Al compilar, genera el atlas y reduce Draw Calls automáticamente.

Útil para proyectos con pocos recursos. Con mucho volumen de assets artísticos, conviene empaquetar previamente con TexturePacker para mayor control.

Monitor de Draw Call

¿Cómo confirmar que el sprite sheet realmente optimizó? Mira la cantidad de Draw Calls.

En las herramientas de desarrollo de Cocos Creator, el panel Profiler muestra Draw Calls en tiempo real. En escenas complejas, compara los valores entre imágenes sueltas y atlas.

Estado ideal: todos los frames de animación del mismo personaje en un solo atlas, Draw Call estable en 1. Si el personaje usa atlas distintos, al cambiar animación los Draw Calls fluctúan — entonces conviene fusionar animaciones relacionadas en una sola imagen.

Resumen

Convertir un sprite sheet generado por IA en un Animation Clip reproducible en Cocos Creator no es complicado:

1. Confirmar el asset (fondo transparente, orden de frames correcto)
2. Elegir método de división (herramientas online para prototipos rápidos, TexturePacker para proyectos comerciales)
3. Importar en Cocos Creator (PNG o formato Atlas)
4. Crear Animation Clip (arrastrar frames, ajustar intervalo, previsualizar)
5. Controlar reproducción con script (bucle, cambio, transición)

Elección de herramientas: online para prototipos, TexturePacker para producción. Alertas: compatibilidad de versiones, orden de nombres, configuración de recorte, ajuste de intervalo de frames.

Tras estos pasos, la animación de tu personaje estará lista para correr en el juego.