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秒）、シーンごとに1ビート（セットアップ、展開、オチ）を持ちます。セリフは短く、1行あたり約30文字以内にします。
3. 見た目の確認。python3 "$SKILL_DIR/build.py" <spec.json> --snap 0.5,3.5 を実行すると、specファイルの隣に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（Tシャツ）、hoodie（パーカー）、coat（コート）、suit（スーツ）、vest（ベスト）、および engine/characters.js 内のその他の種類。
• accessories: glasses（メガネ）、sunglasses（サングラス）、cap（キャップ）、headband（ヘッドバンド）、beard（ひげ）、earring（イヤリング）、scarf（スカーフ）。accColor と beardColor で色を指定します。
• まだ存在しないスタイル（新しい帽子、髪型、服装）は、engine/characters.js 内の1つの小さな関数（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: 画面上の1ピクセルの大きさ：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進数カラーリスト）で色を変更します。1回限りのエフェクト（爆発、ヒット）は1度だけ再生され、ループエフェクト（火、雨、ホタル）は継続して再生されます。

エフェクト

おすすめのエフェクト：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（SF）: emp-blast（EMP爆発）、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（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 は1～2語の小文字です。 完成した例は examples/demo.pixel.json にあります。

その他の画面サイズ

すべてのスキルは9:16でレンダリングし、その後ビデオを任意のフレームにフィットさせることができます。specに以下を追加します。

• size: "16:9"、"1:1"、"4:5"、"4:3"、"21:9"、または任意の "WIDTHxHEIGHT"（例："1920x1080"）。
• fill（オプション、デフォルトは "blur"）。"blur"（デフォルト）はビデオのぼかしコピーで側面を埋めます。または "#101010" のような色を指定します。
• zoom（オプション、デフォルトは1）。1より大きいと画像を拡大し、上下の余白を切り取ります。ランドスケープでは最大約1.25まで安全です。一番上や一番下の重要な部分が切れていないか確認してください。 コンタクトシートは9:16レンダリングから作成されます。既存のビデオに対しては、python3 "$KIT/resize.py" <video.mp4> --size 1920x1080 [--fill blur] [--zoom 1.2] を実行します。

テイスト

• 大きな頭、キャラクターごとに少ない色数、太いアウトライン。ピクセルを粗くしましょう。
• シーンごとに1つのアイデア、ビートごとに1つの吹き出し、大きな展開でのみピクセルトランジションを使用します。
• テキストは2秒未満で読める十分な短さに保ちます。