今回はAsepriteなどで作成したスプライトシートをGodot Engineに取り込む方法をまとめていきます。
(ついでにドット絵の画像を扱う場合のピクセルパーフェクト設定についても実施します)
以下が今回読込んでみるスプライトシートです。
Step.1：スプライトシート画像をプロジェクトへ読込む
エクスプローラーやデスクトップなどから、ドラッグアンドドロップで[ファイルシステム]タブへコピーしてプロジェクトへ読込みます。
今回はプロジェクトフォルダ直下に[Sprites]というフォルダを作成し、その配下に配置しています。
Step.2：Spriteノードの設定
Spriteノードを作成し、読込んだスプライトシートデータをTextureとして指定します。
テクスチャを設定した段階では、スプライトシートをそのまま設定している状態です。
インスペクターから[Animation]タブを展開し、Hframes・Vframesを設定します。
・Hframes：スプライトシートの分割列数
・Vframes：スプライトシートの分割行数
です。
設定が完了すると、以下のように最初のフレームが表示されている状態が確認できます。
Step2.5(ドット絵の場合)ピクセルパーフェクト設定
ドット絵の場合、デフォルト設定だと画像がぼやけるように表示されているかと思いますので、これを防ぐためにピクセルパーフェクトの設定を行いましょう。
＊高解像度の画像を使用している方は読み飛ばしてOKです。
Step.3：アニメーションノードの作成と設定方法
次に、AnimationPlayerノードを追加して、アニメーションを新規作成します。(以下画像手順)
アニメーションを作成したら、先ほど作成したSpriteのframeを対象としてプロパティトラックを追加します。(このframeが、AnimationのHframes/Vframesで設定したフレームです)↓
トラックが追加されたら、キーを挿入していきます。基本的には以下画像の流れの通りです。
フレームを示すValueは[0]から始まることにご注意ください。
(スプライトシート最初(左上隅)のフレーム＝Value：0)
例の場合は計7枚分のフレームのため、同手順にてValue「0～6」のキーを設定して完了です。
Step.4：調整と再生確認
アニメのキーをすべて打ち終わったら、アニメの長さやループ有無を設定し、再生してみましょう。
今回は歩行アニメーションなので、最終フレームまでのアニメ長とし、ループを有効にします。
再生ボタンをおすと、シーンビューでアニメが実行されていることを確認できます。
終わりに
お疲れ様でした。
今回はスプライトシートの読み込み方を最低限の要素に絞ってまとめました。
そのため、ノードの階層構造がSprite配下にAnimationPlayerが配置されていますが、これは必須ではなく、むしろ不自然な状態にあることにご注意ください。
(通常は[キャラクター]の単位でノードを構成するため、Rigidbody2DやKinematicBody2D以下にSpriteやAnimationPlayerを同階層に配置したりします)
コメント