Communitygithub.com

AHMADALIPARR/cuadros-de-animacion-para-juegos

Guía profunda para activos de ANIMACIÓN en juegos: ciclos de movimiento, keyframes de acción, secuencias de efectos y hojas de sprites de animación, construida alrededor de un pipeline basado en video.

¿Qué es cuadros-de-animacion-para-juegos?

Este skill es una guía doctrinal detallada para crear activos de animación para videojuegos utilizando un pipeline basado en video. En lugar de pedirle a un modelo de imágenes que imagine poses intermedias, el skill recomienda generar una animación base en video (con un fondo magenta sólido `#FF00FF`) y luego extraer fotogramas reales. Está diseñado para usarse en un sandbox de app-builder, donde la ejecución se realiza a través de los skills `video2dsprite` (para animaciones densas) y `generate2dsprite` (para sprites fijos y cuadrículas), no con comandos ffmpeg ad-hoc. El skill enfatiza la importancia de los bucles (loop), la continuidad del movimiento, la física creíble (como anticipación y seguimiento), y la prueba de bucle (flip test) para garantizar la calidad. También incluye leyes de movimiento que verificar y un flujo de trabajo predeterminado de 5 pasos (frame base, animar, cosechar/limpiar, seleccionar fotogramas, empaquetar). Es complementario a game-asset-core y se usa siempre que se genere algo que se mueva: ciclos de caminata/carrera, ataques, inactivos, efectos especiales, banderas, fuego, láminas de animación.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AHMADALIPARR/skill-inventory/tree/HEAD/skills/sovereign/opengrok/game-animation-frames

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Fotogramas de Animación — video primero

El generador de imágenes dibuja poses; el generador de VIDEO entiende el movimiento — alternancia de piernas, continuidad de arco, dinámicas de tela y fuego vienen gratis porque el video debe animarlos. Así que no le pidas al modelo de imágenes que imagine poses a medio movimiento: anima la base y cosecha fotogramas reales.

Ejecución en el app-builder (léase primero)

Este skill es doctrina (leyes de movimiento, control de bucle, cuándo usar video). En el sandbox del app-builder, no ejecutes una cosecha ffmpeg libre ni inventes un fondo #hex aleatorio.

PasoHaz esto
Sprites de producción / cuadrículas fijasgenerate2dsprite — láminas magenta sólido #FF00FF + scripts de croma
Locomoción más densa desde videovideo2dsprite — imagen base sobre #FF00FF → imagine_image_to_video → scripts del skill (ffmpeg + croma)
Fondo claveableSiempre #FF00FF al usar cualquiera de los pipelines (requerido para croma)
Este skillBucle / prueba de inversión / leyes de movimiento a continuación — aplicar después de ejecutar el pipeline

Abre .grok/skills/video2dsprite/SKILL.md o .grok/skills/generate2dsprite/SKILL.md y sigue sus flujos de trabajo para la generación y el postprocesado. Luego aplica las leyes y la prueba de inversión aquí antes de enviar los fotogramas al juego.

Pipeline predeterminado (intención)

  1. Fotograma base. Sujeto en pose neutral/inicial, palabras de estilo completas, vista lateral/apropiada para el juego, fondo #FF00FF sólido (croma key del app-builder). Se aplican los valores predeterminados de game-asset-core.
  2. Animar. imagine_image_to_image desde la base: un movimiento claro, en el lugar, cámara estática ("el caballero camina en el lugar, vista lateral, cámara bloqueada", 6s). Mantén la toma simple: un sujeto, un movimiento. Prefiere ejecutar esto a través de video2dsprite para que la cosecha + croma sean consistentes.
  3. Cosechar + limpiar. Usa los scripts de video2dsprite (no ffmpeg -i … fps=12 solo por tu cuenta). El relleno/despillado magenta vive allí; no reclaves con un #hex plano diferente a menos que abandones por completo el pipeline magenta.
  4. Seleccionar. Elige fotogramas que (a) capturen las fases distintas del movimiento y (b) HAGAN BUCLE — el final de la secuencia debe fluir de nuevo a su inicio. No fuerces un número: si el movimiento se lee mejor con 8, 10 o 12 fotogramas, entrega esa cantidad (más fotogramas = más suave en el motor). Para un ciclo, selecciona un período completo usando puntos de referencia del movimiento (contactos de pies, extremos de alas, picos de llama).
  5. Empaquetar. Entrega los fotogramas en orden de reproducción (nombres con ceros a la izquierda) y/o una lámina según las reglas de game-asset-core (celdas uniformes, sin divisores) — o las tiras/cuadrículas transparentes emitidas por video2dsprite / generate2dsprite. Indica los fps previstos.

Recurre a imagine_text_to_image fotograma por fotograma (aún sobre #FF00FF cuando postproceses con los scripts de sprites) solo cuando el video falle el movimiento (raro: poses muy estilizadas, keyframes dramáticos únicos) — y luego planifica las fases tú mismo y obedece las leyes a continuación. Prefiere generate2dsprite para cuadrículas de múltiples fotogramas de producción nítidas.

Leyes de movimiento (verificar contra estas, sea cual sea el pipeline)

  • Los ciclos hacen bucle; los andares alternantes pasan la mitad del período reflejados.
  • Continuidad: extremidades, accesorios, anatomía, efectos se mueven en trayectorias continuas — nada teletransporta, desaparece o se duplica entre fotogramas adyacentes.
  • La física se lee en las imágenes fijas: en el aire muestra aire, la anticipación comprime, el seguimiento sobrepasa; los efectos permanecen anclados a su origen a menos que la solicitud los mueva.
  • La energía coincide con lo pedido: inactivo/sutil significa fotogramas apenas diferentes.

Verificar — la prueba de inversión

Visualiza los fotogramas finales estrictamente en orden y narra el movimiento; comprueba el cierre del bucle explícitamente (último→primero). Una vacilación en tu narración es un fotograma fallido. El pipeline de video generalmente pasa esto en el primer intento — por eso es el predeterminado.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados