チュートリアル:グラフィックコース#2 – 2Dボーンベースのキャラクター

このコースでは、サンプルとして含まれているプレイヤーオブジェクトの修正方法について学びます。
ここでは、2D ボーンリグキャラクターの基本的な操作に焦点を当てます。

以前のコースと同様に、このチュートリアルでは最初のレッスンで使用した同じチュートリアルプロジェクトを使用します。
まずはプロジェクトを開いて準備を整えてください。

ステップ 1: スキンを置き換えましょう


1. 添付された画像をダウンロードします:


2. P_01_stickman_skin.png をプロジェクトのファイルシステム内の任意の場所にドラッグ&ドロップしてインポートします。


3. Player シーン (Object_Sampleplayer.tscn) を開きます。


4. シーンツリーで、以下へ移動します:

BoneAnimationRoot > Polygon
次に、Mantle_down から Hand_R までのすべてのノードを選択します。


5. インスペクターで、P_01_stickman_skin.pngテクスチャフィールドにドラッグ&ドロップします。


6. プレイヤーキャラクターが黒い棒人間として表示されるようになります。


7. F5 キーを押すか、:play_button: ボタンをクリックしてテスト再生します。

動く棒人間のキャラクターが表示されるはずです。


8. 元の外観に戻すには:

ファイルシステム > templates > objects > characters > P_01 > P_01_mat_000.png に移動し、
手順 4〜5 を繰り返して元のテクスチャを再適用します。


解説

:wrench: ノードの概要

ノード 説明
BoneAnimationRoot2D ACTION GAME MAKER がフィルターやモーショントレイルなどのエフェクトのために 2D ボーンキャラクターを認識するために必要な特殊なノードです。すべての Skeleton2DPolygon2D ノードはこのノードの下に配置する必要があります。
Skeleton2D 2D ボーンを定義する Godot ノードです。このノードの変換(位置、回転)は、リンクされた Polygon2D テクスチャに影響を与えます。
Polygon2D (Mantle_down ~ Hand_R)これらのノードは、ポリゴンメッシュと UV マッピングを使用してキャラクターの視覚的な部分を定義し、スキンの表示を行います。

:artist_palette: Polygon2D とテクスチャについて

Polygon2D ノードは、UV システムを使用して共有画像の一部を切り取るために使用されます。

見てみましょう:

  1. ArmL ノードを選択します。
  2. 上部ツールバーのUVボタンをクリックします。
  3. UV エディタが表示されます。
    多角形形状の選択範囲は、ArmL に使用されるテクスチャの領域を示しています。
  4. UV 座標は変更されないため、カスタム画像で同じレイアウトと寸法を維持することで、新しいスキンを簡単に作成して適用できます。

:paintbrush: カスタムスキンのガイド

以下は、参考用のデフォルトスキンのレイアウトです:

P_01_mat_000.png(男性キャラクター):

P_02_mat_000.png(女性キャラクター):

独自のスキンを作成する際は、上記と同じレイアウトに従ってください。
これらをガイドとして使用して、ベーススキンのテクスチャを変更または設計できます。

ステップ 2: アニメーションを追加しましょう


1. シーンウィンドウで、AnimationPlayer ノードを選択します。

下部パネルが自動的に Animation ビューに切り替わります。


2. アニメーションパネルの左上にある :play_button: 再生 ボタンを押します。

キャラクターが少し動くはずです—これは 001_Idle アニメーションが再生されているためです。


3. アニメーション名 001_Idle をクリックします。

47 個のプリ登録されたアニメーションがあります。異なるものを試してみましょう!
キャラクターが白と黄色の骨に基づいて動くのが見えるはずです—これらの骨の動きは、以下に示す トラック を使用して制御されます。


4. 新しいアニメーションを作成しましょう。

パネル上部の Animation ドロップダウンをクリックし、New を選択します。


5. ダイアログが表示されるので、アニメーションの名前を入力し、OK をクリックします。


6. 新しいアニメーションが作成されましたが、まだ空です—トラックはまだありません。

トラックを追加するには:

  • BoneAnimationRoot2D \u003e Skeleton 配下にある B_Hip から B_Chain までのすべての Bone2D ノードを選択します。
  • その後、ツールバーにある :old_key: キーを挿入 アイコンをクリックします。


7. プロンプトが表示されます:「42 の新しいトラックを作成しますか?」— Create をクリックします。

21 本の骨それぞれに、位置と回転 のトラックが追加されます。


8. アニメーションの編集を始めましょう。

青い垂直線が現在の時間マーカーを示しています。
それを 0.6 秒付近 までドラッグします。


9. 次に、右腕をアニメーションさせましょう。

シーンウィンドウで B_Arm_R を選択します—これは右上腕の骨です。


10. インスペクター で、Node2D \u003e Transform \u003e Rotation の値を調整します。

腕が回転するのを見るはずです。


11. 角度が決まったら、再び :old_key: キーを挿入 アイコンをクリックします。

何も起こったように見えないかもしれませんが、現在の回転が 0.6 秒の位置で保存されました。


12. :play_button: 再生 を押します。

腕がデフォルトの位置から新しい回転位置まで滑らかに動くはずです。
この動きはキーフレーム間で自動的に補間されます。
アクションフィギュアをポーズさせるのと同じです—ポーズを設定し、キーを挿入すれば、それがアニメーションになります!


:right_arrow: グラフィックスコースをこちらで続ける:


:magnifying_glass_tilted_left: 追加説明

:stopwatch: アニメーションの長さとループ設定

  • :alarm_clock: 時計アイコン(右上)を使用して、アニメーションの長さを変更できます。
  • その隣には ループ設定 があります:
    • 1 回クリック:ループ
    • 2 回クリック:ピンポン(往復)
    • 3 回クリック:ループなし

image


:puzzle_piece: ビジュアルスクリプトで新しいアニメーションを使用する

新しいアニメーションをビジュアルスクリプトで使用するには、GameObject ノードのアニメーションセット に登録する必要があります。

  1. シーンウィンドウで Player ノードを選択します。
  2. インスペクターにある Auto-Register Animations ボタンをクリックします。

  1. これでアニメーションが登録され、ビジュアルスクリプトで使用可能になりました。
    すべての登録されたアニメーションを表示するには、Animation Set セクションを展開します。


:bone: 2D ボーンアニメーションの拡張

このチュートリアルでは、最も基本的な操作のみを扱っています。
Godot の AnimationPlayer は非常に強力であり、逆運動学(IK) などの機能も備えています。

高度な機能については、公式の Godot ドキュメントを参照してください:
:blue_book: https://docs.godotengine.org/en/4.x/tutorials/animation/cutout_animation.html