How to create 2D effects in Godot with AnimatedSprite

In game programming, effects play an important role in creating an interesting and engaging experience for players. Adding 2D effects to Godot games can make characters & environments more realistic, interactive and visually appealing.

Fortunately, Godot provides tools and features that help you create and control 2D effects with ease.

Setting up the game Godot

To start, create a basic 2D game scene in the Godot game engine. Create a new scene and add a KinematicBody2D node as a player character. Inside KinematicBody2D, add a CollisionShape2D with a rectangle representing the player's collision boundary.

Additionally, add an AnimateSprite node to handle player effects. Make sure you 'map' the following input tasks in Input Map :

How to create 2D effects in Godot with AnimatedSprite Picture 1

Next, write the GDScript code to control the player's movements. Attach the following script to the KinematicBody2D node :

 extends KinematicBody2Dconst SPEED = 200func _physics_process(delta): var velocity = Vector2.ZERO if Input.is_action_pressed("move_left"): velocity.x -= SPEED if Input.is_action_pressed("move_right"): velocity.x += SPEED if Input.is_action_pressed("move_up"): velocity.y -= SPEED if Input.is_action_pressed("move_down"): velocity.y += SPEED velocity = move_and_slide(velocity)

This script sets a constant speed for the player and also allows them to move left, right, up and down with the arrow keys or WASD.

How to create 2D effects in Godot with AnimatedSprite Picture 2

Adding SpriteSheet in AnimatedSprite

Now, configure the AnimatedSprite to use a sheet sprite for the animation. Select the AnimatedSprite node and navigate to the Frames section of the node's properties tab. Here, click the New SpriteFrames button .

Switch to the SpriteFrames tab at the bottom of the Godot editor. In the SpriteFrames tab, click the New Animation button . Create effects like walk and idle by adding appropriate frames for each effect.

In addition, you have the option to create other effects, such as shooting bullets, jumping and climbing for the platform game. Then, click Add Frames from SpriteSheet to automatically retrieve individual frames from the sprite sheet.

How to create 2D effects in Godot with AnimatedSprite Picture 3

Control effects with GDScript

Now that you've set up the effects, you can programmatically control them using GDScript.

Play and stop effects

Controlling the playback of effects is essential to providing dynamic and interactive gaming experiences. The AnimateSprite node in Godot provides a method to play & stop effects for each game logic.

Extend the KinematicBody2D node and handle the effect control in the _physics_process function . You can use play_animation and the stop_animation input to trigger the respective effect actions.

 extends KinematicBody2Dfunc _physics_process(delta): # Play the animation if Input.is_action_just_pressed("play_animation"): $AnimatedSprite.play() # Stop the animation and reset to the first frame if Input.is_action_just_pressed("stop_animation"): $AnimatedSprite.stop() $AnimatedSprite.frame = 0

By mapping input operations accordingly, you can give players control over in-game effect playback.

For example, you can associate the play_animation action with a specific button press or event in the game, allowing the player to trigger a sequence of effects at the desired time. In addition, you can find royalty-free music to play while the effect is running.

Similarly, you can trigger the stop_animation actions to completely stop this effect.

By combining the above effects control mechanisms, you can add depth and interactivity to your game's animations, creating an engaging, enjoyable experience for players.

Rotate animation

Rotating animations can add visual interest & variety to the game. You can programmatically rotate the AnimatedSprite node to change the direction of the animation. You can apply rotation in degrees using the rotate() function .

extends KinematicBody2Dfunc _physics_process(delta): if Input.is_action_just_pressed("rotate_animation"): # Rotate the animation by 45 degrees clockwise $AnimatedSprite.rotate(deg2rad(45))

When pressing buttons associated with rotate_animation (which you can define in the input map), the rotate() function is called on the AnimatedSprite node . It rotates the node 45 degrees clockwise using deg2rad() to convert degrees to radians.

How to create 2D effects in Godot with AnimatedSprite Picture 4

Remember that it will apply the rotation to the entire AnimatedSprite node , including all frames of the effect. So, if you want to rotate only certain frames, you may need to split them into AnimatedSprite nodes or use another technique like flipping frame by frame.

Flip animation

Flipping the animation horizontally or vertically can be helpful in reflecting changes in the direction of a character's movement. In Godot, the AnimatedSprite node provides properties that control the flipping.

To flip the effect horizontally, set the AnimatedSprite 's flip_h property to true . This represents the animation along the horizontal axis. Similarly, setting the flip_v property to true will mirror the animation along the vertical axis.

extends KinematicBody2Dfunc _physics_process(delta): if Input.is_action_just_pressed("flip_animation"): $AnimatedSprite.flip_h = true # or $AnimatedSprite.flip_v = true for vertical flipping

If the player hits the input flip_animation action , then set the AnimatedSprite 's flip_h property to true . This action will animate horizontally.

Using cues in AnimatedSprite

In addition to programmatic effects control, Godot provides a powerful event system called signals. They allow you to respond to specific events or changes that occur while the game is running.

In the case of AnimatedSprite , you have two important signals you can use: animation_finished() and frame_changed() .

Signal animation_finished()

animation_finished() occurs when the animation reaches the last frame, during a playback, or when it loops. This signal is useful when you want to implement actions or trigger events when the animation completes.

 extends KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("animation_finished", self, "_on_animation_finished")func _on_animation_finished(): # Perform actions or trigger events print("Animation finished!") # Thêm code vào đây.

Connect the AnimatedSprite's signal animation_finished() to the _on_animation_finished() method in the same script using the connect() function.

When the animation is finished playing, you can execute custom logic or trigger functions using _on_animation_finished().

Signal frame_changed()

Signal frame_changed runs whenever the current frame of the animation changes. This can happen while the animation is playing or when you programmatically edit the frame. You can use this signal to detect frame changes and react accordingly.

 extends KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("frame_changed", self, "_on_frame_changed")func _on_frame_changed(): # Perform actions based on the current frame var currentFrame = $AnimatedSprite.frame print("Current frame: ", currentFrame) # Thêm code vào đây.

Connect  the AnimatedSprite's signal frame_changed() to _on_frame_changed() in the same script. When the frame changes, you can access the current frame with _on_frame_changed() and implement actions or logic based on the value of the frame.

By using cues, you can respond to animated events like frame completion or change, and incorporate dynamic behaviors or trigger specific in-game actions.

Above is how to make Godot game more attractive with 2D animation . Hope the article is useful to you.

Lesley Montoya

Update 27 July 2023