concept-to-pixel-assets

Concept art → activos pixel-art de escenas, bucles y paquetes de personajes

Este skill captura un flujo de trabajo de producción perfeccionado a lo largo de muchas rondas de revisión con un equipo de juego. Los scripts se encargan de las partes mecánicas. Las reglas a continuación importan más: son lo que los revisores pedían constantemente, así que síguelas por defecto y solo incumple una cuando el usuario te lo pida.

Dos vías comparten un mismo conjunto de herramientas (scripts/pixkit, además de las interfaces de línea de comandos en scripts/):

Vía	Entrada	Salida
Escena (fondo / CG)	1 imagen conceptual por toma	imagen fija nativa + copia exacta 3×, bucle sin costuras opcional de 48 fotogramas, capas de paralaje opcionales, PDF de revisión, README
Personaje	1 concepto frontal del personaje	sprite frontal 1x, 8–13 expresiones, clips Idle/Talk por expresión, transiciones To_/From_, asentimiento (Nod/Nod_Slow/HeadShake) + clips personalizados (one-shots), mapas de normales, hojas + json, vistas previas, scripts de Unity, README

Configuración: pip install -r requirements.txt (numpy, scipy, scikit-image, opencv-python-headless, Pillow, reportlab), más ffmpeg para los vídeos de revisión. Ejecuta python scripts/demo/run_demo.py /tmp/demo una vez para confirmar que todo funciona (usa solo arte sintético).

0. Antes de empezar

1. Encuentra las convenciones existentes del proyecto y reutilízalas. Busca paquetes anteriores (READMEs, manifiestos, sprites). Un nuevo personaje debe compartir el lienzo, la línea de suelo, los píxeles por unidad, el color de contorno y la escala de altura del reparto. Un nuevo fondo debe compartir el tamaño nativo, el tamaño de la paleta, la gradación y la viñeta. La consistencia entre el conjunto importa más que cualquier activo individual que se vea bien por sí solo. Si aún no existe nada, propón los valores predeterminados a continuación y dilo.
2. Fija el alcance solo cuando sea genuinamente abierto. Para un personaje, pregunta si hacer solo el conjunto frontal o también lateral / trasero / caminar. Para una escena, pregunta si debe animarse si la solicitud no es clara (algunas tomas deben permanecer estáticas). De lo contrario, empieza a trabajar; no pidas permiso para los pasos obvios.
3. Mantén el arte del usuario en privado. Entrega los archivos directamente (zip + imágenes de vista previa clave). No publiques su arte ni los sprites derivados en páginas públicas a menos que ellos lo pidan.

Valores predeterminados (cámbialos para que coincidan con el proyecto):

	Escena	Personaje
Tamaño	640×360 nativo; 1920×1080 = copia exacta 3× al vecino más cercano	Lienzo de 96×160, línea de suelo y=155, pies centrados en x=48
Colores	24 por imagen (paleta bloqueada)	Rampa de pocos colores por material, aproximadamente 10–30 para todo el paquete
Líneas	del arte	Contorno de 1 px, un color de contorno para todo el reparto
Movimiento	48 fotogramas, 12 fps, 4 s, sin costuras	Duraciones por fotograma en ms (compatible con cuadrícula de 60 fps)
Unity	Filtro de punto, sin compresión, tamaño máximo 4096, PPU 32	Lo mismo; pivote (0.5, 0.025)

1. Reglas de la casa

Cada regla proviene de una corrección que hizo un revisor. No son cuestiones de gusto.

• Densidad de píxeles 1x. Un píxel de arte equivale a un píxel de juego, por lo que nunca dupliques la densidad de detalle. Las escenas se construyen a tamaño nativo y se escalan solo con números enteros.
• Paleta bloqueada en todo. Los fotogramas de animación solo pueden usar los colores de la imagen fija. Cada efecto en loopfx trabaja sobre índices de paleta, por lo que no pueden aparecer colores nuevos.
• El fotograma 0 es la imagen fija, y los bucles no tienen costuras. Cada movimiento es una función de fase con ciclos de números enteros. Entrega el fotograma 0 del bucle como imagen fija (*_STILL_frame0.png) para que ambos puedan intercambiarse sin un salto.
• Los ojos solo parpadean. Sin miradas, movimientos oculares ni mirar alrededor a menos que el usuario pida una mirada específica. Cuando lo haga, haz solo esa mirada y nada más (un ejemplo de solicitud fue "mirar hacia abajo durante 1 segundo").
• El cabello se mueve solo cuando algo lo mueve físicamente: la cabeza asiente, el cuerpo da un paso o gira. Sin ráfagas de viento ni aleteo al respirar, porque una sacudida de 1 píxel en cada respiración se percibe como un fallo técnico.
• Las cosas rígidas nunca se bambolean. Carreteras, barreras, postes, muelles, rocas, muebles y el interior de los coches permanecen bloqueados por píxeles en cada fotograma (máscaras static). Mantén las ondas del agua a 2–3 píxeles de distancia de las orillas, postes y juncos.
• Sin parpadeo de un solo píxel. Un píxel solitario que parpadea se percibe como un píxel muerto. El polvo se desplaza, no titila. Los destellos permanecen escasos.
• Mueve bloques enteros por píxeles enteros. La respiración levanta todo lo que está por encima de la fila del pecho en 1 píxel. Un asentimiento mueve el bloque de la cabeza en 1 píxel. Nunca desplaces filas de forma independiente; eso rompe los contornos ("撕裂").
• Intercambia expresiones dentro de un parpadeo. El rostro cambia mientras los ojos están cerrados. Cada clip de una sola toma (one-shot) comienza en un fotograma Idle 0 y termina exactamente en su fotograma Idle 0 objetivo.
• Corrige lo que la IA hizo mal y deja la historia en paz. Elimina los artefactos de la IA: superficies moteadas, pseudo-texto, manchas informes, manos faltantes, luz imposible, decoraciones en objetos que no las tendrían. No añadas ni muevas contenido relevante para la historia (personajes, pistas, escritura) por tu cuenta. Enumera esos casos bajo "necesita confirmación".
• Misma cámara, mismos píxeles. Cuando dos tomas comparten una cámara o una ubicación, reutiliza los píxeles establecidos. Eso se aplica a una habitación, el interior de un coche, la temporización del parpadeo de una lámpara y una paleta. Los cortes entre ellas no deben saltar.
• Respeta "no animar X". Cuando el usuario diga solo imágenes fijas, o que no se mueva algo, bloquéalo y no cambies nada más.

