tutorials/2d/2d_sprite_animation

[giscus[bot]]

tutorials/2d/2d_sprite_animation

Introduction: In this tutorial, you'll learn how to create 2D animated characters with the AnimatedSprite2D class and the AnimationPlayer. Typically, when you create or download an animated charact...

https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html

[DiskoTecha]

Spritesheet animation example for four directions of animation with eight directions of movement, prioritizing front and back animations:

extends CharacterBody2D

# Animation Player child node
@onready var animation_player = self.get_node("AnimationPlayer")

# Properties
@export var speed = 250.0
var face_direction = "Front"
var animation_to_play = "Front_Idle"

# Start front idle animation on load
func _ready():
	animation_player.stop()
	animation_player.play("Front_Idle")

func _physics_process(_delta):
	# Reset velocity
	velocity = Vector2.ZERO
	
	# Add appropriate velocities depending on button press
	if Input.is_action_pressed("ui_left"):
		velocity.x -= 1.0 * speed
		# Only face left/right if not diagonal movement
		if velocity.y == 0.0:
			face_direction = "Left"
	if Input.is_action_pressed("ui_right"):
		velocity.x += 1.0 * speed
		# Only face left/right if not diagonal movement
		if velocity.y == 0.0:
			face_direction = "Right"
	if Input.is_action_pressed("ui_up"):
		velocity.y -= 1.0 * speed
		face_direction = "Back"
	if Input.is_action_pressed("ui_down"):
		velocity.y += 1.0 * speed
		face_direction = "Front"
		
	# All movement animations named appropriately, eg "Left_Idle" or "Back_Walk"
	animation_to_play = face_direction + "_" + ("Walk" if velocity.length() > 0.0 else "Idle")
	animation_player.play(animation_to_play)
	
	# Move character, slide at collision
	move_and_slide()

[waso-mu]

To add to your this, you could use Input.get_vector() for the velocity rather than if statements. This is if you want to allow 360 degree movement when a player is using a joystick. (And, since the vector is normalized, it keeps diagonal movement the same speed as horizontal movement, where before moving diagonally was faster than moving cardinally.)

I've also added static typing and replaced the reference to AnimationPlayer with a unique node. This just makes programming stuff easier, especially if stuff gets changed later on.

extends CharacterBody2D

# Animation Player child node
@onready var animation_player:AnimationPlayer = %AnimationPlayer

# Properties
@export var speed := 250.0
var face_direction := "Front"
var animation_to_play := "Front_Idle"

# Start front idle animation on load
func _ready():
	animation_player.stop()
	animation_player.play("Front_Idle")

func _physics_process(_delta):
    # Get raw input
    var raw_input := Input.get_vector("ui_left","ui_right","ui_up","ui_down") # Remember to replace the strings with your own actions from input map in project settings
    
	# Set appropriate velocity
	velocity =  raw_input * speed
    
    # Since we're using 360 degree movement now, we can't assume assume vertical motion should always take priority. So we figure out the biggest direction.
    if raw_input.length() > 0: # Check if we're moving
        if abs(raw_input.x) > abs(raw_input.y): # Horizontal or vertical? (prioritizing vertical movement)
            face_direction = "Left" if raw_input.x < 0 else "Right"
        else:
            face_direction = "Back" if raw_input.y < 0 else "Front"
    
	# All movement animations named appropriately, eg "Left_Idle" or "Back_Walk"
	animation_to_play = face_direction + "_" + ("Walk" if velocity.length() > 0.0 else "Idle")
	animation_player.play(animation_to_play)
	
	# Move character, slide at collision
	move_and_slide()

[The-Dado]

This is great! How would I check directions like "upright" and "upleft" tho? Trying myself led to some weird outcomes...

[bthaus]

When animating a spritesheet you don't have to manually add all frames and adjust the values. You can just add the first and last frame, set the values, and then adjust the animation from "Discrete" to "Continuous". (That's the leftmost icon on the right side of the track)

[andrewdirisio]

You rock, this saved me so much time. For anyone who needs more info, here's a link to the documentation on track settings it has pictures.

[bluespheal]

This approach actually has a bit of an unintended visual bug where some frames will last an uneven amount of time compared to the rest. I don't know if I'm doing something wrong but according to my tests this seems to be consistent enough. I also don't know if it's related to the length of the animation or other factors, although I do know that adjusting the easing of the keyframes has an effect, but I've been unable to find the perfect sweet spot for it to exactly match the smoothness of just using Discrete mode.

[2leafedclover]

Hey, How would I flip one animation w/o flipping all of them? The sprite sheet I'm using only has running to the right, but I need the character to be able to go left too.

[pupakkk]

Hey, you can try flipping your character, but it will flip all the animations, if this is issue you can flip character only when needed animation is playing, and flip back after animation has ended. If it is possible, it may be easier to just copy and flip frames in your sprite sheet and create separate animation for walking left.

[sabslikesobs]

If you add a frame track for an AnimatedSprite, make sure to add an animation track and insert the sprite's animation. If you don't set an animation in the Animation Editor, then frames in the frame track show as dots instead of pictures.

[brenden-t-r]

Would be nice if animationplayer could support drag and drop of sprites and/or sprite sheet for automatic keyframes