hand-drawn-canvas-animation

手描きキャンバスアニメーション

描線と動きの両方が手描きのように感じられる作品を制作します。 キャラクターアニメーションでは、全身ポーズを描いた絵、表情豊かなストローク、 意図的な露出を基本とします。リグやテクスチャを用意する前に、キーと ブレークダウンを設計します。リグは造形や接触のガイドとして使えますが、 最終的なポーズは描画で表現する必要があります。レンダラーには Canvas 2D を 使用します。作成した形状には SVG パスデータを使用できます。Blender や動画 モデルは必要ありません。WebGL は依存関係ではありません。ローカルモジュール とオフライン MP4 を含む HTML 作品を納品します。長さと形式は概要に従います。 短くても完成度の高いアクションを、長編作品の出発点とします。

適切な参考資料を選ぶ

• 5 つのルックと品質基準については、style.md を読んでください。
• ルックや手法を組み合わせた作品では、mixed-media.md を読んでください。別々のスタイルサンプルを描く前に、素材を変える理由と 変化を通して引き継ぐ要素を計画します。
• ストローク主導のキャラクターワークフロー、全身セル、補助付き中割り、 露出シートの基本については、redrawn-animation.md を読んでください。
• キャラクターやカメラをアニメーションさせる前に、motion.md を読んでください。
• 露出トラック、安定したストローク、接触 IK、任意の変形や造形補助のための マテリアルについては、studio.md を読んでください。
• コア API と書き出しについては、architecture.md を読んでください。
• 写真の入手、アンカー、マスキングについては、doodle.md、 トレースした動きについては、found-motion.md、 これらのメディアについては、sand.md または paper3d.md を読んでください。
• palettes.md、scenes.md、 reference-films.md には、任意のパレット、 シーン演出、歴史的な参考資料が含まれています。これらは必須の作品構成では ありません。

ワークフロー

1. brief-template.mdに記入します。定型的な選択事項は推定し、結果に重大な影響を与える決定が不足している場合に限り確認します。使用する素材と動きの参考資料は、それぞれ別に指定します。メインのアスペクト比を決めます。別形式にする場合は、キャンバスサイズを変えるだけでなく、構図の見直しが必要です。
2. プロジェクトフォルダーを1つ作成します。assets/core.js、assets/studio.js、assets/cels.js、任意のassets/materials.js、scripts/render.mjs、scripts/package.jsonをそのフォルダーにコピーします。キャラクターを制作する場合は、examples/sketchbook-bird.htmlを参考に、全身を描いたオリジナルのキャストを作成します。このサンプルのインポートでは../assets/を使用しています。単独のプロジェクトで使う場合は、ローカルのモジュールパスに変更してください。assets/film-template.htmlは旧式リグのデモで、ランタイムの配線を確認するのには役立ちますが、標準のビジュアルモデルではありません。npm i --no-audit --no-fundでローカルのレンダラー依存関係をインストールします。システムのChromeとffmpegが必要です。再利用可能なエンジンの変更はスキルに反映し、動画のコピーには加えないでください。
3. 作画を確立します。シルエット、プロポーション、表情、必要なアングル、線の階層、見分けやすいストロークの動き、いくつかの素材サンプルを用意します。納品サイズと240 pxの両方でレンダリングします。ポーズが不明瞭では、素材で補うことはできません。単純なプリミティブでは表現できない場合は、意図を持った曲線と差し替え用の作画を使います。
4. 最も難しい動きのキーとブレークダウンを計画します。接触、視線、予備動作、重心移動、反応を示します。表現に必要なだけコントロールを使います。パーツ数やパラメーター数に決まりはありません。全身を描いた有限の露出シートを作成します。幾何学的な中割りは対応する形にのみ使い、重なりの変化、頭の角度、圧縮されたシルエット、表情は描き直します。まず装飾的なテクスチャを加えずにタイミングを確立します。剛体の動きやモーター駆動の動きにバネを追加しないでください。
5. 映画全体の制作に入る前に、代表的なショットを1つ完成させます。通常速度での再生、連続フレームのストリップ、静止画を評価します。シーンを増やす前に、解剖、間隔、接触、線の安定性を修正します。
6. ビートシートを使って残りのショットを作成します。開始位置、長さ、視聴者が注目するもの、主な動き、カメラ、音の合図を記します。カット、トランジション、設計図風のアングル、モンタージュ、アンカー、締めくくりは演出上の選択です。それぞれの動きが伝わるだけの時間を確保します。素材を切り替える場合は、キャラクターの動きや位置、または物理的なオブジェクトを切り替えの前後でつなげます。パレットを変えるだけでは新しいスタイルを確立できません。印象的でも互いにつながりのないショットを並べても、物語にはなりません。
7. レンダリングして確認します。まず--grid 24を使い、次に速い動きや接触の前後で--strip 48,12を使い、細部をフルサイズで見るには--only 48を使います。MP4と生成されたスコアには、フルレンダラーを実行します。コンタクトシートだけでは動きの品質確認を完了できません。再生できない場合は、その制約を明記してください。
8. ソース、依存関係／アセット、MP4、コンタクトシート、既知の残りの制約を納品します。長さ、寸法、フレーム数、デコードの成功を確認します。コードやチェックリストに合格したという理由だけで、映画をスタジオ品質と評価してはいけません。選んだビジュアル参考資料と照らし合わせ、実際の成果物を評価してください。

制作上の不変条件

