このコースでは、サンプルで収録されているプレイヤーオブジェクトを改変していくコースです。
2Dボーンで制作されたキャラクターの基本的な操作を学ぶことができます。
このコースでも、最初のチュートリアルで使用したチュートリアルプロジェクトを利用します。
まずはプロジェクトを開いて準備してください。
STEP1: スキンを差し替えてみよう。
1.添付の画像をダウンロードしてください。
2. ダウンロードしたP_01_stickman_skin.pngを、ファイルシステムの任意の場所にドラッグアンドドロップして読み込んでください。
3. Playerシーン(Object_Sampleplayer.tscn)を開いてください。
4. BoneAnimationRoot>Polygonの中にある、Mantle_downからHand_Rまでの全てのノードをまとめて選択してください。
5. インスペクターウィンドウのTextureにファイルシステムのP_01_stickman_skin.pngをドラッグアンドドロップします。
6. プレイヤーの姿が黒い棒人間になりました。
7. F5キーか
でテストプレイしてみましょう、棒人間が動いているはずです。8. 元に戻す場合は、ファイルシステムのtemplates>objects>characters>P_01>P_01_mat_000.pngで4~5の手順を行うことで元の姿に戻ります。
解説
各ノードの意味
BoneAnimationRoot2D: ACTION GAME MAKERの各機能(フィルターや残像等)で2Dボーンを認識するためのノードです。Skeleton2DやPolygon2Dはこのノードの子として配置される必要があります。
Skeleton2D: 2Dボーンそのものを示すGodotノードです。このボーンの位置情報や角度といった変形に応じて、以下のPolygon2Dで設定されたテクスチャーが変形します。
Polygon2D: (Mantle_down ~ Hand_R): 2Dボーン用のポリゴンを設定するGodotノードです。
Polygon2Dとテクスチャー
各Polygon2Dでは、UVという機能で共通の1枚の画像を切り出して使用しています。実際に見てみましょう。
- ArmLを選択してください。
- 上部ツールバーのUVボタンをクリックしてください。
- UVエディターが立ち上がります。頂点で囲まれた部分がこのPolygon2D(ArmL)で切り出して使用している部分です。
- 設定済みのUVの位置・形状データは変わりませんので、同じサイズ、同じ位置に配置したスキン画像を作成することで、簡単に差し替えを行うことができます。
自作スキンガイド
デフォルトのスキン画像の各パーツの対応部分は以下になります。
P_01_mat_000.png
P_02_mat_000.png
自作スキンを制作される方は、この配置を参考に元データを改変して作成してみましょう。
STEP2: アニメーションを追加してみよう。
- シーンウィンドウでAnimationPlayerを選択してください。下部のパネルがAnimationに切り替わります。
- Animationパネル左上の を押してみてください。キャラクターがわずかに動くはずです。これは、001_Idleというアニメを再生しています。
- 001_Idleとなっている部分をクリックしてみてください。47種類のアニメーションが登録されていますので好きなものを再生してみましょう。白と黄色のボーンの動きに応じてキャラクターが動いていることがわかるはずです。このボーンの動きは、下部のトラックというもので制御されています。
- 新しいアニメーションを作ってみましょう。パネル上部のAnimationをクリックして、Newを選択します。
- 新しいアニメーションを作成するウィンドウがでるので、名前をつけてOKを押しましょう。
- アニメーションが追加されましたが、まっさらな状態でトラックには何もありませんのでトラックを追加しましょう。BoneAnimationRoot2D>Skeletonの子にある、B_HipからB_Chainまでの全てのBone2Dノードを選択します。そして、上部のツールバーにある
マーク(Insert Key)ボタンをクリックしましょう。
- 42個の新しいトラックを作成しますか？という選択肢がでるのでそのまま、作成を選択します。これで新しいアニメーションにトラックが追加されました。この42個のトラックは、21個のボーンノードそれぞれの位置と回転を制御するようになっています。
- トラックをいじっていきましょう。青い縦棒は現在の再生地点を示しています。0秒地点にあるはずなので、真ん中あたり、0.6秒地点あたりまでドラッグしましょう。
- 簡単な動きをつけてみましょう、シーンウィンドウでB_Arm_Rを選択してください。このノードは右腕の上腕の骨を示しています。
- インスペクターウィンドウで、Node2D>TransformのRotationを変更してみてください。右腕の角度がかわり、ぐるぐると回るはずです。
- 好きな角度を決めたら、再び上部のマークを押してください。一見何も起きていないように見えますが、今の回転の値が0.6秒地点に保存されています。
- 再生ボタンを押してみてください。キャラクターの腕が初期位置から、ゆっくりとキーを挿入した角度まで動くはずです。初期位置から指定位置までの間の動きは自動で補間されます。人形遊びのようにポーズを作り、キーを挿入すればアニメーションになる・・・というわけです。
グラフィックコースの続きはこちら！
解説
アニメーションの長さとループ
アニメーションの長さは右上の
マークで変更できます。
その横にあるものはループ機能です。一度クリックでループ再生、再度クリックで折り返し再生、再度クリックでループ無しと切り替わります。
追加したアニメーションをヴィジュアルスクリプトで使う
ヴィジュアルスクリプトで使うためには、GameObjectノードのアニメーションセットに登録する必要があります。
- シーンウィンドウでPlayerを選択してください。
- インスペクターのアニメーション一括登録ボタンを押してください。
- これでアニメーションセットに登録され、ヴィジュアルスクリプトで利用できるようになります。>アニメーションセットを展開することでどのようなアニメが登録されているか確認することもできます。
2Dボーンアニメーションの拡張
このチュートリアルでは、最も基礎的な操作だけを説明しています。GodotのAnimationPlayerは非常に高性能で、IK機能等2Dボーンアニメーションを扱う上で便利な機能が沢山あります。より詳しくは以下のGodot公式ドキュメントをご確認ください。