Communitygithub.com

yenceesanjeev/2d-character-sketch

シンプルな2D漫画キャラクターと短いトーキングスケッチ動画を、このマシン上で完全にコードで描画します。キャラクターのデザイン、キャラクターシートの作成、会話アニメーション、コメディスケッチの制作に使用します。

2d-character-sketch とは?

このスキルは、Node.jsとSVGを使って2Dキャラクターをコードで描画し、リップシンク付きのMP4動画を生成するツールです。特徴は、キャラクターごとに約10行の設定JSONを書くだけで、共通の目・口・手・表情・ポーズが利用できるため、新しいキャラクターをすぐに動かせる点です。生成コストはゼロで、同じ入力から常に同じ動画が得られます。主に、キャラクターシートの作成(PNG)、単一キャラクターの会話クリップ、複数キャラクターによるスケッチ動画の3つの機能を提供します。音声エンジンは、macOS標準のsay(無料)、OpenVoice(無料・ローカル)、ElevenLabs(有料・高品質)、Sarvam(有料・インド言語)から選択可能で、ユーザーが自前の録音も使えます。対応プラットフォームはmacOS/Linuxで、Node 20以降、rsvg-convert、FFmpegが必要です。キャラクターは立ったままか座ったままで、歩行や物の受け渡しはできず、カメラアングルは正面固定ですが、最大3人までのフレーミングと5つの標準部屋が用意されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yenceesanjeev/2d-character-sketch/tree/HEAD

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

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

ドキュメント

2Dキャラクタースケッチ

このスキルのフォルダにある1つのツール、scripts/sketch.mjs は3つの役割を担います:

ジョブあなたが書くものあなたが実行するコマンド得られるもの
キャラクターを構築characters/<id>.jsonsheetcharacters/<id>.sheet.png
キャラクターに話させるなしsay <id> "言葉"out/say-<id>-<最初の言葉>/sketch.mp4
スケッチを作成sketches/<name>.jsonrender sketches/<name>.jsonout/<name>/sketch.mp4

すべての絵は、コードによってSVGとして書かれた平らな図形で構成されるため、レンダリングにコストはかからず、同じ入力からは常に同じ動画が得られます。キャラクターは色と選択肢の約10行で定義されます。目、口、手、表情、ポーズは全員で共有されるため、新しいキャラクターでもすぐに演技ができます。

初回実行前

チェックを1回実行してください。以下のSKILLはこのスキルのフォルダを示します。

node SKILL/scripts/sketch.mjs doctor

Node 20以降、rsvg-convert(librsvgから)、およびFFmpegが必要です。不足しているものがある場合は、インストールコマンドが表示されます。ソフトウェアのインストール前に確認を取ってください。npmパッケージのインストールは不要です。

すべてのコマンドはユーザーの作業フォルダから実行するか、コマンド名の後ろに --dir <フォルダ> を追加してください。ツールは以下の場所のみを読み書きします:

characters/   キャラクターごとに1つの <id>.json と、そこから描画されたシート
sketches/     スケッチごとに1つの <name>.json
voice/        録音ファイル。変更されていない台詞は2度生成されないように保持されます
out/          レンダリングごとに1つのフォルダ: sketch.mp4, contact-sheet.png, plan.json, run.json

--draft レンダリングは専用のフォルダ out/<name>-draft/ に出力され、フルサイズのものを上書きしません。同じスケッチを同じサイズで再度レンダリングすると、前のものが置き換えられます。

キャラクターを構築する

最初に references/character.md を読んでください。フィールド、ルックのルール、チェックすべき欠点が記載されています。

  1. characters/<id>.json を書きます。リファレンスの例から始めて、この人物を特徴づける部分だけを変更します。
  2. シートを描画します: node SKILL/scripts/sketch.mjs sheet <id>。idを指定しない場合はすべてのキャラクターを描画します。
  3. PNGファイルを自分で開いて確認してください。 ターンアラウンド、静止顔、いくつかの表情をリファレンスのチェックリストと照らし合わせて確認します。
  4. 納得できるまで修正して再描画します。誰かに見せる前に、何度かパスを繰り返してください。
  5. シートを提示し、変更した点とまだ弱い点を説明します。

2人以上のキャラクターがいる場合、sheet を実行するたびに characters/cast.png も再描画され、全員が並んだ状態になります。これを利用して、シルエット、髪の色、トップスの色が異なり、別の人物として認識されるか確認してください。

キャラクターに話させる

node SKILL/scripts/sketch.mjs say mira "It identifies as tea." --face smug --pose offer

オプション: --face <表情>、--pose <ポーズ>、--frame wide|medium|close、--set <部屋>、--draft。これらの名前はキャラクターのシートと references/sketch.md にリストされています。表情やポーズを試すときは --draft を使用し、最終的なクリップを提供するときだけ --draft なしで実行します。異なる台詞ごとに、最初の言葉にちなんだ名前のフォルダが作成されます。動画を見せる前に、そのフォルダ内の contact-sheet.png を確認してください。

複数キャラクターのスケッチを作成する

