alexlukman/pixel-world

/pixel-world

┌──────────────────────┐
│  ☁     ☀     ☁       │  céu pixel, montanhas, grama e terra
│      ┌──────────┐    │
│      │ Oi prof! │    │  balão de fala em fonte bitmap
│      └─▾────────┘    │
│     ▛▜   ▛▜    🌳    │  personagens pixelados robustos com contornos
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│       e se        │   legenda de 1-2 palavras
└──────────────────────┘

Um mundo 2D em visão lateral feito de grandes pixels quadrados, no espírito dos jogos sandbox de construção em blocos. Os personagens e o visual são originais; não são cópias de artwork de nenhum jogo.

Primeiro uso

A pasta desta habilidade é o "Diretório base" que o Claude Code mostra ao carregá-la.

SKILL_DIR="<diretório base desta habilidade>"
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"

Precisa de ffmpeg, Node e Chrome ou Chromium. Defina CHROME=/caminho/para/chrome se o navegador próprio do Playwright não estiver instalado. Não é necessário WebGL: é canvas 2D simples.

Passos

1. Ideia e elenco. Pergunte o tópico e quem está nele. Cada personagem é um nome predefinido ou uma especificação personalizada (abaixo).
2. Roteiro. Escreva <nome>.pixel.json: algumas cenas, cada uma com 2 a 4 segundos, um momento por cena (configuração, reviravolta, desfecho). A fala é curta, no máximo cerca de 30 caracteres por linha.
3. Verifique a aparência. python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 gera imagens PNG estáticas ao lado do arquivo de especificação. Olhe para elas antes de renderizar.
4. Renderize. python3 "$SKILL_DIR/build.py" <spec.json> gera <nome>.pixel.mp4 e uma folha de contato <nome>.pixel.sheet.jpg (cerca de 1,2x o tempo real).
5. Entregue o caminho do MP4.

Transformando uma imagem de referência em um personagem

Quando o usuário enviar uma imagem ou descrever um personagem, traduza isso na especificação do personagem em vez de traçar. Escolha: tom de pele, estilo de cabelo, cor do cabelo, roupa, cor da roupa, uma cor de destaque, calça, sapatos e até alguns acessórios. Mantenha original: pegue a ideia (corpo robusto, cabeça grande, rosto simples, cores fortes), nunca a semelhança de uma pessoa real ou um personagem exato de um jogo.

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

• Predefinições: mika, prof, ranger, agent, bolt, sage. "preset" copia uma e sobrescreve os campos que você fornecer.
• hair: bald, buzz, spiky, bowl, curly, long, mohawk, quiff.
• outfit: tee, hoodie, coat, suit, vest, e as outras em engine/characters.js.
• accessories: glasses, sunglasses, cap, headband, beard, earring, scarf. accColor e beardColor as coloram.
• Um estilo que ainda não existe (um novo chapéu, cabelo, roupa) é uma pequena função em engine/characters.js (HAIR, OUTFIT, ACCESSORY), desenhada com rect(g, colour, x, y, w, h) na grade de pixels.

Especificação

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

• world.sky: day, sunset ou night. ground: onde a linha da grama fica (0 a 1 descendo pela tela). props: tree, bush, flower, sign (text), crate, fence (n), rock, lamp, house. x é uma posição no mundo; "front": true desenha na frente dos atores.
• scale: o tamanho de um pixel da imagem na tela: 5, 6, 8, 10 ou 12. Maior é mais robusto e mais próximo, então use 10 ou 12 para close-ups e 6 para planos abertos.
• cam: x é a posição da câmera, to move durante a cena, follow mantém um ator no quadro.
• actors: x início, to fim, move [início, fim] segundos da caminhada, face é 1 ou -1, do é idle, walk, run, wave, dance, jump ou hit, at é quando a ação começa.
• say: balões de fala, who, text, at, opcional until.
• fx: efeitos de pixel (de pixelfx, 171 deles). Cada um é { "type": "fire/campfire", "x": 120, "at": 0.5 }: x é uma posição no mundo como props, y levanta (negativo é para cima), at é quando começa na cena, until esconde depois disso, "front": true desenha sobre os atores, e palette (uma lista de cores hex do escuro ao claro) recoloriza. Efeitos únicos (explosões, golpes) rodam uma vez; loops (fogo, chuva, vaga-lumes) continuam.

Efeitos

Boas primeiras escolhas: 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. Coloque um efeito de golpe no mesmo at que o "do": "hit" de um ator.

• 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

Efeitos que trazem seu próprio lutador (o conjunto moves/ e alguns efeitos corpo a corpo, projéteis e impactos) são deixados de fora porque o elenco interpreta os personagens. Alguns efeitos climáticos (fog, fireflies, god-rays, aurora) tingem uma faixa do céu; verifique uma imagem estática.

• transition: "pixel" dissolve na próxima cena em blocos.
• A caption de uma cena é uma ou duas palavras em minúsculas. Um exemplo completo está em examples/demo.pixel.json.

Outros tamanhos de tela

Toda habilidade renderiza em 9:16 e pode então encaixar o vídeo em qualquer quadro. Adicione à especificação:

• size: "16:9", "1:1", "4:5", "4:3", "21:9" ou qualquer "LARGURAxALTURA" como "1920x1080".
• fill (opcional): "blur" (padrão, uma cópia desfocada do vídeo preenche as laterais) ou uma cor como "#101010".
• zoom (opcional, padrão 1): acima de 1 amplia a imagem e corta as margens superior e inferior tranquilas; até cerca de 1,25 é seguro em paisagem. Verifique se nada importante no topo ou na base é cortado. A folha de contato é feita a partir da renderização 9:16. Para um vídeo que você já tem: python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2].

Bom gosto

• Cabeças grandes, poucas cores por personagem, contorno forte. Deixe os pixels robustos.
• Uma ideia por cena, um balão por momento, e uma transição de pixel apenas na grande virada.
• Mantenha o texto curto o suficiente para ser lido em menos de dois segundos.