AIBit - オープンソースプロジェクトの発見 AIBit - オープンソースプロジェクトの発見

手描きのストーリーイラストをHyperFramesで35～45秒の線画表示動画に変換

HyperFramesを使用して、7～9枚の手描きストーリーイラストを、線画表示と段階的な彩色効果を備えた35～45秒の縦型動画に変換する方法を学びます。

はじめに

手描きイラストから魅力的なショート動画を作成するのは、特に洗練された線画表示と段階的な彩色効果を実現しようとすると、面倒なプロセスになることがあります。xiejunjie524によるオープンソースプロジェクトhanddraw-story-videoはこのワークフローを簡素化し、7～9枚の手描きストーリーイラストを、スムーズな左から右への線画表示とその後の段階的な彩色を備えた35～45秒の縦型動画に変換できます。

このツールは、フレームごとのアニメーションを生成するフレームワークであるHyperFrames上に構築されており、アニメーション制御にGSAPを使用しています。手描きストーリーの動画制作パイプラインを自動化したい開発者やコンテンツクリエイター向けに設計されています。

主な機能

  • デフォルト出力: 40秒、720×960解像度、30fps — TikTok、Instagram Reels、YouTube Shortsなどの縦型プラットフォームに最適化。
  • 単一ソース画像: 各シーンで1つの独立したカラーイラストを使用。ツールがローカルで完全に位置合わせされた線画バージョンを抽出します。
  • 一貫したアニメーション方向: 線画と彩色の両方が左から右に進行し、画像生成モデルへの繰り返しの呼び出しを回避。
  • オプションの字幕: ストーリーの字幕やシーン内のテキスト要素をサポート。
  • 自動検証: 再生時間、重複アセット、字幕行数、フォントサイズ範囲をチェック。
  • ベンダーロックインなし: 特定の画像生成サービス、音楽ソース、プライベートAPIに縛られません。

前提条件

始める前に、以下がインストールされていることを確認してください：

  • Python 3.10+
  • Node.js 18+
  • FFmpeg
  • HyperFrames
  • GSAP 3（npm経由でインストール、そのライセンスに従う）

クイックスタート

1. リポジトリをクローン

git clone https://github.com/xiejunjie524/handdraw-story-video.git
cd handdraw-story-video

2. 仮想環境をセットアップ

python -m venv .venv
# Windowsの場合:
.venv\Scripts\activate
# macOS/Linuxの場合:
source .venv/bin/activate

3. 依存関係をインストール

pip install -r requirements.txt
npm install gsap

4. ストーリー設定を作成

テンプレートをコピーしてストーリーの詳細を記入：

cp templates/story-template.json story.json

5. イラストを準備

各シーンに1枚の1Kカラーイラストが必要です。次に線画を抽出：

python scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png

6. HyperFramesとGSAPをセットアップ

mkdir -p hyperframes/assets/vendor
cp node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

Windows PowerShellの場合：

New-Item -ItemType Directory -Force hyperframes/assets/vendor | Out-Null
Copy-Item node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

7. 動画を生成

画像と適切にライセンスされたBGMをhyperframes/assets/に配置し、パスがstory.jsonと一致することを確認してから実行：

python scripts/build_story.py story.json hyperframes/index.html --check-assets
npx hyperframes check hyperframes/index.html --json
npx hyperframes render hyperframes/index.html --output renders/story-v1.mp4 --workers 1

重要: 古いレンダリングを上書きしないでください。毎回新しい出力ファイル名を使用してください。

ストーリー設定

最小限のシーン設定は次のようになります：

{
  "id": "scene-1",
  "duration": 5,
  "caption_lines": ["午前4時、", "彼はいつもあの朝食店を通りかかる。"],
  "line_image": "assets/images/scene-01-line.png",
  "color_image": "assets/images/scene-01-color.png",
  "crop": {"scale": 1, "x": 0, "y": 0}
}

完全なフィールドリファレンスとストーリーボードのルールについては、docs/story-spec.mdを参照してください。実行可能な例はexamples/soy-milk-at-4am/story.jsonにあります。

シーン構成のガイドライン

最良の視覚効果を得るには、次のガイドラインに従ってください：

  • シーン数: 8シーン、各約5秒。各シーンは明確な構成を持つ必要があります — 時間を埋めるためにトリミングやスケーリングに依存しないでください。
  • 被写体の配置: メインの被写体はフレームの下部45%～55%に配置し、十分な余白（紙のような背景）を残します。
  • 複雑さ: フレームあたり最大2～3人のキャラクター、2つの主要な背景アンカー。群衆、密集した建物、大きな黒い線は避けてください。
  • 字幕: 最大3行、各行は約18文字以内。
  • 音楽: ストーリーに合った音楽を選び、特定のBGMをテンプレートにハードコードしないでください。

Codexスキルの統合

リポジトリルートはCodexスキルとして構成されています。$CODEX_HOME/skills/handdraw-good-deed-storyにコピーまたはリンクし、「線画表示と段階的な彩色を備えた40秒の心温まるストーリーを作成」のようなプロンプトでトリガーできます。

ライセンスと帰属

  • コード: MITライセンスの下で公開。
  • サードパーティアセット: 生成された画像、フォント、GSAP、音楽、その他のサードパーティ素材は、自動的にはMITライセンスの対象になりません。それぞれのライセンスと条件に従う必要があります。
  • シークレットは含まれていません: リポジトリには、APIキー、ブラウザセッション、参照動画、ダウンロードした音楽、完全なレンダリング履歴は含まれていません。

結論

handdraw-story-videoプロジェクトは、魅力的な手描きストーリー動画を作成するための合理化されたオープンソースパイプラインを提供します。線画抽出、アニメーション方向、検証を自動化することで、時間と労力を大幅に節約します。より大きなワークフローに統合したい開発者でも、一貫性のある高品質な動画を制作したいコンテンツクリエイターでも、このツールは強固な基盤となります。

リポジトリをクローンし、イラストを準備し、クイックスタートガイドに従って始めてください。少しの設定で、手描きのストーリーをソーシャルメディア向けの洗練されたショート動画に変換できます。

ソース

xiejunjie524/handdraw-story-video: 手描きのストーリーイラストをHyperFramesで35～45秒の線画表示と段階的な彩色動画に変換