Communitygithub.com

コードで描くカートゥーン

カートゥーンの各フレームをコードで描き、キャラの声と効果音を乗せて MP4 にする。画像モデルも動画モデルも使わない。

コードで描くカートゥーン とは?

各シーンは、自分の世界の第 u フレームを描く JavaScript ファイルです。録音した声のタイムラインで再生し、ヘッドレス Chrome が全フレームを撮り、ffmpeg が声・効果音・環境音を混ぜます。付属の作例をコピーしてシーンを差し替えます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/krisuuu2/code-cartoon-skill/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

コードカートゥーン

ここでの映画とは、Webページです。各シーンは1つのJavaScriptファイルで、自身の世界のフレーム u を描画します。小さなエンジンが、録音された音声から構築されたタイムライン上でシーンを再生します。ヘッドレスChromeがすべてのフレームをスクリーンショットし、ffmpegが生成された効果音と環境音をミックスして結合します。画像モデルやビデオモデルは一切使用しません。

example/ はこの手法で制作された完全な映画です:『THE BALLOON』、2分41秒、13スタイル、16シーン。新しい映画は example/ をコピーしてシーンを差し替えることで開始します。エンジン、ツール、コントラクトはそのまま再利用することを想定しています。

作業の順序(順序を変更しないでください)

  1. まずスタイルボード(references/styles.md)。各候補スタイルにつき1枚の静止画、それぞれ異なる技法で、すべて同じキャラクターを描画。パレットと書体を共有するスタイルは同じスタイルと見なされるため、パレット、テクスチャ、次元、技法のすべてで異なるものにしてください。ボードの承認を得てからアニメーションに進みます。
  2. ストーリー(references/story.md)。すべてのショットに登場する1つのキャリアオブジェクト、そしてスタイルが変わるたびにその理由を用意します。各行の感情をタグ付けしたスクリプトを作成します。
  3. 音声は絵より先に(references/voices.md)。すべてのセリフを録音し、実際の長さからタイムラインを構築します。シーンはそのタイムラインに合わせてアニメーション化され、逆はありません。
  4. エンジンとコントラクト。 example/balloon.html、example/balloon/film.js、example/tools_balloon.mjs、example/balloon/CONTRACT.md を再利用します。最初のシーンを書く前にコントラクトを読んでください。短く、すべてのルールは、それを守らなかった場合に何かが壊れた経験に基づいています。
  5. シーン(各スタイルのレシピは references/styles.md、複数同時構築は references/parallel-build.md)。シーンごとに1ファイル、draw(u, S) は u の純粋関数。
  6. サウンド(references/sound.md)。各シーンは自身の効果音、キュー時間、環境音を宣言し、ツールが生成・ミックスします。
  7. シーンごとにレンダリングし、結合。 bash balloon/final.sh でシーンごとに1つのMP4をレンダリングするため、変更したシーンのみ再レンダリングされます。
  8. 完成ファイルの確認(references/checking.md)。視聴も聴取もできないため、測定可能なものを確認し、確認できなかった事項を明確に述べてください。

すべてのシーンで守るべきルール

  • フレームは時間の純粋関数であること。 フレームは1つずつ、時には順不同でレンダリングされます。前のフレームの状態、クロック、シードなしの乱数は使用禁止。高コストな固定処理は init に記述。
  • キャリアはすべてのシーンを同じ画面位置で開始・終了する(例では赤い風船、(700, 560)、半径64)。次のシーンはその位置から正確に広がる円で明らかになり、すべてのトランジションが自動的にマッチカットになります。
  • ヒーローはすべてのスタイルでプロポーションを維持する。 レンダリングを変更し、形状は変更しないでください。
  • 話す人は動く、そして他の人は動きません。リップシンクは不要。バウンド、くちばし、点滅カーソルで十分です。
  • 画面上の数字は真実であること。 600行や512レイと表示するカウンターは、そのフレームが実際に使用したものを示します。
  • 動作には原因があること:ジャンプ前の予備動作、着地時のつぶれ、フレームへの衝撃の影響、オチの前の3分の1秒から半秒の静止。
  • 字幕はエンジンの担当。シーンはその帯域から顔や手を遠ざけてください。

コマンド(フィルムフォルダから実行)

npm install                                             # three + puppeteer-core; Chromeがデフォルトの場所にない場合はCHROME_PATHを設定
node tools_styles8.mjs                                  # スタイルボード:スタイルごとに1枚の静止画 -> out/styles8/board.jpg
python tools_balloon_vo.py                              # 音声 + タイムライン(ELEVENLABS_API_KEYが必要); --timeline でタイムラインのみ再構築
node tools_balloon.mjs --scene=book --sheet=auto        # 1シーンの8枚の静止画 + タイルシート
node tools_balloon.mjs --glide=book                     # 1シーンの最終ポーズ
node tools_balloon.mjs --film --sheet=13.1,24.8         # 指定秒数でのフィルム全体の静止画(シーン境界で使用)
bash balloon/final.sh                                   # すべてのシーンをレンダリング、サウンド、結合、マルチプレックス;`final.sh comic pixel` でそれらのみ再レンダリング

Node 18+、Chrome、ffmpeg、Python 3(requests numpy soundfile pyloudnorm が必要)が必要。画像にはAPIキーは不要。音声とサウンドにはElevenLabsのキーが必要です。

リファレンスファイル

ファイル読むタイミング
references/styles.mdスタイルを選択する時、または13スタイルのいずれかでシーンを構築する時
references/story.mdスクリプトを書く時
references/voices.mdキャスティング、録音、タイミング調整
references/sound.md効果音、環境音、ミックス
references/checking.mdシーンまたはフィルムが完了したと言う前
references/parallel-build.md複数のシーンを同時に構築する場合、またはマシンのGPUが弱い場合
example/balloon/CONTRACT.md常に、最初のシーンの前に

関連スキル