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": "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 또는 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 [시작, 종료] 초(걷기), 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(어두운 것부터 밝은 것까지의 16진수 색상 목록)로 색상을 변경합니다. 원샷(폭발, 타격)은 한 번 재생되고, 루프(불, 비, 반딧불이)는 계속됩니다.

효과

좋은 첫 선택: 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" 또는 "1920x1080"과 같은 "WIDTHxHEIGHT".
• fill (선택 사항): "blur" (기본값, 비디오의 흐릿한 복사본이 측면을 채움) 또는 "#101010"과 같은 색상.
• zoom (선택 사항, 기본값 1): 1 이상은 그림을 확대하고 조용한 위/아래 여백을 자릅니다. 가로 모드에서는 약 1.25까지 안전합니다. 맨 위나 맨 아래의 중요한 부분이 잘리지 않는지 확인하세요. 연락처 시트는 9:16 렌더링에서 만들어집니다. 이미 있는 비디오의 경우: python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2].

취향

• 큰 머리, 캐릭터당 적은 색상, 강한 아웃라인. 픽셀이 덩치 있어 보이게 하세요.
• 장면당 하나의 아이디어, 비트당 하나의 말풍선, 큰 전환에서만 픽셀 전환을 사용하세요.
• 텍스트는 2초 안에 읽을 수 있을 정도로 짧게 유지하세요.