チュートリアル: グラフィックコース#3 2Dスプライトキャラクター

STEP1:新しく2Dスプライトキャラクターのゲームオブジェクトを作ろう。

  1. まずは2Dスプライトキャラクターの画像をご用意ください。特に無い場合は以下のサンプル画像をダウンロードしてご利用ください。

  2. ファイルシステムウィンドウに画像をドラッグ&ドロップして読み込みます。

  3. 新しいゲームオブジェクトシーンを作りましょう。中央エディターウィンドウのタブで+を押して新しいタブを開きます。そしてシーンウィンドウでGame Objectを選択しましょう。

  4. 設定ウィンドウが開きますので、以下のように設定をしてください。
    オブジェクト名: 任意に設定してください。
    テンプレート: characters
    テンプレートの種類: 2DSprite Character Base
    グループ: Player
    コントローラーで操作する対象(Objects to be manipulated by input devices.):オン

  5. 一通りの基本設定がされたゲームオブジェクトシーンが生成されます。まずはセーブをしておきましょう。未保存となっているタブを右クリックするか、Ctrl+Sのショートカットを使って任意の場所に保存しておきましょう。

  6. キャラクター画像を読み込みます、シーンウィンドウのSprite2Dをクリックしてください。

  7. インスペクターウィンドウのTextureに、ファイルシステムから2.で読み込んだキャラクター画像をドラッグ&ドロップします。

  8. キャラクターが読み込まれましたがシートがそのまま表示されているはずです。分割していきましょう。

  9. インスペクターウィンドウのAnimation>Hframes,Vframesを設定します。
    Hframes: 横方向に配置されているフレームの数です。 サンプル画像の場合は5を設定してください。
    Vframes: 縦方向に配置されているフレームの数です。サンプル画像の場合は4 を設定してください。

  10. 1つ下のFrameを1つずつ動かしてみてください。正常に分割できていれば0から順にコマ送りで再生されるはずです。なお、Godotではここに限らず、原則的に1つ目のデータは0から始まります。Frame7は8コマ目となり、1つずれることになります。ご注意ください。

  11. 次は大きすぎる各判定を調整していきましょう。シーンウィンドウでCollisionShape2Dを選択してください。水色の四角形が選択できるようになっているはずです。これは、地面や敵との衝突を判定する壁判定です。

  12. 壁判定をキャラクターのサイズに合うように調整しましょう。四隅のポイントを選択して移動してサイズを調整します。

  13. 次はHitCollisionを同様に調整します。これは攻撃との衝突を判定する当たり判定なので壁判定より一回り大きく設定すると良いでしょう。

  14. 最後はAttackCollisionです。これは、攻撃範囲を示しますが、どのようなアニメーションを作るかで大きく扱いが変わってきますので、まずは無効にしておきましょう。AttackCollisionを選択し、インスペクターでDisabledをオンにします。


    AttackCollisionが灰色になりましたが、まだ邪魔に感じるようでしたらAttackCollisionの右側にある:eye:マークをクリックすることで非表示にすることもできます。

  15. ここまで完成したらタブを右クリックかCtrl+Sでセーブしておきましょう。

TIPS: 非表示と無効

シーンウィンドウの:eye:マークで表示、非表示を切り替えることができますが、これはあくまでエディター上での見え方を制御するものです。非表示にしただけでは、見えなくなるものの実際には動作しています。動作を停止したい場合は、インスペクターで無効化するか、ノードを削除するようにしましょう。