最初に references/sketch.md を読んでください。ファイル形式、部屋、フレーミング、演技の語彙、音声ルールが記載されています。

  1. 各キャラクターを構築し、characters/cast.png を確認します。
  2. sketches/<name>.json を書きます:部屋、左から右へのキャスト、そしてショットのリスト。各ショットにはフレーミングと台詞があります。
  3. ドラフトをレンダリングします(半分のサイズで高速):node SKILL/scripts/sketch.mjs render sketches/<name>.json --draft。
  4. out/<name>-draft/contact-sheet.png を開いて確認します。 台詞ごとに1枚の画像が含まれています。フレーミング、表情、誰が誰を見ているかを確認します。
  5. スケッチファイルを修正し、再度ドラフトをレンダリングします。1つのスケッチを直すために scripts/ を変更しないでください。
  6. フルサイズでレンダリングし(--draft を削除)、ユーザーに動画のパスを渡します。

ファイルに誤りがあると、すべての問題と許可された値のリストが表示されて実行が停止します。すべて修正してから再実行してください。

音声

ユーザーが他の音声エンジンを指定しない限り、無料のデフォルトを使用します。ユーザーが「OpenVoiceを使う」「ElevenLabsを使う」「Sarvamを使う」などと明示した場合、--voice <エンジン> を渡します。

スケッチをリアルに聞こえるようにしたい場合は、ElevenLabsを推奨します。 無料音声は平板に読み上げられ、台詞の面白さや信憑性の大部分は伝え方にかかっています。ユーザーが実際の人のように聞こえるスケッチを希望する場合、または公開予定の場合は、一度だけElevenLabsがその用途に適した音声であり、有料であることを伝えてください。その後、選択はユーザーに委ねます。ステージングとタイミング調整はまず無料音声で行い、有料音声は台詞が確定した後にのみ生成します。

エンジンコストユーザーが要求した場合
say無料Macのデフォルト。ロボット的ですが、タイミング確認に適しています。
openvoice無料、ローカルオプションインストール(約2GB)。最初に確認を取り、その後 bash SKILL/scripts/install-openvoice.sh を実行します。5つの英語音声。インストール後はMac以外でのデフォルトになります。
elevenlabs有料最もリアルで、完成したスケッチに推奨するエンジン。ユーザーのAPIキーと、各発話キャラクターファイル内の音声IDが必要です。
sarvam有料ユーザーのAPIキーと、各発話キャラクターファイル内の話者指定が必要です。インド英語と10のインド言語に対応。
none無料無音で、字幕と推測された口の動きが付きます。

台詞は、"audio": "path.wav" とすることで、ユーザー自身の録音を指定することもできます。

有料音声のルール:

  1. APIキーはユーザー自身が追加するものであり、あなたが追加するものではありません。 ユーザーは作業フォルダの .env.local に ELEVENLABS_API_KEY=... または SARVAM_API_KEY=... の1行を追加するか、すべてのプロジェクトで使用するために ~/.2d-character-sketch/keys.env に追加します。チャットでキーを要求したり、ファイルに入力したり、印刷したりしないでください。doctor コマンドはキーが見つかったかどうかとその場所を表示します。
  2. gitリポジトリ内のキーファイルは、gitで無視されるように設定する必要があります。 そうでない場合、ツールはキーの使用を拒否し、.gitignore に追加すべき内容を表示します。
  3. 上限なしには何も送信されません。 最初に --max-chars なしで実行します。ツールは送信するテキストの文字数を表示し、実際には何も送信しません。その数値をユーザーに伝え、承諾を待ってから --max-chars <その数値> を渡します。

詳細、価格、音声リストは references/sketch.md にあります。

ルール

  • シートやコンタクトシートは、ユーザーに見せる前に自分で確認してください。ツールはファイルが有効かどうかはチェックしますが、絵が良いかどうかはチェックできません。
  • スケッチファイルがソースです。動画を変更するには、ファイルを変更して再度レンダリングしてください。
  • ユーザーが削除を指示しない限り、以前のレンダリングは保持してください。見せたバージョンを残したい場合は、次のバージョンを別のスケッチ名(例:tea-v2.json)で保存してください。
  • 粗い点(無料音声、音量に追従する口の動き、修正できなかったフレーミングなど)は率直に伝えてください。
  • ユーザーがこの会話で依頼していない限り、何もインストールせず、有料サービスにも何も送信しないでください。

制限事項

リクエストに該当する場合、最初にこれらの制限を伝えてください:

  • キャラクターは立ったまま、または座ったまま動きません。歩いたり、物を拾ったり、誰かに触れたりすることはできません。
  • ひげ、口ひげ、帽子、ロングコート、ドレス、スカートはありません。髪型は8種類のスタイルのいずれかで、服装はトップス、ズボン、靴のみです。リクエストにこれらが必要な場合は、その旨を伝え、最も近い代替案(例:ひげの代わりに大きな髪と太い眉毛)を提案してください。
  • 組み込みの部屋は5つ:plain、home、park、office、table。その他の場所には、あなたが描いて set に名前を付けたSVG背景が必要です。
  • 手に持てる小道具は3つ:電話、マグカップ、ペン。手に表示できるのはこれだけです。
  • カメラアングルは1つ(正面)。フレーミングは同じ平面描画をトリミング・ズームします。
  • 最大3人のキャラクターがきれいにフレーム内に収まります。それ以上の場合、クローズアップでは隣のキャラクターの端が見えます。
  • 新しい髪型、ポーズ、表情、部屋を追加するには、scripts/ 内の描画コードを編集する必要があります。これはユーザーが依頼した場合にのみ行ってください。

関連スキル