alexlukman/pixel-world

/pixel-world

┌──────────────────────┐
│  ☁     ☀     ☁       │  cielo pixelado, montañas, césped y tierra
│      ┌──────────┐    │
│      │ ¡Hola profe! │  │  burbuja de diálogo en fuente bitmap
│      └─▾────────┘    │
│     ▛▜   ▛▜    🌳    │  personajes pixelados rechonchos con contorno
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│       ¿y si?         │  subtítulo de 1-2 palabras
└──────────────────────┘

Un mundo 2D en vista lateral hecho de grandes píxeles cuadrados, con el espíritu de los juegos sandbox de construcción de bloques. Los personajes y el aspecto son originales; no son copias del arte de ningún juego.

Primer uso

La carpeta de esta habilidad es el "Directorio base" que Claude Code muestra al cargarla.

SKILL_DIR="<directorio base de esta habilidad>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/node_modules/playwright/package.json" ] || bash "$KIT/setup.sh"

Requiere ffmpeg, Node y Chrome o Chromium. Configura CHROME=/ruta/a/chrome si el navegador propio de Playwright no está instalado. No necesita WebGL: es canvas 2D simple.

Pasos

1. Idea y reparto. Pregunta por el tema, luego quién aparece. Cada personaje es un nombre predefinido o una especificación personalizada (abajo).
2. Guion. Escribe <nombre>.pixel.json: unas pocas escenas, cada una de 2 a 4 segundos, un beat por escena (planteamiento, giro, desenlace). El diálogo es corto, menos de unos 30 caracteres por línea.
3. Revisa el aspecto. python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 escribe imágenes PNG junto a la especificación. Míralas antes de renderizar.
4. Renderiza. python3 "$SKILL_DIR/build.py" <spec.json> escribe <nombre>.pixel.mp4 y una hoja de contactos <nombre>.pixel.sheet.jpg (aproximadamente 1.2x tiempo real).
5. Entrega la ruta del mp4.

Convertir una imagen de referencia en un personaje

Cuando el usuario envía una imagen o describe un personaje, tradúcela a la especificación del personaje en lugar de calcarla. Elige: tono de piel, estilo de hair, color de pelo, outfit, color de vestimenta, un color de accent, pantalones, zapatos y hasta unos pocos accessories. Mantenlo original: toma la idea (cuerpo rechoncho, cabeza grande, cara simple, colores llamativos), nunca la apariencia de una persona real o un personaje exacto de un juego.

"cast": {
  "mika": "mika",
  "hero": { "preset": "bolt", "hair": "mohawk", "hairColor": "#38c172", "outfit": "hoodie", "outfitColor": "#6b3fd1",
            "accessories": ["glasses", "scarf"], "accColor": "#ffd23f" }
}

• Predefinidos: mika, prof, ranger, agent, bolt, sage. "preset" copia uno y sobrescribe los campos que proporciones.
• hair: bald, buzz, spiky, bowl, curly, long, mohawk, quiff.
• outfit: tee, hoodie, coat, suit, vest, y los demás en engine/characters.js.
• accessories: glasses, sunglasses, cap, headband, beard, earring, scarf. accColor y beardColor los colorean.
• Un estilo que aún no exista (un sombrero, pelo, vestimenta nuevos) es una función pequeña en engine/characters.js (HAIR, OUTFIT, ACCESSORY), dibujada con rect(g, colour, x, y, w, h) en la cuadrícula de píxeles.

Especificación

{
  "world": { "sky": "day", "ground": 0.68, "props": [ { "type": "tree", "x": 20 }, { "type": "sign", "x": 150, "text": "HELLO" } ] },
  "cast": { "mika": "mika", "prof": "prof" },
  "scenes": [
    { "dur": 3.2, "scale": 8, "caption": "what if", "cam": { "x": 90 },
      "actors": { "mika": { "x": 60, "to": 105, "move": [0.2, 2.2] }, "prof": { "x": 150, "face": -1 } },
      "say": [ { "who": "mika", "text": "Hi professor!", "at": 0.3, "until": 2.4 } ] }
  ]
}

• world.sky: day, sunset o night. ground: dónde se encuentra la línea del césped (0 a 1 hacia abajo de la pantalla). props: tree, bush, flower, sign (text), crate, fence (n), rock, lamp, house. x es una posición en el mundo; "front": true lo dibuja delante de los actores.
• scale: qué tan grande es un píxel de la imagen en pantalla: 5, 6, 8, 10 o 12. Más grande es más rechoncho y más cercano, así que usa 10 o 12 para primeros planos y 6 para planos generales.
• cam: x es la posición de la cámara, to la mueve durante la escena, follow mantiene a un actor en cuadro.
• actors: x inicio, to final, move [inicio, fin] segundos de la caminata, face es 1 o -1, do es idle, walk, run, wave, dance, jump o hit, at es cuándo comienza la acción.
• say: burbujas de diálogo, who, text, at, opcional until.
• fx: efectos de píxeles (de pixelfx, 171 de ellos). Cada uno es { "type": "fire/campfire", "x": 120, "at": 0.5 }: x es una posición en el mundo como los props, y lo eleva (negativo es hacia arriba), at es cuándo comienza en la escena, until lo oculta después de eso, "front": true lo dibuja sobre los actores, y palette (una lista de colores hexadecimales de oscuro a brillante) lo recolorea. Los de un solo uso (explosiones, golpes) se reproducen una vez; los bucles (fuego, lluvia, luciérnagas) continúan.

