alexlukman/pixel-world

/pixel-world

┌──────────────────────┐
│  ☁     ☀     ☁       │  Pixelhimmel, Berge, Gras und Erde
│      ┌──────────┐    │
│      │ Hallo Prof!│   │  Sprechblase in einer Bitmap-Schriftart
│      └─▾────────┘    │
│     ▛▜   ▛▜    🌳    │  Grobe Pixel-Charaktere mit Umrissen
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│       was wäre wenn   │  1-2-Wort-Untertitel
└──────────────────────┘

Eine Seitenansicht einer 2D-Welt aus großen quadratischen Pixeln, im Geiste von Blockbau-Sandbox-Spielen. Die Charaktere und das Aussehen sind original; sie sind keine Kopien von Kunstwerken eines Spiels.

Erste Verwendung

Das Verzeichnis dieser Fähigkeit ist das „Basisverzeichnis“, das Claude Code beim Laden anzeigt.

SKILL_DIR="<Basisverzeichnis dieser Fähigkeit>"
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"

Erfordert ffmpeg, Node und Chrome oder Chromium. Setze CHROME=/pfad/zu/chrome, falls Playwrights eigener Browser nicht installiert ist. WebGL wird nicht benötigt: es handelt sich um eine reine 2D-Canvas.

Schritte

1. Idee und Besetzung. Frage nach dem Thema und dann, wer darin vorkommt. Jeder Charakter ist ein voreingestellter Name oder eine benutzerdefinierte Spezifikation (unten).
2. Skript. Schreibe <name>.pixel.json: einige Szenen, jede 2 bis 4 Sekunden, ein Beat pro Szene (Aufbau, Wendepunkt, Auflösung). Sprache ist kurz, unter etwa 30 Zeichen pro Zeile.
3. Überprüfe das Aussehen. python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 schreibt PNG-Standbilder neben die Spezifikation. Betrachte sie vor dem Rendern.
4. Rendern. python3 "$SKILL_DIR/build.py" <spec.json> schreibt <name>.pixel.mp4 und ein Kontaktblatt <name>.pixel.sheet.jpg (ca. 1,2-fache Echtzeit).
5. Übergabe des MP4-Pfades.

Ein Referenzbild in einen Charakter umwandeln

Wenn der Benutzer ein Bild sendet oder einen Charakter beschreibt, übersetze es in die Charakterspezifikation, anstatt es nachzuzeichnen. Wähle: Hautton, hair-Stil, Haarfarbe, outfit, Outfit-Farbe, eine accent-Farbe, Hose, Schuhe und bis zu einigen accessories. Halte es original: nimm die Idee (klobiger Körper, großer Kopf, einfaches Gesicht, kräftige Farben), niemals das Abbild einer echten Person oder den exakten Charakter eines Spiels.

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

• Voreinstellungen: mika, prof, ranger, agent, bolt, sage. "preset" kopiert eine und überschreibt die angegebenen Felder.
• hair: bald, buzz, spiky, bowl, curly, long, mohawk, quiff.
• outfit: tee, hoodie, coat, suit, vest und die anderen in engine/characters.js.
• accessories: glasses, sunglasses, cap, headband, beard, earring, scarf. accColor und beardColor färben sie.
• Ein noch nicht existierender Stil (ein neuer Hut, neue Haare, neues Outfit) ist eine kleine Funktion in engine/characters.js (HAIR, OUTFIT, ACCESSORY), gezeichnet mit rect(g, colour, x, y, w, h) auf dem Pixelgitter.

Spezifikation

{
  "world": { "sky": "day", "ground": 0.68, "props": [ { "type": "tree", "x": 20 }, { "type": "sign", "x": 150, "text": "HALLO" } ] },
  "cast": { "mika": "mika", "prof": "prof" },
  "scenes": [
    { "dur": 3.2, "scale": 8, "caption": "was wäre wenn", "cam": { "x": 90 },
      "actors": { "mika": { "x": 60, "to": 105, "move": [0.2, 2.2] }, "prof": { "x": 150, "face": -1 } },
      "say": [ { "who": "mika", "text": "Hallo Professor!", "at": 0.3, "until": 2.4 } ] }
  ]
}

• world.sky: day, sunset oder night. ground: wo die Graslinie sitzt (0 bis 1 nach unten auf dem Bildschirm). props: tree, bush, flower, sign (text), crate, fence (n), rock, lamp, house. x ist eine Weltposition; "front": true zeichnet es vor den Schauspielern.
• scale: Wie groß ein Bildpixel auf dem Bildschirm ist: 5, 6, 8, 10 oder 12. Größer ist grober und näher, also verwende 10 oder 12 für Nahaufnahmen und 6 für Weitwinkelaufnahmen.
• cam: x ist die Kameraposition, to bewegt sie während der Szene, follow behält einen Schauspieler im Bild.
• actors: x Start, to Ende, move [Start, Ende] Sekunden des Gehens, face ist 1 oder -1, do ist idle, walk, run, wave, dance, jump oder hit, at ist, wann die Aktion beginnt.
• say: Sprechblasen, who, text, at, optional until.
• fx: Pixeleffekte (aus pixelfx, 171 Stück). Jeder ist { "type": "fire/campfire", "x": 120, "at": 0.5 }: x ist eine Weltposition wie bei Props, y hebt es an (negativ ist nach oben), at ist, wann es in der Szene beginnt, until versteckt es danach und "front": true zeichnet es über den Schauspielern, und palette (eine Liste von Hex-Farben von dunkel nach hell) färbt es neu. Einmalige Effekte (Explosionen, Treffer) werden einmal abgespielt; Schleifen (Feuer, Regen, Glühwürmchen) laufen weiter.

Effekte

Gute erste Wahl: 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. Platziere einen Treffereffekt zur gleichen at wie das "do": "hit" eines Schauspielers.

• 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

Effekte, die ihren eigenen Kämpfer mitbringen (der moves/-Satz und einige Nahkampf-, Projektil- und Aufpralleffekte) werden weggelassen, weil die Besetzung die Charaktere spielt. Einige Wettereffekte (fog, fireflies, god-rays, aurora) färben einen Streifen des Himmels ein; überprüfe dies mit einem Standbild.

• transition: "pixel" löst sich blockweise in die nächste Szene auf.
• Eine caption einer Szene besteht aus ein oder zwei Wörtern in Kleinbuchstaben. Ein fertiges Beispiel befindet sich in examples/demo.pixel.json.

Andere Bildschirmgrößen

Jede Fähigkeit rendert standardmäßig 9:16 und kann das Video dann in jeden Rahmen einpassen. Füge zur Spezifikation hinzu:

• size: "16:9", "1:1", "4:5", "4:3", "21:9" oder beliebig "BREITExHÖHE" wie "1920x1080".
• fill (optional): "blur" (Standard, eine unscharfe Kopie des Videos füllt die Seiten) oder eine Farbe wie "#101010".
• zoom (optional, Standard 1): über 1 vergrößert das Bild und beschneidet die ruhigen oberen und unteren Ränder; bis etwa 1,25 ist im Querformat sicher. Überprüfe, ob nichts Wichtiges ganz oben oder unten abgeschnitten wird. Das Kontaktblatt wird aus dem 9:16-Render erstellt. Für ein bereits vorhandenes Video: python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2].

Geschmack

• Große Köpfe, wenige Farben pro Charakter, starke Umrandung. Lass die Pixel klobig sein.
• Eine Idee pro Szene, eine Blase pro Beat und nur bei der großen Wende einen Pixel-Übergang.
• Halte den Text kurz genug, um ihn in unter zwei Sekunden lesen zu können.