Learn how to optimize your Spine 2D animations, reduce file size, and improve performance
FPSPlusPremiumUIYouTubeanimationcon pérdidaconceptosconectoresconexionescontrolesdatosejemplosestadísticasexportflujo de trabajoflujosgráficasguideguíamemoriamétricasoptimizaciónplaybackpreciosprincipianterecorderrecordingrendimientoresultadossin pérdidasuscripcióntablatimelinetiposvideoviewervisorvídeo
Primeros pasos: Flujo de trabajo básico
principianteflujo de trabajoguía
Esta guía te ayudará a empezar rápidamente con el JSON Optimizer.
Cargar proyecto: Usa el InputNode para cargar tus archivos .json, .atlas y .png.
Elegir un preset (modo Plus): En modo Plus, usa el panel derecho para seleccionar uno de los presets integrados (p. ej., "Basic Fallback"). Esto construye automáticamente un grafo de optimización. En modo Free, crea un grafo manual mínimo: InputNode → QuantizerNode → OutputNode.
Ejecutar el grafo: Haz clic en el botón "Ejecutar grafo".
Comparar resultados: Cambia a la pestaña "Visor" para comparar visualmente las animaciones original y optimizada.
Revisar cambios: En las pestañas "Resultados" y "Estadísticas" encontrarás información detallada sobre qué claves se modificaron o eliminaron.
Tipos de sockets y flujo de datos
conectorestiposdatosconexiones
Este artículo explica los tipos de datos que usan los sockets en el grafo de nodos y qué se puede conectar con qué.
Regla rápida
La mayoría de los nodos de procesamiento operan sobre un Spine Payload. Los nodos relacionados con atlas operan sobre un Atlas Project o Sprites. Usa ValidatorNode cuando no estés seguro de qué espera un socket.
Tipos de socket
Spine Payload — representación del proyecto Spine apta para runtime, usada por la mayoría de nodos de procesamiento.
Atlas Project — metadatos del atlas + imágenes de páginas, usado por nodos de atlas.
Recomendación: Empieza siempre con optimizaciones sin pérdida. Usa métodos con pérdida solo cuando necesites reducir aún más el tamaño del archivo, y revisa siempre el resultado visualmente.
Cómo medir la eficiencia
guíamétricasestadísticas
Para entender la efectividad de tu optimización, presta atención a las siguientes métricas:
Tamaño del archivo: El tamaño final del archivo .json es el objetivo principal de la optimización.
Número de fotogramas clave: En la pestaña "Estadísticas", encontrarás tablas y gráficos que muestran cuántos fotogramas clave se eliminaron en cada animación.
Comparación visual: Usa siempre la pestaña "Visor" para comparar animaciones "antes" y "después". Asegúrate de que las optimizaciones con pérdida no introdujeron artefactos visuales inaceptables.
Informe en la tabla "Resultados": Aquí puedes examinar en detalle cada cambio específico realizado en tus datos.
Viewer: Panel de controles
visorcontrolesUI
La pestaña Visor superpone un panel de controles sobre el lienzo. Se divide en tres grupos:
Controles de animación
Animación — selecciona qué animación de Spine se reproduce.
Skin — selecciona qué skin se aplica.
Velocidad — multiplicador de velocidad de reproducción (0.1× → 3.0×).
Controles de vista
Restablecer vista — restaura la posición predeterminada de cámara/diseño.
Opciones de vista — desplazamientos numéricos para posicionar la vista de comparación: Espaciado X / Espaciado Y (distancia entre Original/Optimizado) y Desplazamiento X / Desplazamiento Y (desplazamiento global).
Controles de depuración
Modo de depuración — habilita superposiciones de depuración de renderizado (depende del soporte del runtime).
Habilitar física — alterna la simulación de física (si el esqueleto usa física).
Etiquetas — alterna la superposición de etiquetas.
Viewer: Panel de rendimiento
rendimientoFPSmemoriaUI
El panel Performance muestra métricas de runtime en tiempo real para el/los esqueleto(s) que se están reproduciendo.
Tiempo real
FPS — fotogramas por segundo medidos por el monitor.
Frame Time — tiempo por fotograma en milisegundos (más bajo es mejor).
FPS chart — últimas 120 muestras mostradas como barras.
Métricas del esqueleto
Visible Slots — cuántos slots fueron visibles en la última muestra.
Avg. Visible — promedio móvil de slots visibles (más estable que un solo fotograma).
Vertices — conteo actual de vértices usado para renderizar.
Bounds (px) — límites actuales del esqueleto (ancho×alto) en píxeles.
Avg. Bounds — promedio móvil de los límites.
Largest Texture — la página de atlas más grande (por dimensiones) detectada para el esqueleto.
Texture Memory — memoria de textura total estimada para páginas de atlas cargadas. Cuando está disponible, el panel también muestra un desglose por página (nombre de archivo, dimensiones y tamaño estimado).
Mejoras (cuando Optimized está disponible)
Slot Improvement — compara Avg. Visible entre Original y Optimized.
Memory Change — compara Texture Memory entre Original y Optimized.
Viewer: Línea de tiempo
viewertimelineanimationplaybackguide
El panel Timeline es un secuenciador de animaciones acoplable en la parte inferior del Visor. Permite organizar clips de animación en múltiples pistas, controlar la reproducción y previsualizar transiciones.
Pistas & Clips
Hasta 4 pistas de animación — cada pista corresponde a un trackIndex de Spine. Las pistas superiores se mezclan sobre las inferiores.
Añadir animación — haz clic en el botón + de cualquier pista para abrir el selector de animaciones (con filtro de búsqueda).
Arrastrar y redimensionar clips — arrastra el cuerpo del clip para moverlo a lo largo de la pista; arrastra los bordes izquierdo/derecho para cambiar el tiempo de inicio o la duración.
Eliminar clips — selecciona un clip y pulsa Delete o Backspace.
Detección de solapamiento — los clips solapados en la misma pista se resaltan en rojo.
Controles de reproducción
Reproducir / Pausa / Detener — controles de reproducción estándar.
Anterior / Siguiente — salta al inicio del clip anterior o siguiente.
Velocidad de animación — deslizador de 0,1× a 3,0×.
Auto-detener — la reproducción se detiene automáticamente al final de la línea de tiempo.
Mezcla de transiciones
Duración de mezcla global — establece el tiempo de fundido cruzado predeterminado entre clips consecutivos.
Overrides por transición — haz clic en la burbuja de transición entre dos clips para establecer una duración de mezcla personalizada. Puedes restablecer overrides individuales al valor global.
Búsqueda & Scrubbing
Cabezal de reproducción — arrastra el control en la regla de tiempo o haz clic en la regla para buscar.
Vista previa del tiempo del cursor — al pasar el ratón sobre el área de pistas se muestra el tiempo bajo el cursor.
Web Worker — la búsqueda y el cálculo de eventos se delegan a un worker en segundo plano para un rendimiento fluido.
Reproducción con físicas
Alterna las físicas entre Update (constraints activos) y None (desactivados).
Durante la búsqueda, el tiempo del esqueleto avanza para asentar correctamente los constraints de física.
Soporte multi-esqueleto
Selector de par objetivo — cada pista puede apuntar a todos los pares (🌐 Todos los pares) o a un esqueleto específico.
Posición y escala por esqueleto — entradas de desplazamiento X/Y y escala para esqueletos individuales.
Orden de dibujo — entrada numérica para controlar la prioridad de la capa de renderizado.
Casillas de selección múltiple para todos los skins definidos en el esqueleto cargado.
Ajustes de vista
Espaciado X / Y — distancia entre pares de esqueletos.
Desplazamiento X / Y — desplazamiento global del viewport.
Selector PMA — modo alfa premultiplicado (Spine 3.x) o modo alfa del atlas (Spine 4.x: auto / pma / bleed / none).
Etiquetas de esqueleto — alternar superposición de etiquetas.
Viewer: Grabador
viewerrecorderrecordingexportvideoguide
El Recorder captura animaciones Spine del visor como vídeo, imágenes animadas o secuencias de imágenes.
Modos de grabación
⚡ Grabación rápida — captura en tiempo real usando MediaRecorder + captureStream(). Produce solo salida WebM. Rápido pero limitado a la tasa de fotogramas en tiempo real.
🎬 HQ Export — renderizado offline fotograma a fotograma usando WebCodecs VideoEncoder + readPixels(). Soporta todos los formatos y produce salida con precisión de píxel.
Formatos de salida
Vídeo: WebM, MP4, AVI, MOV
Imagen animada: GIF, Animated PNG (APNG)
Secuencia de imágenes: PNG Sequence, WebP Sequence
Codecs (HQ Export)
VP8, VP9, H.264 (AVC), AV1, ProRes — los codecs disponibles se detectan automáticamente según el soporte del navegador.
Calidad
Presets: Baja (~1 Mbps), Media (~3 Mbps), Alta (~5 Mbps), Sin pérdida (~20 Mbps).
Bitrate personalizado — especificar en kbps para control fino.
Temporizado
FPS: 24, 30, 60 o personalizado (1–120 fps).
Calentamiento — segundos para el asentamiento de físicas/constraints antes de iniciar la grabación.
Pausa después — mantener el último fotograma durante un tiempo determinado.
Incluir último fotograma — interruptor.
Viewport & Recorte
Activar/desactivar recorte — alternar región de recorte.
Rectángulo de recorte — X, Y, Ancho, Alto en coordenadas del mundo Spine.
Ajustar al par — ajustar automáticamente el recorte a un par de esqueletos con padding configurable.
Superposición de recorte interactiva — arrastra esquinas/bordes directamente en el viewport.
Resolución
Modo de escala — deslizador de porcentaje (10%–400%).
Modo fijo — dimensiones explícitas en píxeles (hasta 4096px).
La resolución de salida calculada se muestra en tiempo real.
Opciones de renderizado
Renderizar bones — incluir superposición de debug de bones.
Renderizar imágenes — incluir imágenes de attachment.
Renderizar otros — bounding boxes, paths.
MSAA — Ninguno / 2× / 4× anti-aliasing.
Suavizado — niveles 0–8 con elección de algoritmo (Bicubic / Bilinear).
Fondo
Transparente — desactivado automáticamente para formatos sin alfa (p. ej., GIF, JPEG).
Color sólido — selector de color personalizado.
Tablero de ajedrez — indicador visual de transparencia.
Alternar: información de pista, tiempo, número de fotograma, FPS, etiquetas de esqueleto.
Texto personalizado — texto de marca de agua.
Posición — 4 esquinas (arriba-izquierda, arriba-derecha, abajo-izquierda, abajo-derecha).
Tamaño de fuente — 8–64px, más selector de color de texto.
Repetición & Multi-esqueleto
Número de repeticiones — 1–100 iteraciones de bucle.
Par objetivo — grabar un esqueleto específico o todos.
Modo de esqueletos — Combinado (un solo archivo) / Archivos separados (un archivo por esqueleto).
Plantilla de nombre de archivo
Cadena de plantilla con variables: {project}, {animation}, {W}, {H}, {fps}. Se muestra una vista previa en tiempo real del nombre de archivo resuelto.
Integración con Timeline
El rango de grabación aparece como un clip punteado rojo/naranja en la línea de tiempo. Arrastra los bordes para redimensionar el rango, arrastra el cuerpo para reposicionar, o usa el botón de ajustes (⚙️) para abrir la configuración completa de grabación.
Pestaña Resultados
resultadostablaoptimización
La pestaña Resultados muestra la salida detallada de optimización.
Tabla de resultados — vista de una fila por cambio de los resultados de optimización JSON (p. ej., qué animación/hueso/propiedad/fotograma clave se modificó o eliminó).
Comparación de sprite/atlas — cuando se usa optimización de texturas, esta sección compara tamaños de sprites y resultados de empaquetado.
Consejo: usa la vista de Resultados para responder: ¿qué cambió exactamente?
Pestaña Estadísticas
estadísticasgráficasmétricas
La pestaña Estadísticas resume los resultados de optimización como gráficas y métricas agregadas.
Gráfico de optimización — visualiza el impacto de la optimización a lo largo del conjunto de datos (cuando las optimizaciones JSON produjeron cambios).
Tabla de métricas — números clave como tamaños original/nuevo y porcentaje de reducción.
Estadísticas de empaquetado de texturas — si se usó repacking de atlas: páginas, área total/usada, eficiencia y un desglose por página.
Usa esta pestaña para responder: ¿cuánto mejoramos en total?
Ejemplos de pipelines (Vídeo)
vídeoejemplosflujosYouTube
A continuación se muestran flujos completos y reales de la lista oficial de YouTube.
Spine2D Experiments 1: Optimización de curvas con el algoritmo RDP — demostración básica de optimización Spine 2D: el algoritmo Ramer–Douglas–Peucker (RDP) elimina datos redundantes de curvas y fotogramas clave para reducir el JSON. RDP puede eliminar fotogramas clave importantes, así que revisa siempre las animaciones y excluye huesos/slots sensibles con nodos de filtro antes del nodo RDP. Ver en YouTube
Spine2D Experiments 2: Optimización de curvas con el algoritmo de cuantización — la cuantización es el optimizador de curvas más seguro: redondear valores (a menudo a 1 decimal) reduce el tamaño de inmediato. Ejemplo: [0.115,14.5,0.222,-27.78] → [0.1,14.5,0.2,-27.8]. Usa el nodo Quantizer como último paso antes del nodo Output para fijar la optimización; el video muestra antes/después con cambios visuales casi imperceptibles. Ver en YouTube
Spine2D Experiments 3: Reconstrucción de curvas con algoritmos Spline y Refit — Spline es sin pérdida para segmentos rectos (elimina fotogramas clave intermedios redundantes), mientras que Refit es con pérdida pero muy potente: reconstruye secciones complejas como una sola curva Bézier. Estos algoritmos son ideales después de hornear físicas y limpiar con el nodo Schneider. Nota: iteraciones de Refit por encima de 100 pueden tardar minutos en encontrar la mejor curva. El video muestra cómo funcionan ambos métodos y el % de optimización obtenido. Ver en YouTube
Spine2D Experiments 4: Eliminación de datos redundantes con Visibilidad de adjuntos y nodos de limpieza — optimización estructural con los nodos Visibilidad de adjuntos y Limpieza. Visibilidad de adjuntos desactiva adjuntos cuando el alfa llega a 0 y los restaura al reaparecer, reduciendo llamadas de dibujo y fotogramas clave redundantes. Limpieza elimina redundancias lógicas: pistas de color/alfa no usadas, fotogramas clave de rotación IK totalmente controladas por restricciones y fotogramas clave de restricción de trayectoria. El video muestra cómo estas optimizaciones lógicas difieren de la simplificación de curvas. Ver en YouTube
Spine2D Experiments 5: Creación de flujos no lineales (filtros y nodo Merge) — optimización no lineal: divide el flujo con filtros (Animación, Hueso, Slot, Parámetro o Skin), ejecuta distintos algoritmos en ramas paralelas (por ejemplo, compresión agresiva para huesos del cuerpo manteniendo la animación facial sin pérdida) y combina las ramas con el nodo Merge en un solo esqueleto. Este flujo va más allá de Input → Optimizar → Output y permite optimizar solo lo necesario. Ver en YouTube
Spine2D Experiments 6: Reempaquetado de texturas y escalado selectivo con nodos personalizados — flujos avanzados de optimización de texturas: los nodos Atlas Unpacker/Repacker permiten desempaquetar, redimensionar/comprimir y reempaquetar atlases dentro de un solo grafo, más rápido que el flujo estándar de Spine. Con el flujo no lineal puedes dividir recursos, mantener texturas de personaje al 100% y escalar otras al 25%, luego fusionar todo en un atlas compartido. Los nodos Visor de atlas/recursos ofrecen inspección visual y filtrado en cada etapa. Esto facilita definir objetivos de tamaño, procesar selectivamente y recombinar como plantilla reutilizable. Ver en YouTube
Spine2D Experiments 7: Redimensionado instantáneo de esqueleto con un nodo Scale — flujo de optimización de extremo a extremo más escalado de esqueleto. El nodo Scale sustituye el flujo tedioso de Spine (exportar/importar, repack/unpack, corregir rutas) por un solo paso en el grafo: fija el tamaño objetivo, previsualiza al instante en el visor e itera en tiempo real. El video une optimización de curvas/fotogramas clave, procesamiento de recursos y redimensionado del esqueleto en un solo flujo. Ver en YouTube
Spine2D Experiments 8: Resumen de nodos de la beta pública — recorrido por todos los nodos disponibles en la beta pública y cómo re‑polish conecta las necesidades de animadores y desarrolladores. Incluye limpieza de fotogramas clave redundantes, simplificación de Bézier a lineal, redondeo para reducir tamaño, eliminación de adjuntos invisibles, limpieza de propiedades sin uso, detección de caracteres no ingleses y atlas desempaquetar/filtrar/escalar/reempaquetar. El Visor dual valida con comparación visual y FPS lado a lado. La beta pública está activa en re-polish.com. Ver en YouTube
Spine2D Experiments 9: Horneado de restricciones de física en keyframes — en este video muestro mis últimos experimentos con el horneado de restricciones de física en keyframes estándar. El nuevo algoritmo de bake garantiza: bucles perfectos (cero jitter o saltos entre el inicio y el final), tamaño de archivo optimizado (la limpieza automática de curvas mantiene el tamaño del JSON cerca del original) y compatibilidad hacia atrás (las keys horneadas permiten usar animaciones de física de Spine 4.2 en Spine 4.1 o incluso 4.0). Ver en YouTube
Nodes
Input
Importa archivos de proyecto de Spine, entradas solo JSON, recursos de demostración y paquetes ZIP al grafo.
Propósito: Este es el punto de entrada principal para la mayoría de los flujos de trabajo. Lee JSON, atlas y texturas, y los normaliza en datos internos que los nodos posteriores pueden procesar.
Modos compatibles:
1. Proyecto completo: JSON + atlas + texturas
2. Solo JSON: procesa datos de esqueleto/animación sin atlas
3. Paquete ZIP: un zip empaquetado que contiene un proyecto completo
4. Recursos de demostración: datos de muestra integrados para pruebas rápidas
Salidas principales:
- **payload_out**: datos normalizados para los nodos de optimización
- **original_json_out**: JSON de origen para comparación o reconstrucción
- **atlas_project_out**: proyecto de atlas analizado cuando se proporcionan texturas
Picture Input
Añade imágenes PNG/JPEG independientes al viewport para crear vistas previas y tomas de presentación más limpias.
Propósito: Usa este nodo para colocar imágenes directamente en el viewport como capas de presentación o elementos visuales auxiliares. Resulta útil cuando quieres decorar una escena, añadir gráficos de apoyo y hacer que las vistas previas del proyecto se vean más pulidas antes de grabar vídeos o demos.
Flujo de trabajo: Carga una imagen y luego utiliza las herramientas del viewport para escalarla, moverla y ajustar su z-index para que quede correctamente integrada en la composición. Así puedes montar capturas de showcase atractivas sin tocar los datos principales del proyecto Spine.
Este nodo es autónomo y no expone graph sockets.
Output
Reúne el resultado final y permite descargar los datos optimizados como archivos separados, conjuntos de archivos o archivos comprimidos.
Propósito: Actúa como centro de exportación para JSON optimizado, atlas, texturas y sprites. Puede procesar tanto un único conjunto de JSON/atlas/texturas como varios conjuntos de archivos. Si solo recibe sprites, también puede producir únicamente imágenes sin reconstruir un proyecto Spine completo.
Opciones de exportación:
- Descargar archivos por separado o como un único archivo comprimido
- Descargar resultados packed o un archivo con los archivos unpacked
- Exportar JSON en formato comprimido o en formato legible
- Exportar un proyecto Spine completo o solo resultados de sprites/imágenes
Encadenamiento: OutputNode no tiene por qué ser el final absoluto del gráfico. Puedes pasar sus salidas a otra etapa del pipeline y ejecutar los mismos archivos en rondas adicionales de optimización. En la práctica, la optimización de keys y curves se probó hasta en 3 iteraciones consecutivas.
Salidas principales:
- **reconstructed_json_out**: Spine JSON reconstruido
- **original_json_passthrough_out**: JSON original en passthrough
- **payload_out**: payload para seguir encadenando
- **changes**: cambios de optimización recopilados
- **atlas_assets**: recursos de atlas listos para exportar
RDP
Simplifica curvas de animación (RDP).
Propósito: Reduce el número de keyframes en segmentos de animación lineales o casi lineales eliminando puntos que están en una línea recta entre otros dos.
Regla de Oro: Desactivada por defecto. Protege curvas con forma marcada (área/curvatura) para que no se aplanen a lineales. Desactívala solo para una compresión más agresiva tras revisión visual.
Claves de socket: payload_in, payload_out, changes
Spline
Optimización de curvas con splines.
Propósito: Ajuste suave de curvas manteniendo la calidad visual.
Claves de socket: payload_in, payload_out, changes
Refit
Refit de curvas (Bezier) para reducir keyframes.
Propósito: Ajusta menos curvas manteniéndose dentro de una tolerancia.
Claves de socket: payload_in, payload_out, changes
Quantizer
Reduce la precisión de valores numéricos en keyframes y curvas.
Propósito: Método simple pero efectivo para reducir el tamaño del archivo redondeando números a un número especificado de decimales.
Uso: Puede aplicarse a casi todos los datos de animación. Se vuelve más efectivo con mayor número de keyframes.
Precaución: Cuantización demasiado agresiva (baja precisión) puede causar temblores o artefactos visuales en animaciones.
Cleanup
Realiza varias tareas de limpieza para eliminar datos de animación redundantes o innecesarios.
Propósito: Herramienta especializada para eliminar tipos específicos de datos redundantes que otros optimizadores podrían pasar por alto.
Uso: Conecta tu payload a 'payload_in' y toma el resultado desde 'payload_out'. Si quieres un reporte por cambio, usa también 'changes'.
Claves de socket:
- Entradas: payload_in
- Salidas: payload_out, changes
Limpiezas soportadas actualmente:
1. **Remove Unused Color/Alpha Tracks**: Elimina timelines de color/alpha de slots que nunca son visibles durante la animación.
2. **Remove Redundant IK Rotations**: Elimina keyframes de rotación de huesos controlados completamente por una restricción IK con mix al 100%.
3. **Remove Path Constraint Keys**: Elimina keyframes de rotate/translate de huesos controlados completamente por una restricción de trayectoria (mix al 100%).
4. **Sanitize Non-English Characters**: Reemplaza caracteres no ingleses en nombres/identificadores para evitar problemas en herramientas posteriores.
Scale
Escala todos los valores numéricos en keyframes de animación por un factor especificado.
Propósito: Escala uniformemente los datos de animación, útil para redimensionar proporcionalmente el esqueleto o ajustar la intensidad de la animación.
Uso: Conecta al payload y establece el factor de escala. Valores superiores a 1.0 agrandan, inferiores a 1.0 reducen.
Parámetros:
- **Scale Factor**: Multiplicador aplicado a todos los valores de posición y tamaño.
- **Include Rotations**: Si también escalar valores de rotación (normalmente deshabilitado).
Casos de uso:
- Redimensionar animaciones importadas para coincidir con nuevas dimensiones del esqueleto
- Crear variantes exageradas o sutiles de animaciones
- Escalado por lotes de múltiples animaciones para diferentes tamaños de personajes
Schneider
Ajusta curvas de Bézier suaves a keyframes de animación usando el algoritmo de ajuste de curvas de Schneider.
Propósito: Ajuste de curvas avanzado que produce curvas de Bézier de aspecto natural a partir de secuencias densas de keyframes.
Disponibilidad: **Nodo solo Plus**.
Cómo funciona: El algoritmo de Schneider analiza las posiciones y tangentes de keyframes para generar puntos de control de Bézier óptimos que coinciden estrechamente con el movimiento original.
Parámetros:
- **Error Tolerance**: Desviación máxima permitida de los keyframes originales. Menor = más preciso, mayor = curvas más suaves.
- **Corner Angle**: Ángulo umbral (grados) en el cual dividir la curva en segmentos.
Mejor para:
- Animaciones dibujadas a mano o importadas con muchos keyframes
- Convertir interpolación lineal a curvas de Bézier suaves
- Reducir número de keyframes manteniendo calidad de curva
Nota: Más intensivo computacionalmente que algoritmos más simples como RDP, pero produce calidad de curva superior.
Physics Constraint Bake
Bake Physics Constraints to Keys: convierte el movimiento de PhysicsConstraint en keyframes de rotación/traslación y elimina timelines de física.
Propósito: Convierte la simulación de física en tiempo de ejecución en keyframes explícitos para que las animaciones sean deterministas y editables sin PhysicsConstraints. Después del bake, se eliminan las PhysicsConstraints y las timelines de física del payload.
Disponibilidad: **Nodo solo Plus**.
Entradas/Salidas:
- **payload_in** → **payload_out** (bakeado)
- **changes** (lista opcional de cambios)
Controles:
- **Sample FPS**: Frecuencia de muestreo de la simulación.
- **Bake Rotation**: Escribe keyframes de rotación.
- **Bake Translation**: Escribe keyframes de traslación.
- **Bake Translation (Children)**: Aplica el bake de traslación a huesos hijos que dependen del movimiento físico.
Notas:
- Requiere el Spine JSON original para reconstruir los datos de simulación.
- Úsalo cuando quieras eliminar PhysicsConstraints pero conservar el movimiento.
Attachment Visibility
Optimiza el renderizado estableciendo el attachment de un slot a null cuando su alpha es cero.
Propósito: Previene que el motor del juego tenga que procesar o renderizar attachments invisibles.
Uso: Analiza tracks de alpha/color y añade o modifica automáticamente keyframes en el track 'attachment' correspondiente.
Parámetros:
- **Alpha Threshold**: Valor alpha por debajo del cual un attachment se considera invisible.
- **Auto Restore**: Si está habilitado, el nodo restaurará automáticamente el último attachment visible cuando el valor alpha supere el umbral.
Payload Merger
Fusiona múltiples payloads de animación procesados de vuelta a un único payload unificado.
Propósito: Esencial para pipelines de procesamiento paralelo donde diferentes animaciones o grupos de huesos se optimizan por separado y necesitan recombinarse.
Estrategia de fusión:
1. **Entrada base**: Proporciona la estructura del esqueleto (huesos, slots, skins, etc.)
2. **Entradas override**: Proporcionan tracks procesados que reemplazan tracks base
3. **Última escritura gana**: Cuando múltiples overrides proporcionan el mismo track, el último tiene prioridad
Detección de conflictos:
- Conflictos entre entradas override se detectan y reportan
- Reemplazo Base → Override es comportamiento normal (no es conflicto)
- Toast de advertencia mostrado cuando ocurren conflictos de tracks
Ejemplo de pipeline:
```
Input → AnimFilter('run') → Cleanup ───────┐
→ AnimFilter('idle') → Quantizer ────┤
→ (base) ────────────────────────────→ Merger → Output
```
Casos de uso:
- Diferentes optimizadores para diferentes animaciones
- Procesamiento separado de huesos/slots con recombinación
- Pruebas A/B de diferentes estrategias de optimización
Animation Viewer
Herramienta visual para inspeccionar y comparar curvas de animación antes y después de la optimización.
Propósito: Proporciona una representación gráfica de keyframes y curvas para el track seleccionado.
Uso: Al conectar ambas entradas 'payload_before' y 'payload_after', superpondrá las curvas originales y optimizadas, facilitando la visualización del impacto de tus optimizaciones.
Animation Filter
Filtra tracks de animación según el nombre de la animación (ej. 'run', 'idle').
Propósito: Útil para aplicar diferentes estrategias de optimización a diferentes animaciones.
Uso: Por ejemplo, puedes aplicar optimizaciones agresivas con pérdida (como DCT) a animaciones de personajes de fondo mientras usas optimizaciones sin pérdida (como Spline) para acciones del personaje principal.
Asset Filter
Filtra los recursos del atlas por nombre, funciona en dos modos: antes de desempaquetar (filtra el texto del atlas) o después de desempaquetar (filtra sprites).
Propósito: Controla qué recursos se incluyen en el flujo de trabajo - qué recursos desempaquetar del atlas o qué sprites desempaquetados incluir en el reempaquetado.
Modos:
1. MODO PRE-DESEMPAQUETADO (antes de AtlasUnpacker):
- Entrada: atlas_in (atlas_project)
- Salida: atlas_out (atlas_project filtrado)
- Flujo: InputNode → AssetFilter → AtlasUnpacker
- Caso de uso: Filtrar qué recursos desempaquetar del atlas (ahorra tiempo de procesamiento)
2. MODO POST-DESEMPAQUETADO (después de AtlasUnpacker):
- Entrada: sprites_in (sprites)
- Salida: sprites_out (sprites filtrados)
- Flujo: AtlasUnpacker → AssetFilter → AtlasRepacker
- Caso de uso: Filtrar qué sprites desempaquetados incluir en el atlas final
Comportamiento de la UI:
- En modo PRE-DESEMPAQUETADO: Analiza el texto del atlas para descubrir nombres de recursos
- En modo POST-DESEMPAQUETADO: Descubre nombres de recursos del array de sprites
- Interruptor 'Permitir todo': Cuando está marcado, pasa todos los recursos (lista mostrada pero deshabilitada)
- Casillas de verificación: Seleccionar recursos específicos para incluir (cuando 'Permitir todo' está desmarcado)
Ejemplos:
- Pre-desempaquetado: Seleccionar solo recursos 'char_*' para desempaquetar solo sprites de personaje
- Post-desempaquetado: Excluir sprites 'background_*' del atlas final reempaquetado
- Crear atlas solo de armas seleccionando el patrón 'weapon_*'
Bone Filter
Filtra tracks de animación de huesos según el nombre del hueso.
Propósito: Permite apuntar o excluir huesos específicos del proceso de optimización.
Uso: Podrías querer excluir huesos sensibles, como los usados para expresiones faciales, de optimización agresiva para preservar cada detalle mientras optimizas fuertemente huesos menos importantes.
Skin Filter
Filtra datos de animación y recursos basados en nombres de skin.
Propósito: Procesar solo skins específicos de un proyecto Spine multi-skin.
Uso: Cuando un proyecto Spine tiene múltiples skins (ej. 'default', 'armor', 'casual'), este nodo te permite filtrar qué skins incluir en el procesamiento.
Parámetros:
- **Skins List**: Casillas de verificación para cada skin disponible
- **Allow All**: Interruptor para incluir todos los skins (por defecto)
Casos de uso:
- Crear atlas separado por skin
- Aplicar diferente optimización a diferentes skins
- Excluir skins raramente usados del build optimizado
Nota: Los skins comparten la estructura del esqueleto pero pueden tener diferentes attachments.
Slot Filter
Filtra tracks de animación de slot según el nombre del slot.
Propósito: Útil para apuntar o excluir slots específicos que pueden tener requisitos particulares de temporización o visibilidad.
Uso: Puedes usarlo para excluir slots de armas o efectos que se cambian por código de ser afectados por optimizaciones de visibilidad de attachments.
Parameter Filter
Filtra tracks de animación según su tipo de propiedad (ej. rotation, scale, color).
Propósito: Permite aplicar optimizaciones posteriores solo a tipos específicos de datos de animación.
Uso: Coloca este nodo antes de un optimizador para limitar su alcance. Por ejemplo, puedes aplicar optimización RDP solo a tracks de 'translation' y 'scale'.
Atlas Unpacker
Extrae sprites individuales de un atlas de textura Spine.
Propósito: Descompone un archivo atlas en sus sprites componentes, permitiendo análisis o reempaquetado individual.
Uso: Conecte la salida 'atlas_project' de InputNode a la entrada 'atlas_project_in' de este nodo. La salida puede enviarse a AssetViewer para inspección o a AtlasRepacker para optimización.
⭐ Recorte de malla: Conecte la salida 'Original JSON' de InputNode a la entrada 'Skeleton JSON' para habilitar el recorte automático de sprites a los límites de su malla (en lugar de límites rectangulares). Esto reduce significativamente el uso de memoria de textura para sprites con adjuntos de malla al eliminar píxeles transparentes fuera del casco de la malla.
Salidas:
- **sprites_out**: Matriz estandarizada de sprites (para visor/repacker)
- **sprites_data_out**: Imágenes/metadatos de sprites extraídos (paquete estructurado)
- **atlas_out**: Paso directo del proyecto de atlas
Claves del socket: atlas_project, atlas_project_in, skeleton_json_in, sprites_out, sprites_data_out, atlas_out
Atlas Repacker
Reempaqueta sprites individuales en uno o más nuevos atlas de texturas optimizados.
Propósito: Optimiza la memoria de texturas y potencialmente reduce las llamadas de dibujo creando hojas de sprites eficientes.
Uso: Acepta 'sprites_data' (normalmente de AtlasUnpacker) y genera un nuevo diseño de atlas.
Parámetros:
- **Max Texture Size**: Ancho/alto máximo de las páginas de atlas de salida.
- **Padding**: Distancia en píxeles entre cada sprite.
- **Scale**: Redimensiona todos los sprites antes del empaquetado.
- **Power of Two**: Fuerza las dimensiones del atlas de salida a ser potencias de dos (ej. 1024, 2048), requerido por algunas plataformas.
- **Allow Rotation**: Permite rotar sprites 90 grados para mejor eficiencia de empaquetado.
Atlas Viewer
Herramienta ligera de visualización y análisis de atlas para inspeccionar la estructura del atlas antes de desempaquetar.
Propósito: Proporciona una forma rápida de previsualizar páginas y regiones del atlas sin realizar el desempaquetado pesado. Ayuda a validar la estructura del atlas e identificar regiones sin uso.
Uso: Conecta la salida 'atlas_project' de InputNode a la entrada 'atlas'. De forma opcional conecta 'original_json_out' a la entrada 'json' para analizar el uso de regiones.
Funciones:
- Vista previa visual de páginas de atlas con límites de región
- Resaltado de regiones: Verde = usado, Rojo = sin uso en el esqueleto
- Controles de navegación de páginas
- Estadísticas que muestran regiones totales y sin uso
Casos de uso:
- Validación rápida del atlas antes de la optimización
- Identificar peso muerto (regiones sin uso)
- Depurar problemas de empaquetado de atlas
- Comprender la estructura de recursos
Claves del socket: atlas_project, atlas_in, atlas, json
Atlas Merger
Combina múltiples fuentes de atlas en un único atlas unificado.
Propósito: Fusionar múltiples proyectos de atlas en uno.
Entrada:
- **atlas_inputs**: Array multi-entrada de proyectos de atlas
Salidas:
- **atlas_out**: Proyecto de atlas fusionado
- **merged_out**: Salida fusionada heredada
- **merged_atlas_out**: Salida fusionada heredada
Casos de uso:
- Combinar atlas de personaje con atlas de armas
- Fusionar sprites base con contenido DLC
- Recombinar después de procesamiento de atlas paralelo
Pipeline típico:
```
InputA → Unpacker → Repacker ─┐
├→ Atlas Merger → Unpacker → Repacker → Output
InputB → Unpacker → Repacker ─┘
```
Antes del Repacker, los datos son sprites individuales; después del Repacker se convierten en un proyecto de atlas. Atlas Merger combina los proyectos de atlas, y un paso final Unpacker → Repacker reempaqueta todo más ajustadamente en un único atlas.
Asset Viewer
Muestra sprites individuales de un atlas desempaquetado.
Propósito: Herramienta de depuración visual para manipulación de atlas.
Uso: Acepta 'sprites_data' del nodo Atlas Unpacker y te permite visualizar cada imagen extraída, examinar sus propiedades (dimensiones, rotación, etc.), y verificar la exactitud visual después del desempaquetado.