• defineFilm のデフォルトは 24 fps です。シーンには連続値の tau が渡されます。i は pulse、boil および古いクリップで使われる、従来の 12 Hz インデックスのままです。アクションごとに エクスポージャートラックを使ってください。1コマ打ち、2コマ打ち、3コマ打ち、止め絵はいずれも有効です。
• カメラのタイミング、描画の露出、ルートモーションを分けてください。特にトラッキングショットでは、それらを 組み合わせた画面上の動きを確認してください。二重に量子化しないでください。
• 乱数はシードで固定されています。描画ごとに一度だけストロークを作成し、安定したセマンティック ID を使ってください。 止め絵では描線も止めてください。シードの変更は出力フレームごとではなく、新しい描画に合わせてください。変形を 伴うワークフローでは、安定したレスト空間の描線を使ってください。テクスチャが紙、オブジェクト、画面のどれに属するかを指定してください。サンプリング位置やトポロジーが変わると、シードを固定していてもテクスチャが泳ぐことがあります。
• 同じ固定ランタイムでシークしたとき、各フレームが再現できなければなりません。砂は固定ステップのシミュレーションと 上限付きのチェックポイントを使います。フォントやブラウザーの違いによってマシン間でピクセルが変わることがあります。再現性が重要な場合はフォントを同梱するか、パス文字を使ってください。エクスポート前にフォントや写真の読み込みが完了するようにしてください。
• 計画された解除のタイミングまで、物理的な接触を維持してください。IK は到達できないターゲットを制限します。返された誤差を確認し、骨を伸ばすのではなくポーズを修正してください。
• 外部メディアの出典とライセンスを記録してください。用途に応じた納品が許可されているアセットのみを使ってください。オプションの SVG はパスのジオメトリであり、自動的にリグが設定されるわけではありません。

品質基準

描画： シルエットが明確であること。どのアングルでもプロポーションに一貫性があること。外線と内線の太さが制御されていること。筆圧、先細り、線の途切れに意図があること。不自然な接線や関節の切れがないこと。テクスチャを重ねただけの、楕円を組み合わせたような手足は避けてください。きれいな曲線や塗りの位置合わせは、選択した画材に適していれば問題ありません。ただし、デフォルトのスケッチでは描画のジェスチャーが見える状態を保ってください。揺れ、位置ずれ、コマの変化には意図が必要です。

動き： 描き直したように感じられる全身ポーズ、意味のあるキーポーズ、読み取りやすいブレイクダウン、意図的なスペーシング、説得力のある重量感と接地した接触。オーバーシュート、カメラのトラッキング、トポロジーの変化、素早い動きを、通常速度とコマ送りの両方で確認してください。必要に応じて、設計されたスマアを使ってください。従来の smear() は残像を作るもので、新しい描画を作るものではありません。

素材： インクのハッチングは形状に沿わせ、グラファイトは筆圧とトーンに配慮し、リソグラフの版は一貫して位置合わせしてください。画面上のインクはベタ塗りでもかまいません。落書きは写真と相互作用させてください。過度の粒状感、ラスター位相の変化、意図しないちらつきを避けてください。ミクストメディア作品では、スタイルボードだけでなく、アクションとしての切り替わりを確認してください。天候がシーンを動かすなら、その力は背景とキャラクターの両方に影響させてください。紙を広げるなら、折りたたまれた開始状態、ヒンジ、取り付けられた台座を見せてください。

納品： ページエラー、意図しない空白フレーム、アクションの途切れ、古いフレーム、未完成の最後の文字がないこと。クロージングカードが指定されている場合は、表示を終え、読むのに十分な時間そのまま保持してください。PNG だけでなく、エンコード済みの動画を確認してください。

動作例とコマンド

examples/becoming-phoenix/phoenix.html は、オリジナル音楽を含む60秒の完全な映像です。5つすべてのルックと、砂や紙への投影をひとつの物語に組み合わせています。動く嵐のinkScene、実際のプリントがページになるensurePrintedPage、羽と尾を段階的に開くunfoldPhoenixを確認してください。ブランディングはこの例に固有のものです。新しい要件に役立つ技法を使い、ショットリストをそのまま使わないでください。

examples/sketchbook-bird.htmlは、全身のキー9枚、補間の補助、差し替え式のまばたき、タイミングシートを含む、鉛筆とインクによる主要な作画研究です。examples/weight-study.htmlは、--look ink|pencil|riso|screen|doodleを指定して5つのルックでレンダリングする、7秒の接触と重さに関する補助的な研究です。これは仕組みを示すものであり、描き直したキャラクターの美的目標や、長編映画の品質を証明するものではありません。examples/material-studies.htmlでは、砂の変位とページカールのクローズアップを追加しています。以前の例も、特定のシーン演出には引き続き役立ちます。上記の各例への参照を確認してください。

node scripts/render.mjs examples/sketchbook-bird.html --look pencil --grid 18 --out /tmp/pencil-preview
node scripts/render.mjs examples/sketchbook-bird.html --strip 58,24 --out /tmp/motion-preview
node scripts/render.mjs examples/sketchbook-bird.html --width 1920 --out /tmp/drawn-film
node scripts/verify.mjs

レンダラーは--arが指定されていない限り、映像のアスペクト比を維持します。各フルレンダリングでは専用のフレームをステージングし、エンコードが成功した後にその映像の出力を置き換えます。古いPNGによって、短くなった改訂版が延長されることはありません。--grid、--strip、--onlyはプレビュー用のモードであり、フルMP4を置き換えません。

Remotionとの統合には、タイムベース変換を使用します。 drawFrame(Math.min(__NDRAW - 1, Math.floor(frame * __fps / compositionFps))) 映像とコンポジションの両方が24 fpsの場合は、単にdrawFrame(frame)となります。