2Dスプライトアニメーション

はじめに

このチュートリアルでは、AnimatedSpriteクラスとAnimationPlayerを使用して2Dアニメーションキャラクターを作成する方法を学習します。通常、アニメーションキャラクターを作成またはダウンロードする場合、2つの方法のいずれかが使用されます。個々の画像として、またはすべてのアニメーションのフレームを含む単一のスプライトシートとして。どちらも、AnimatedSpriteクラスを使用してGodotでアニメーション化できます。

まず、AnimatedSprite を使用して、個々の画像のコレクションをアニメーション化します。次に、このクラスを使用してスプライトシートをアニメーション化します。最後に、AnimationPlayerSpriteAnimation プ ロパティを使用して、スプライトシートをアニメーション化する別の方法を学習します。

注釈

次のサンプルのアートは https://opengameart.org/users/ansimuz および https://opengameart.org/users/tgfcoder から入手しました

AnimatedSpriteと個々の画像

このシナリオでは、キャラクターのアニメーションフレームを1つづつ含む複数の画像を使います。この例では、次のアニメーションを使用します:

../../_images/2d_animation_run_preview.gif

画像はこちらからダウンロードできます: run_animation.zip

画像を解凍し、プロジェクトフォルダに配置します。次のノードを使用してシーンツリーを設定します:

../../_images/2d_animation_tree1.png

注釈

ルートノードは、Area2D または RigidBody2D にすることもできます。アニメーションは引き続き同じ方法で作成されます。アニメーションが完成したら、CollisionShape2Dにシェイプを割り当てることができます。詳細については、Physics Introduction を参照してください。

次に、AnimatedSprite を選択し、その SpriteFrames プロパティで「新規 SpriteFrames」を選択します。

../../_images/2d_animation_new_spriteframes.png

新しいSpriteFramesリソースをクリックすると、エディタウィンドウの下部に新しいパネルが表示されます:

../../_images/2d_animation_spriteframes.png

左側のFileSystemドックから、8つの個別の画像をSpriteFramesパネルの中央部分にドラッグします。左側で、アニメーションの名前を "default" から "run" に変更します。

../../_images/2d_animation_spriteframes_done.png

インスペクタに戻り、Playing プロパティのチェックボックスをオンにします。これで、アニメーションがビューポートで再生されます。しかし、それは少し遅いです。この問題を解決するには、SpriteFramesパネルの Speed(FPS) 設定を10に変更します。

[新規アニメーション]ボタンをクリックして画像を追加すると、アニメーションを追加できます。

アニメーションのコントロール

アニメーションが完了すると、play() メソッドと stop() メソッドを使用して、コードでアニメーションを制御できます。右矢印キーを押したままアニメーションを再生し、キーを放したときにアニメーションを停止する簡単な例を次に示します。

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimatedSprite.play("run")
    else:
        $AnimatedSprite.stop()

AnimatedSpriteを使用したスプライトシート

クラス AnimatedSprite を使用して、スプライトシートから簡単にアニメーション化することもできます。このパブリックドメインスプライトシートを使用します:

../../_images/2d_animation_frog_spritesheet.png

画像を右クリックして[名前を付けて保存]を選択してダウンロードし、イメージをプロジェクトフォルダにコピーします。

個々の画像を使用するときと同じ方法でシーンツリーを設定します。AnimatedSprite を選択し、その SpriteFrames プロパティで、[新規 SpriteFrames]を選択します。

新しいSpriteFramesリソースをクリックします。今回は、下のパネルが表示されたら、[スプライトシートからフレームを追加する]を選択します。

../../_images/2d_animation_add_from_spritesheet.png

ファイルを開くように求められます。スプライトシートを選択します。

新しいウィンドウが開き、スプライトシートが表示されます。最初に行う必要があるのは、スプライトシートの垂直および水平画像の数を変更することです。このスプライトシートには、水平方向に4つの画像と垂直方向に2つの画像があります。

../../_images/2d_animation_spritesheet_select_rows.png

次に、アニメーションに含めるスプライトシートからフレームを選択します。上位4つを選択し、[4フレームを追加]をクリックしてアニメーションを作成します。

../../_images/2d_animation_spritesheet_selectframes.png

