DEV Community

loading...

2D Animation in Godot

hideckies profile image hideckies ・4 min read

I think making 2D animations in Godot is relatively easy. But at first it can be a little complicated until you get used to it.
So, in this article, I will focus on 2D and explain how to create illustrations for animation and how to move them using AnimationPlayer in Godot.

You may refer to this article for details on how to create pixel art.

1. Create illustrations for animation.

First of all, it is necessary to arrange the illustrations used in the animation frame by frame.

Alt Text

*This time I would like to use this character, which is loved all over the world(I can’t deny the possibility that no one in the world knows him). He appears in my game by the way. Please play it if you are interested!

If you want to make a runnning animation, make each of the 5 frames as shown in the image above.
When you actually make the animation using AnimationPlayer in Godot, the movement is 1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1 …

Then export it as .png to your Godot project.
As a result, the contents of your Godot project should look like this:

Alt Text

2. Make a scene to animate

Here, create a scene named “Human”(Since it is assumed to move, I use KinematicBody2D here). In addition, add three child nodes - Sprite, CollisionShape2D, AnimationPlayer -

Alt Text

3. Make a Sprite

Next, load the .png you created as Sprite texture.

Alt Text

As a result, the viewport is reflected this:

Alt Text

As you know, this is not natural. Five people are lined up! No… this is not! We want only one person to run!

Therefore edit the item named “Animation” in Sprite in addition.

Alt Text

The created illustration consists of 5 frames, so if you set Hframes to 5, you can display only one frame.
You see!

Alt Text

4. Make AnimationPlayer

Click the AnimationPlayer node to open the Animation edit screen at the bottom.

Alt Text

Then click Animation button as shown below to create new animation:

Alt Text

So the dialog opened, click “new” and enter the new animation name(for example, “Run”)
Then, the animation edit screen at the bottom changed.

Alt Text

Now let’s actually make the Run animation!

Click Sprite node at first, then edit Frame on the item named Animation.

Alt Text

Try entering a number such as 1, 2, 3, etc…
Human movement should change.

Then, click the key mark on the right with this number set to 0.

Alt Text

As a result, selected 0 frame is displayed in animation edit screen as shown below:

Alt Text

Next, at the top of this edit screen, where the time scale is lined up with 0, 0.5, 1, 1.5 …, click 0.5.

Alt Text

As before, this time set the Frame to 1 in Sprite’s Animation item and then click the key mark.
You should be able to see that frame 1 has been added at position 0.5 on the time scale.

Alt Text

In the same, as mentioned in Section 1, add frames in the order of 1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1…(However, note that 0 is the first frame here, so 0-> 1-> 2-> 1-> 0-> 3-> 4-> 3-> 0 …)

It’s difficult to explain in words, but for the time being it looks like as below:

Alt Text

By the way, to change the length of the animation time, change the value of the timer mark on the upper right. This time it is 4 seconds, so it set to 4.
And to make the animation loop, click the loop icon next to that.

Let’s run!

Alt Text

Um… very slowly isn’t it?
Let’s move faster!

Reduce the frame movement to 0.1 second intervals and change the animation length to 0.8 seconds.
At this time, by changing the Snap at the bottom to 0.1, you will be able to move the time scale by 0.1.

Alt Text

How about this…

Alt Text

Good!

If you want to play the animation in GDScript…

func _ready():
    var animationPlayer = $AnimationPlayer
    animationPlayer.play("Run")
Enter fullscreen mode Exit fullscreen mode

It’s done.
Hope it helped😃

Discussion

pic
Editor guide