2. Vía de escenas

Lee references/scene-pipeline.md antes de la primera escena. Lee references/scene-loops.md antes de animar, y su sección de paralaje antes de superponer capas.

1. Pixeliza en dos etapas, para que las correcciones manuales puedan hacerse en medio.

   python scripts/scene_to_pixel.py concept.png OUT --name BG02 [--smooth 8,16] [--keep x0,y0,x1,y1]
   # -> OUT/BG02_stylized.png (sin gradación) + OUT/BG02_compare.png
   

   stylize hace la "simplificación dibujada a mano":

   • reduce a aproximadamente 22 colores tomados de la fuente;
   • aplana cada objeto a un máximo de 3 tonos;
   • absorbe motas;
   • protege las pequeñas características brillantes (lámparas, ventanas) y las líneas finas (rieles, marcas viales).

   Usa --keep para los objetos cuyo contorno exacto condiciona la lógica de la escena. Usa --smooth para fuentes granuladas, GIF o JPEG. La etapa 1 también escribe BG02_native.png (la fuente redimensionada, para luces y máscaras) y BG02_protected.png. Comprueba la máscara protegida en busca de líneas espurias.

2. Inspecciona con zoom y corrige manualmente con pixkit.scene:

   • ramp_paint convierte suelos, escritorios y paredes moteados en bandas planas iluminadas;
   • inpaint elimina cosas;
   • line_mask_src dibuja de nuevo las costuras;
   • pega desde tomas anteriores que compartan la cámara.

   Comprueba la dirección de la luz, la accesibilidad y la continuidad (consulta la lista de verificación lógica en la referencia).

3. Finaliza: python scripts/scene_to_pixel.py OUT/BG02_fixed.png OUT --name BG02 --finish --grade cold_dusk. Esto gradúa la paleta, añade la viñeta tramada de 4 niveles y bloquea el resultado a 24 colores. Las tomas que se cortan juntas deben compartir una paleta: usa scene.finish(a, extra=[b]).

4. Bucle (si se desea):

   • Haz las máscaras como PNG. Elige colores o dibuja polígonos con numpy, luego verifícalos superponiéndolos sobre la imagen fija.
   • Escribe una especificación (assets/examples/loop_spec.example.json) y ejecuta python scripts/make_loop.py spec.json.
   • Lee la auditoría. Espera new_colours: 0, un cambio de costura similar al cambio medio entre fotogramas vecinos, y pocos píxeles que alternen más de 8 veces.
   • Mira el mp4 de revisión. Los números no capturan todo.

5. Paralaje (si la cámara se desplaza): consulta la referencia. En resumen:

   • mantén el suelo transitable y todo lo que hay sobre él en una capa;
   • usa factores de velocidad de aproximadamente 0.3 / 0.45 / 0.6 / 1.0;
   • rellena las partes ocultas de las capas traseras como panorámicas completas, sin costuras y con mosaicos;
   • entrega solo las bandas de filas animadas como hojas (pixkit.parallax).

6. Empaqueta con references/packaging.md:

   • still/, loop/<nombre>/frames_native/, copias _1920 y el mp4 de revisión;
   • un PDF de revisión para cada paquete de escenas (scripts/make_review_pdf.py);
   • un README en el idioma del usuario.

3. Vía de personajes

Lee references/character-pipeline.md primero, luego references/character-animation.md.

