Godot3 Game Engine introduction 4: Add animation to the main character (2)

Godot

One, foreword

This is the previous section:Godot3 Game Engine Introduction 4: Add animation to the main character (1)To continue. In these two articles, I’ll detail three ways to create simple Sprite animations in Godot 3, two of which are covered in the first part and the third in the second.

Second, the body

This goal

Create the animation

First, a quick review of the two ways in which game animation is done:

The first method: use AnimatedSprite to animate the knight

A very simple and intuitive way to create Sprite animation effects for a single character or object. The principle of AnimatedSprite is fairly simple. You only need to prepare the necessary image resources in advance, as described in the previous section.

Second method: use code to control background sky scrolling

Compared with the first way, this way can be said to be the most consistent with the programmer’s habit of thinking: through the code directly control and move the position of the background image can achieve the animation we want. In the previous section, we also learned about the setting of the origin of the coordinates of images in Godot.

Third method: Use AnimationPlayer keyframes to animate swans

Both of these animations are simple and flexible, and will be used a lot in actual game development, but if you think that’s all Godot can do, you’re underestimating it. Let’s move on to the third kind of animation: keyframe animation! Now, let’s welcome our hero of the day:AnimationPlayer ！

Before we go any further, let’s take a look at SpriteSheet. If you have experience developing games using the LibGDX cross-platform game framework, or are familiar with 2D game animation in Unity, you will be familiar with SpriteSheet. Imagine the first way of animating. AnimatedSprite is simple, but if there are multiple states of the character, such as attacking, jumping, walking, dying, etc., then there are a lot of images. It’s also error-prone, and that’s where SpriteSheet comes in! In short, SpriteSheet is a way of putting a lot of images, even different types of image resources, into one large image for easy management and use. Have you heard of TexturePacker? That’s what it’s designed to do.

This is the end of the theory, let’s have a look at the image resources of the swan animation SpriteSheet atlas:

The picture structure is very simple, it can be seen that it is made up of 8 consecutive small pictures, how to use it? First, we’ll use a Sprite node as usual to display the Swan image, renamed Swan, but there are some simple Settings that need to be made:

As shown in the figure above, we set the value of Vframes to 1 and Hframes to 8, which clearly means 1 vertical Frame and 8 horizontal Frame, and then a total of 1×8 frames. The third attribute Frame represents the current display Frame, and it can be set to 0-7 for a total of 8 frames. Play around and see if you can get a discontinuous animation of the swan image as the Frame value goes from 0 to 1 and slowly sets to 7. That’s how animation works! At this point you might think: what if I get the Frame property of Swan in my code and increment it by one at a time? You can! The code is as follows:

func _process(delta):
	if $Swan.frame == 7:
		$Swan.frame = 0
	else:
		$Swan.frame += 1Copy the code

This is exactly the same as the second method and is well worth a try! However, after running the scene, you will find that the animation of the swan flying is too fast! Of course, this is not a big problem, add a time control variable, make the frame property slow forward 1 will be ok. But that’s not what we’re talking about. What I’m going to introduce you to is Godot’s powerful, all-controlling keyframe animation node tool: AnimationPlayer!

In Godot, the AnimationPlayer does control everything. Simple controls such as position, rotation, scaling, arbitrary property values of other nodes, and even method calls can be animated in the AnimationPlayer! At the same time, it is not only powerful, but also very simple to use. How to implement the swan animation, here I made a simple operation diagram, you can feel the use of the AnimationPlayer node steps:

To get to the details, first we need to create an AnimationPlayer node under the root of the game. Here’s the emphasis: we need to animate the Swan nodes, so they need to be placed at the same level! Of course, AnimationPlayer can animate other nodes at the same time, such as the sky background or the main knight node, you can try it out. Next, select the AnimationPlayer node and create a new animation track:

Then we set the new animation track: auto play, repeat play, animation duration, etc. Some details are shown below:

OK, done, running results:

Finally, even though we have animation, the swan can’t move, we need to make it move over time. Here’s a little trick: we can add scripts directly to the node! Godot recommends that we do this by keeping each node as independent as possible, decoupled from the entire game scene, to make collaborative development more efficient on large projects.

Talk is cheap, show me the code! Select the Swan node and click Add Script to write the code:

Extends Sprite # const SPEED = 100 # var minX = -100 var maxX = 800 func _process(delta): Position. x -= SPEED * delta # If the swan flies to the left edge, set its x coordinate to the rightmost edge if position.x < minX: position.x = maxXCopy the code

End result:

All of the code

Node2D extends Node2D; const SPEED = 200 const SKY_SPEED = 50 Var minX = 0 # left boundary of character movement # onReady Onready var knight = self.get_node(" knight ") Get_node onready var sky1 = $sky1 onready var sky2 = $sky2 maxX -= knight.frames.get_frame('idle', 0).get_size().x / 2 minX += knight.frames.get_frame('idle', 0).get_size().x / 2 # Run this method every frame, delta means every frame interval func _process(delta): UpdateSkyAnimation (SKY_SPEED * delta) # Input If input.is_key_pressed (KEY_D) or input.is_key_pressed (KEY_RIGHT): moveKnightX(1, SPEED, delta) return elif Input.is_key_pressed(KEY_A) or Input.is_key_pressed(KEY_LEFT): MoveKnightX (-1, SPEED, delta) return idle if knight.animation! = 'idle': knight.animation = 'idle' func updateSkyAnimation(speed): X -= speed Sky2.position. x -= speed sky2.position.x -= speed # If you scroll to the left, move to the right to if Sky1.position. x <= -1200: sky1.position.x += 2400 elif sky2.position.x <= -1200: Sky2.position. x += 2400 # direciton func moveKnightX(direction, speed, delta) func moveKnightX(direction, speed, delta) If knight. Animation! = 'run': knight.animation = 'run' if direction == 0: Return # position specifies the current position of the node, Position += Vector2(speed, 0) * delta * direction # if knight. Position. X > maxX: knight.position = Vector2(maxX, knight.position.y) elif knight.position.x < minX: knight.position = Vector2(minX, knight.position.y) knight.scale = Vector2(direction, 1)Copy the code

Iii. Summary (II)

Now that all three methods have been explained, here is a brief summary of the advantages and disadvantages of the three methods of animation in Godot 3:

The next section of this article ends with the same sentence:The original is not easy toAh, I hope you enjoy it!

My blog address:liuqingwen.me, welcome to follow my wechat official account: