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

はじめに

このチュートリアルでは、2Dアニメーションキャラクターを作成する2つの異なる方法を学習します。通常、アニメーションキャラクターを作成またはダウンロードする場合、2つの方法のいずれかが使用されます。個別の画像として、またはすべてのアニメーションフレームを含む単一のスプライトシートとして。アセットのタイプに応じて、次のソリューションのいずれかを選択できます。

最初に、AnimatedSpriteを使用して、個々の画像のコレクションをアニメーション化します。次に、スプライトシートを使用するには、AnimationPlayerとSpriteのAnimationプロパティを使用します。

注釈

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

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パネルの中央部分にドラッグします。左側で、アニメーションの名前を「デフォルト」から「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`` を簡単に使用することはできません。代わりに、標準の 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アニメーションで発生する最も一般的な2つの状況を示しています。それぞれに利点があります。AnimationPlayer の操作はもう少し複雑ですが、位置やスケールなどの他のプロパティをアニメーション化することもできるため、追加の機能が提供されます。どれがあなたのニーズに最適なのかを試してみてください。