alexlukman/pixel-world

/pixel-world

┌──────────────────────┐
│  ☁     ☀     ☁       │  像素天空、山脈、草地和泥土
│      ┌──────────┐    │
│      │ 教授好！│    │  點陣字體中的對話氣泡
│      └─▾────────┘    │
│     ▛▜   ▛▜    🌳    │  帶有粗輪廓的粗像素角色
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│       如果說          │  1-2 個字的字幕
└──────────────────────┘

一個側視的 2D 世界，由大方形像素組成，靈感來自方塊建造沙盒遊戲。角色和外觀是原創的；它們不是任何遊戲藝術作品的複製品。

首次使用

此技能的資料夾是 Claude Code 載入時顯示的「基礎目錄」。

SKILL_DIR="<此技能的基礎目錄>"
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"

需要 ffmpeg、Node 和 Chrome 或 Chromium。如果未安裝 Playwright 自己的瀏覽器，請設定 CHROME=/path/to/chrome。不需要 WebGL：它是純 2D 畫布。

步驟

1. 構想和演員。 詢問主題，然後問有哪些角色。每個角色都是一個預設名稱或自訂規格（如下）。
2. 腳本。 編寫 <name>.pixel.json：包含幾個場景，每個場景持續 2 到 4 秒，每個場景一個節拍（鋪陳、轉折、收尾）。對話要簡短，每行大約不超過 30 個字元。
3. 檢查外觀。 python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 會在規格旁邊寫入 PNG 靜態圖。在渲染之前查看它們。
4. 渲染。 python3 "$SKILL_DIR/build.py" <spec.json> 會寫入 <name>.pixel.mp4 和一個連絡表 <name>.pixel.sheet.jpg（大約為即時播放速度的 1.2 倍）。
5. 交付 mp4 路徑。

將參考圖片轉換為角色

當使用者發送圖片或描述一個角色時，將其轉換為角色規格，而不是描摹它。選擇：膚色、hair 風格、髮色、outfit、服裝顏色、一個 accent 顏色、褲子、鞋子和最多幾個 accessories。保持原創：採用其概念（粗壯的身體、大頭、簡單的臉、大膽的顏色），切勿使用真人的肖像或遊戲的具體角色。

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

• 預設值：mika、prof、ranger、agent、bolt、sage。"preset" 會複製一個預設值並覆蓋你提供的欄位。
• hair：bald、buzz、spiky、bowl、curly、long、mohawk、quiff。
• outfit：tee、hoodie、coat、suit、vest 以及 engine/characters.js 中的其他項目。
• accessories：glasses、sunglasses、cap、headband、beard、earring、scarf。accColor 和 beardColor 為它們上色。
• 一個尚不存在的樣式（新的帽子、頭髮、服裝）是 engine/characters.js 中的一個小函數（HAIR、OUTFIT、ACCESSORY），使用 rect(g, colour, x, y, w, h) 在像素網格上繪製。

規格

{
  "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": "如果說", "cam": { "x": 90 },
      "actors": { "mika": { "x": 60, "to": 105, "move": [0.2, 2.2] }, "prof": { "x": 150, "face": -1 } },
      "say": [ { "who": "mika", "text": "教授好！", "at": 0.3, "until": 2.4 } ] }
  ]
}

• world.sky：day、sunset 或 night。ground：草地線的位置（從螢幕頂部到底部，0 到 1）。props：tree、bush、flower、sign（附 text）、crate、fence（附 n）、rock、lamp、house。x 是世界位置；"front": true 會將它畫在演員前面。
• scale：一個圖片像素在螢幕上的大小：5、6、8、10 或 12。數字越大越粗且越近，因此在特寫鏡頭中使用 10 或 12，在廣角鏡頭中使用 6。
• cam：x 是攝影機位置，to 在場景中移動它，follow 讓演員保持在畫面中。
• actors：x 起始位置，to 結束位置，move [start, end] 表示行走的秒數，face 是 1 或 -1，do 是 idle、walk、run、wave、dance、jump 或 hit，at 是動作開始的時間。
• say：對話氣泡，who、text、at、可選的 until。
• fx：像素效果（來自 pixelfx，共 171 種）。每種效果是 { "type": "fire/campfire", "x": 120, "at": 0.5 }：x 是像道具一樣的世界位置，y 會提升它（負值向上），at 是它在場景中開始的時間，until 在此時間後隱藏它，"front": true 會將它畫在演員上方，palette（一個由深到亮的十六進制顏色列表）會重新為它上色。一次性效果（爆炸、打擊）播放一次；循環效果（火、雨、螢火蟲）持續播放。

效果

好的初學者選擇：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。將打擊效果放在與演員 "do": "hit" 相同的 at 時間。

• 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

帶來自身戰鬥者的效果（moves/ 集合以及一些近戰、投射物和衝擊效果）被省略，因為由演員扮演角色。某些天氣效果（fog、fireflies、god-rays、aurora）會為天空的一條帶上色；請檢查靜態圖。

• transition："pixel" 會以區塊形式溶解到下一場景。
• 一個場景的 caption 是一個或兩個小寫單詞。 完整的範例在 examples/demo.pixel.json 中。

其他螢幕尺寸

每個技能都渲染 9:16 比例，然後可以將影片適合到任何畫面中。在規格中新增：

• size："16:9"、"1:1"、"4:5"、"4:3"、"21:9" 或任何 "寬度x高度" 例如 "1920x1080"。
• fill（可選）："blur"（預設，影片的模糊副本填滿兩側）或一個顏色如 "#101010"。
• zoom（可選，預設為 1）：大於 1 會放大圖片並裁剪安靜的頂部和底部邊距；在橫向模式下，大約 1.25 以內是安全的。檢查頂部或底部是否沒有重要內容被裁剪。 連絡表是從 9:16 渲染製作的。對於你已有的影片：python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2]。

品味

• 大頭，每個角色顏色少，輪廓強烈。讓像素保持粗獷。
• 每個場景一個想法，每個節拍一個氣泡，只在重大轉折時使用像素轉場。
• 保持文字簡短，足以在兩秒內閱讀完畢。