Efectos

Buenas primeras opciones: fire/campfire, fire/torch, explosions/cartoon-pow, explosions/big-explosion, impacts/hit-spark, lightning/zap-hit, pickups/coin-spin, ui/confetti, ui/level-up, spawn/poof, weather/rain, weather/snow, arcane/portal, water/splash. Coloca un efecto de golpe en el mismo at que el "do": "hit" de un actor.

• fire: brazier, campfire, candle, fire-breath, fire-tornado, fireball, flame-pillar, flamethrower, meteor, spirit-flame, torch
• explosions: barrel-explosion, big-explosion, cartoon-pow, dirt-explosion, firework-burst, firework-rocket, grenade, implosion, nuke, plasma-explosion, small-explosion, smoke-bomb
• water: bubbles, drip, fountain, geyser, rain-splash, ripples, splash, water-jet, water-orb, waterfall, wave-crash, whirlpool
• ice: blizzard-vortex, frost-breath, ice-crystal, ice-lance, ice-shatter, ice-spikes, icicle-fall, snowflake-burst
• lightning: ball-lightning, lightning-strike, plasma-ball, spark-arc, storm-cloud, tesla-coil, zap-hit
• scifi: emp-blast, energy-core, hologram, jetpack, laser-grid, teleporter-pad, tractor-beam
• impacts: blunt-hit, bullet-impact, crit-hit, ground-slam, hit-spark, impact-frame, parry, ricochet
• projectiles: arrow, bullet-tracer, cannonball, energy-disc, flare, homing-missile, laser-bolt, magic-missile, muzzle-pistol, muzzle-shotgun, muzzle-smg, plasma-shot, rocket
• spawn: coin-drop, egg-hatch, poof, spawn-portal, summon-rise
• arcane: arcane-orb, magic-circle-cast, mana-burst, portal, rune-circle, star-fall, time-stop
• holy: feather-burst, heal-aoe, holy-pillar, smite, sunburst
• shadow: black-hole, dark-explosion, eclipse, grasping-hands, hex-sigil, necro-skulls, shadow-flames, shadow-tendrils, soul-drain, void-orb
• nature: acid-splash, boulder, earth-spike, healing-bloom, poison-cloud, quake, spore-burst, thorns, tornado, toxic-puddle, vine-whip
• weather: aurora, blizzard, cherry-blossoms, clouds, falling-leaves, fireflies, fog, god-rays, rain, shooting-stars, snow, storm
• ui: achievement, coin-collect, combo-counter, confetti, countdown, crit-number, damage-number, health-bar-hit, heart-lost, quest-complete
• pickups: chest-open, coin-spin, collect-burst, crystal-shard, gem-spin, heart-pickup, key-glint, loot-beam, potion, power-star, xp-orb
• transitions: blinds, burn-away, crt-off, diamond-wipe, glitch-wipe, iris, pixel-dissolve, shatter-wipe, slash-wipe, star-iris
• critters: bat, bird, butterfly, eyeball, fish-school, flying-skull, frog, ghost, jellyfish, slime, snake, wisp

Los efectos que traen su propio luchador (el conjunto moves/ y algunos efectos cuerpo a cuerpo, de proyectil e impacto) se omiten porque el reparto interpreta a los personajes. Algunos efectos climáticos (fog, fireflies, god-rays, aurora) tiñen una banda del cielo; verifica una imagen fija.

• transition: "pixel" se disuelve en la siguiente escena en bloques.
• El caption de una escena es una o dos palabras en minúsculas. Un ejemplo completo está en examples/demo.pixel.json.

Otros tamaños de pantalla

Cada habilidad renderiza en 9:16 y luego puede ajustar el video a cualquier marco. Añade a la especificación:

• size: "16:9", "1:1", "4:5", "4:3", "21:9" o cualquier "ANCHOxALTO" como "1920x1080".
• fill (opcional): "blur" (predeterminado, una copia borrosa del video rellena los lados) o un color como "#101010".
• zoom (opcional, predeterminado 1): por encima de 1 agranda la imagen y recorta los márgenes superior e inferior tranquilos; hasta aproximadamente 1.25 es seguro en horizontal. Verifica que nada importante en la parte superior o inferior se corte. La hoja de contactos se genera a partir del renderizado 9:16. Para un video que ya tengas: python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2].

Gusto

• Cabezas grandes, pocos colores por personaje, contorno marcado. Deja que los píxeles sean rechonchos.
• Una idea por escena, una burbuja por beat, y una transición de píxeles solo en el gran giro.
• Mantén el texto lo suficientemente corto para leerlo en menos de dos segundos.