1. Primer borrador:

   python scripts/sprite_from_concept.py concept.png WORK --height 148 [--materials materials.json]
   

   Usa el mismo --height que el resto del reparto para que todos compartan una escala. El script escribe:

   • el sprite sin procesar en el lienzo;
   • una comparación con el concepto;
   • volcados ASCII;
   • info.json, que mapea las coordenadas del concepto en el lienzo.

   --materials ajusta cada material a una rampa fija. Usa regiones para separar materiales del mismo color (cabello sobre el cuello, delantal debajo). Los trazos interiores se convierten en el tono más oscuro del material.

2. Finaliza la base manualmente. Este es el trabajo real, y la cara siempre lo necesita, porque una reducción de escala destruye los ojos y las bocas.

   • Usa pixkit.sprite.Symbols para volcar y pintar regiones como texto, y grid_zoom para verlas.
   • Redibuja la cara, manteniendo el estilo de ojo del concepto.
   • Limpia manos y objetos; fusiona colores casi duplicados; fill_enclosed_holes.
   • Compara con el concepto a 5× y con el reparto a la misma escala.

3. Haz la base facial sin rasgos: el mismo sprite con los ojos, la boca y las cejas pintados con el color de la piel. La nariz y otros rasgos permanentes se quedan.

4. Escribe la configuración del personaje (assets/examples/character.example.json):

   • el rig facial: cada rasgo es una caja, y cada estado es una pequeña cuadrícula de caracteres;
   • las expresiones;
   • las sustituciones de boca al hablar (talk-mouth overrides);
   • las actuaciones adicionales;
   • las etiquetas de vista previa en el idioma del usuario;
   • las reglas de la parte del mapa de normales;
   • los nombres de Unity.

   Diseña las expresiones a un zoom de 4–8× comparándolas entre sí antes de construir. Los ojos y la boca transmiten la expresión cuando el flequillo oculta las cejas.

5. Construye + audita: python scripts/build_character.py character.json.

   • El script se niega a ejecutarse si la cara neutra del rig no reproduce la base píxel a píxel, porque un desajuste haría que cada transición saltara.
   • Escribe el paquete completo y audit.json, y sale con código distinto de cero ante cualquier problema: paleta, píxeles sueltos, huecos, continuidad, fotogramas de habla fuera de la boca, fotogramas de parpadeo fuera de los ojos, determinismo del mapa de normales.

6. Míralo.

   • Abre previews/expressions_2x.png, previews/frames/*, previews/scale_with_cast_3x.png y previews/normals_lit_3x.png.
   • Reproduce previews/interactive_preview.html con Playwright, o pide al usuario que lo abra.
   • Corrige lo que se vea mal y luego reconstruye.

4. Entrega e iteración

• Cada entrega es una nueva versión: nombre_V01, luego V02, y así sucesivamente. Nunca sobrescribas una versión anterior. Pon un registro de cambios al principio del README:

  • qué cambió;
  • por qué (cita el comentario que se está abordando);
  • qué se verificó.

  Mantén todo lo que no tenías intención de cambiar idéntico píxel a píxel, verifica eso y dilo.

• README en el idioma del usuario. Usa el patrón de secciones en references/packaging.md: especificación, archivos, qué se mueve, artefactos de IA corregidos, problemas lógicos encontrados, necesita confirmación, pasos de Unity, comprobaciones. Usa números concretos ("264 fotogramas escaneados, 13 colores, 0 píxeles sueltos"). Marca los scripts que nunca se ejecutaron dentro de Unity como no probados.

• Plantea preguntas abiertas en lugar de adivinar. Ejemplos: una boca añadida donde el concepto no tenía ninguna; un personaje u objeto que se movió entre dos tomas con la misma cámara; un elemento decorativo que contradice la hora del día de la historia. Ofrece opciones.

• Envía el zip más 1–3 imágenes de vista previa clave, y da un breve resumen. No narres cada paso.

5. QA

Revisa references/qa-checklist.md antes de cada entrega. Las auditorías automatizan la mayor parte. La inspección visual con zoom captura el resto: roturas, tramado que se arrastra, formas que cambian de grosor al balancearse, niebla que no se mueve con su suelo, bocas que tocan la línea de la barbilla y medios parpadeos que saltan.

Archivos de referencia

Archivo	Leer cuando
references/scene-pipeline.md	al pixelizar cualquier escena: parámetros de estilización, correcciones de artefactos de IA y lógica, gradaciones, paletas compartidas
references/scene-loops.md	al animar una imagen fija: catálogo de efectos y parámetros, modos de fallo conocidos, parpadeo de lámparas, personas CG, clips de imagen a vídeo, movimientos de cámara procedurales, paralaje
references/character-pipeline.md	concepto → sprite base 1x, redibujo facial, edición ASCII
references/character-animation.md	rig facial, diseño de expresiones, conjunto de clips y temporizaciones, reglas de movimiento, extensiones lateral / trasero / caminar
references/normal-maps.md	método de mapa de normales, reglas de partes, configuración de iluminación de Unity
references/packaging.md	diseños de carpetas, formatos json / manifiesto, plantilla de README, PDF de revisión
references/qa-checklist.md	antes de cada entrega