2D ボーンアニメーション

このチュートリアルでは、PixelOver で 2D ピクセルアートのボーンアニメーションを作成する方法を学びます。
1 枚のアートワークから始め、パーツに分割し、ボーンでリギングし、アニメーションして、最終的なスプライトアニメーションをエクスポートします。

前提条件

このチュートリアルには、アニメーションするアートワークが必要です。
私は Smiley-Fakemon のアートワークを使っています。

リギングの前に、アートワークを別々のパーツ（頭、胴、翼、脚など）に分割する必要があります。
やり方がわからない場合は、まずこのチュートリアルをご覧ください:
描画をオブジェクトに分割する

次に、PixelOver を使ってアートワークをピクセル化し、ボーンでアニメーションします。

1. アートワークの分割と塗りつぶし

最初のステップは、アートワークを独立したパーツに分割することです。
これらのパーツは後で別々にアニメーションされます。

典型的なパーツには次があります。

• 頭
• 胴
• 翼
• 脚
• しっぽ
• アクセサリー（ある場合）

隠れた領域を塗りつぶす（重要）

分割した後、各パーツの後ろの隠れた領域を塗りつぶす必要があります。

例えば:

• 翼が胴の一部を隠す
• 胴が翼の付け根の一部を隠す
• 脚が足の一部を隠すことがある

たいていは素早い塗りつぶしで十分です。アートワークをピクセル化すると、小さな不完全さは目立たなくなるためです。

各パーツをエクスポートする

分割した各パーツを、別々の画像ファイルとしてエクスポートします。
この例の画像はこちらからダウンロードできます:
分割したパーツをダウンロード（.zip）

2. 画像を PixelOver にインポートする

PixelOver を開き、すべてのパーツ画像をプロジェクトにドラッグ＆ドロップします。

インポート時は、別々の画像として（アニメーション画像としてではなく）インポートすることを選びます。

元の完全なアートワークを参照画像としてインポートすることも推奨します。

3. アートワークをリサイズする（任意だが推奨）

必要なら、複数の画像を一度に選択（Shift + 左クリック）し、まとめてリサイズできます。

これは、シェーダーを適用する前に、希望のピクセルアートのスケールにすばやく合わせるのに便利です。

4. ピクセルアートシェーダーを適用する

ピクセルアートの見た目を得るために、シェーダーを適用します。

次のことができます。

• 上部バーからプリセットシェーダーを読み込む
• または右パネルでシェーダーのパラメーターを調整する

5. リギング: ボーン構造を作成する

すべての画像の選択を解除してから、ボーンツールを選択します。

ボーンを作成する

クリック + ドラッグでビューにボーンを作成します。

清潔な階層（親 → 子）を作成します。例:

• Root
  • Bone_Torso
  • Bone_Head
    • Bone_Wing_L
    • Bone_Wing_R
    • Bone_Leg_L
    • Bone_Leg_R
    • Bone_Tail

画像をボーンの下に親子付けする

この段階では、ボーンは自動的に画像に影響しません。
スプライトパーツをボーンに結び付けるには、シーンツリーで画像をボーンの下に親子付けするだけです。

例:

• Bone_Torso
  • Torso_Image
  • Bone_Head
    • Head_Image

シーンツリーで切り取り/貼り付け、またはドラッグ＆ドロップの親子付けを使えます。

すべてのパーツが正しく親子付けされると、リグは完全な階層のように見えるはずです。

この時点で、リギングは完了です。
これでアニメーションを始められます。

6. アニメーション

インターフェイス下部のアニメーションパネルを開きます。

アニメーションの名前を変更してから、次を構成します。

• 長さ
• FPS（1 秒あたりのフレーム数）

最初のキーを作成する

すべてのボーンを選択してから、キーアイコンをクリックして、次のキーを作成します。

• 位置
• 回転

これで、フレーム 0 のベースポーズが作成されます。

さらにポーズを追加する

タイムラインカーソルを前に進めます。
ボーンをポーズして、次のフレームを作成します。

REC ボタンが有効なら、ボーンを変更したときにキーが自動的に作成されます。

キーを複製して作業を速める

時間を節約するために、キーを選択して、現在のカーソル位置に複製できます。

ボーンを初期状態のポーズにリセットする

いつでも、ボーンを初期状態の位置に戻すよう強制できます。

アニメーション例（ジャンプ）

この例では、キャラクターがジャンプを行います。

遷移を改善する

アニメーションを滑らかにするには、次のことができます。

• キーのタイミングを調整
• キーにイージングを適用
• 遷移を手動で微調整

7. エクスポート

エクスポートの前に:

• アニメーションの FPS が正しいことを確認
• 必要ならば右上のトグルでボーンを非表示にする（プレビューが良くなります）

次に、エクスポートダイアログを開きます。

プロジェクト > エクスポート...

次の形式でエクスポートできます。

• PNG シーケンス
• GIF
• スプライトシート

さらに、次のこともできます。

• ピクセルサイズを再スケーリング
• アニメーションをフォルダに分ける
• 生成されるフレーム数をプレビュー

最終結果:

このプロジェクトとその他の例は、PixelOver のダウンロードファイル（demo を含む）にあります:
https://deakcor.itch.io/pixelover#purchase