alexlukman/pixel-world

/pixel-world

┌──────────────────────┐
│  ☁     ☀     ☁       │  ciel pixelisé, montagnes, herbe et terre
│      ┌──────────┐    │
│      │ Bonjour  │    │  bulle de dialogue dans une police bitmap
│      │ professeur!│   │
│      └─▾────────┘    │
│     ▛▜   ▛▜    🌳    │  personnages pixelisés trapus avec contours
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│      et si           │  légende de 1 à 2 mots
└──────────────────────┘

Un monde 2D en vue de côté composé de gros pixels carrés, dans l'esprit des jeux de construction en blocs. Les personnages et l'apparence sont originaux ; ils ne copient aucun artwork de jeu.

Première utilisation

Le dossier de cette compétence est le « Répertoire de base » que Claude Code affiche lorsqu'il la charge.

SKILL_DIR="<répertoire de base de cette compétence>"
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"

Nécessite ffmpeg, Node et Chrome ou Chromium. Définissez CHROME=/chemin/vers/chrome si le navigateur intégré de Playwright n'est pas installé. Aucun WebGL n'est requis : il s'agit d'un canvas 2D simple.

Étapes

1. Idée et distribution. Demandez le sujet, puis qui y participe. Chaque personnage est un nom prédéfini ou une spécification personnalisée (ci-dessous).
2. Script. Écrivez <nom>.pixel.json : quelques scènes, chacune de 2 à 4 secondes, un temps fort par scène (mise en place, rebondissement, conclusion). Les dialogues sont courts, moins de 30 caractères par ligne environ.
3. Vérification du rendu. python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 écrit des images PNG à côté de la spécification. Examinez-les avant de lancer le rendu.
4. Rendu. python3 "$SKILL_DIR/build.py" <spec.json> écrit <nom>.pixel.mp4 et une planche contact <nom>.pixel.sheet.jpg (environ 1,2 fois le temps réel).
5. Transmettez le chemin du mp4.

Transformer une image de référence en personnage

Lorsque l'utilisateur envoie une image ou décrit un personnage, traduisez-la en spécification de personnage sans la tracer. Choisissez : teint de peau, style hair, couleur de cheveux, outfit, couleur de tenue, une couleur accent, pantalon, chaussures et jusqu'à quelques accessories. Restez original : prenez l'idée (corps trapu, grosse tête, visage simple, couleurs vives), jamais la ressemblance d'une personne réelle ni un personnage exact d'un jeu.

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

• Préréglages : mika, prof, ranger, agent, bolt, sage. "preset" copie un préréglage et remplace les champs que vous donnez.
• hair : bald, buzz, spiky, bowl, curly, long, mohawk, quiff.
• outfit : tee, hoodie, coat, suit, vest, et les autres dans engine/characters.js.
• accessories : glasses, sunglasses, cap, headband, beard, earring, scarf. accColor et beardColor les colorent.
• Un style qui n'existe pas encore (un nouveau chapeau, coiffure, tenue) est une petite fonction dans engine/characters.js (HAIR, OUTFIT, ACCESSORY), dessinée avec rect(g, colour, x, y, w, h) sur la grille de pixels.

Spécification

{
  "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": "et si", "cam": { "x": 90 },
      "actors": { "mika": { "x": 60, "to": 105, "move": [0.2, 2.2] }, "prof": { "x": 150, "face": -1 } },
      "say": [ { "who": "mika", "text": "Bonjour professeur!", "at": 0.3, "until": 2.4 } ] }
  ]
}

• world.sky : day, sunset ou night. ground : où se situe la ligne d'herbe (0 à 1 vers le bas de l'écran). props : tree, bush, flower, sign (text), crate, fence (n), rock, lamp, house. x est une position dans le monde ; "front": true le dessine devant les personnages.
• scale : taille d'un pixel d'image à l'écran : 5, 6, 8, 10 ou 12. Plus c'est grand, plus c'est trapu et proche ; utilisez 10 ou 12 pour les gros plans et 6 pour les plans larges.
• cam : x est la position de la caméra, to la déplace pendant la scène, follow garde un personnage dans le cadre.
• actors : x départ, to fin, move [début, fin] secondes de marche, face vaut 1 ou -1, do est idle, walk, run, wave, dance, jump ou hit, at est le moment où l'action commence.
• say : bulles de dialogue, who, text, at, until optionnel.
• fx : effets pixelisés (parmi pixelfx, 171 au total). Chaque effet est { "type": "fire/campfire", "x": 120, "at": 0.5 } : x est une position dans le monde comme les props, y le soulève (négatif = vers le haut), at est le moment où il commence dans la scène, until le cache après, "front": true le dessine devant les personnages, et palette (liste de couleurs hexadécimales du foncé au clair) le recolore. Les effets uniques (explosions, coups) jouent une fois ; les boucles (feu, pluie, lucioles) continuent.

Effets

Bonnes premières sélections : 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. Placez un effet de coup au même at que le "do": "hit" d'un personnage.

• 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
• creatures : bat, bird, butterfly, eyeball, fish-school, flying-skull, frog, ghost, jellyfish, slime, snake, wisp

Les effets qui amènent leur propre combattant (l'ensemble moves/ et certains effets de mêlée, projectiles et impacts) sont exclus car la distribution joue les personnages. Certains effets météo (fog, fireflies, god-rays, aurora) teintent une bande du ciel ; vérifiez une image fixe.

• transition : "pixel" dissout la scène suivante par blocs.
• La caption d'une scène est composée d'un ou deux mots en minuscules. Un exemple complet se trouve dans examples/demo.pixel.json.

Autres formats d'écran

Chaque compétence rend en 9:16 et peut ensuite ajuster la vidéo à n'importe quel cadre. Ajoutez à la spécification :

• size : "16:9", "1:1", "4:5", "4:3", "21:9" ou tout format "LARGEURxHAUTEUR" comme "1920x1080".
• fill (optionnel) : "blur" (par défaut, une copie floutée de la vidéo remplit les côtés) ou une couleur comme "#101010".
• zoom (optionnel, défaut 1) : supérieur à 1 agrandit l'image et rogne les marges hautes et basses ; jusqu'à environ 1,25 est sûr en paysage. Vérifiez que rien d'important en haut ou en bas n'est coupé. La planche contact est créée à partir du rendu 9:16. Pour une vidéo que vous possédez déjà : python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2].

Conseils esthétiques

• Grosses têtes, peu de couleurs par personnage, contour fort. Laissez les pixels être trapus.
• Une idée par scène, une bulle par temps fort, et une transition pixelisée uniquement sur le grand tournant.
• Gardez le texte assez court pour être lu en moins de deux secondes.