これで、下部パネルのアニメーションのリストの下にアニメーションが表示されます。デフォルトでダブルクリックして、ジャンプするアニメーションの名前を変更します。

../../_images/2d_animation_spritesheet_animation.png

最後に、インスペクタのAnimatedSpriteでの再生をチェックして、カエルのジャンプを確認してください!

../../_images/2d_animation_play_spritesheet_animation.png

AnimationPlayerのスプライトシート

スプライトシートを使用するときにアニメーション化を行うもう1つの方法は、標準の Sprite ノードを使用してテクスチャを表示し、次に AnimationPlayer でテクスチャからテクスチャへの変更をアニメートすることです。

6フレームのアニメーションを含むこのスプライトシートを考えてみましょう。

../../_images/2d_animation_player-run.png

画像を右クリックして[名前を付けて保存]を選択してダウンロードし、イメージをプロジェクトフォルダにコピーします。

私たちの目標は、これらの画像をループで次々に表示することです。シーンツリーを設定することから始めます。

../../_images/2d_animation_tree2.png

注釈

ルートノードは、Area2D または RigidBody2D にすることもできます。アニメーションは引き続き同じ方法で作成されます。アニメーションが完成したら、CollisionShape2Dにシェイプを割り当てることができます。詳細については、Physics Introduction を参照してください。

スプライトシートをスプライトの Texture プロパティにドラッグすると、シート全体が画面に表示されます。個々のフレームにスライスするには、インスペクタの Animation セクションを展開し、Hframes6 に設定します。Hframes および Vframes は、スプライトシート内の水平フレームと垂直フレームの数です。

../../_images/2d_animation_setframes.png

次に、Frame プロパティの値を変更してみてください。範囲が 0 から 5 であり、それに応じてスプライトによって表示される画像が変化することがわかります。これが、アニメーション化のプロパティです。

AnimationPlayer を選択し、[アニメーション] ボタンをクリックしてから [新規] をクリックします。新しいアニメーションに「walk」という名前を付けます。アニメーションの長さを 0.6 に設定し、[ループ] ボタンをクリックして、アニメーションが繰り返されるようにします。

../../_images/2d_animation_new_animation.png

次に、Sprite ノードを選択し、鍵のアイコンをクリックして新しいトラックを追加します。

../../_images/2d_animation_new_track.png

タイムラインの各ポイント(デフォルトでは 0.1秒刻み)で、0から5までのすべてのフレームが追加されるまで、鍵アイコンをクリックしてフレームの追加を続けます。アニメーショントラックに実際にフレームが表示されます:

../../_images/2d_animation_full_animation.png

アニメーションの [再生] をクリックすると、アニメーションがどのように表示されるかを確認できます。

../../_images/2d_animation_running.gif

AnimationPlayerアニメーションの制御

AnimatedSpriteと同様に、play() メソッドと stop() メソッドを使用して、コードを介してアニメーションを制御できます。ここでも、右矢印キーを押したままアニメーションを再生し、キーを放したときにアニメーションを停止する例を次に示します。

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimationPlayer.play("walk")
    else:
        $AnimationPlayer.stop()

注釈

アニメーションと個別のプロパティの両方を一度に更新する場合 (たとえば、プラットフォームゲームの場合、「ターン」アニメーションの開始中に、キャラクタの方向転のために、スプライトの h_flip/v_flip プロパティを更新する場合があります)、play() では即座に適用されないことに注意してください。代わりに、次回 AnimationPlayer が処理されるときに適用されます。この更新は次のフレームで確定するので、プロパティの更新は行われていても、それがアニメーションには適用されていない「グリッチ」フレームが発生する可能性があります。これが問題であることが判明した場合は、play() を呼び出した後に advance(0) を呼び出すことでアニメーションをすぐに更新することができます。

概要

これらの例は、2Dアニメーション用にGodotで使用できる2つのクラスを示しています。AnimationPlayerAnimatedSprite よりも少し複雑ですが、位置やスケールなどの他のプロパティもアニメーション化できるため、追加の機能が提供されます。クラス AnimationPlayerAnimatedSprite でも使用できます。ニーズに最適なものを試してみてください。