Sprites and Animations - acbarker19/Godot-Action-RPG GitHub Wiki

Remove Blurry Edges from Sprites

Some images will have blurry edges when imported. To avoid this:

  1. Click on the image
  2. In left menu, turn off Filter
  3. Reimport
  4. Click Preset
  5. Select 2D Pixel
  6. Reimport
  7. Click Preset
  8. Click Set as Default for 'Texture'

How to Attach a Spritesheet to an Object

  1. Click on the Sprite
  2. Drag the player spritesheet from the file browser in the bottom left to the Texture area in the right menu
  3. Set Hframes to the number of textures in the spritesheet

How to Add an Animation to an Object

  1. Open the object's scene
  2. Add an AnimationPlayer node
  3. In the bottom menu, select Animation > New
  4. Name animation and press OK
  5. In the bottom right, you can the duration of the snap and choose seconds or frames
  6. On the right side of the bottom window next to the watch icon, you can set how long the animation lasts
  7. Select the Sprite node
  8. In the right window, scroll to Animation > Frame
  9. Set the starting frame and press the button next the Frame field (Looks like a key with a +)
  10. Press Create in the popup window
  11. Increase the frame if needed and add more keyframes until the animation is finished
  12. Make sure you end on the frame of the next animation. For example, if you are doing a running animation, you will want to start with the first frame being the start of the run, and the last frame will be normal standing frame. That way, the character will either take a step and continue running or come to a stop.
  13. If you wish to loop the animation, you can press the Animation Looping button in the bottom menu (Looks like two arrows looping around)

Select the Starting Animation of an Object

  1. Open the object's scene
  2. Click the AnimationPlayer node
  3. In the bottom menu, click the dropdown and select the animation that will be the starting animation
  4. In the bottom menu, click the Autoplay on Load button (Looks like an arrow pointing right with an A in it)

Play an Animation

In an object's script, you must add the following variable:

onready var animationPlayer $AnimationPlayer

Note that $AnimationPlayer may be named differently if you have renamed the AnimationPlayer node. To call an animation, you must use:

animationPlayer.play("AnimationName")

Add an Animation Tree for Controlling When Different Animations Play

  1. Open the object's scene
  2. Add an AnimationTree node
  3. In the menu on the right, select Anim Player > Assign
  4. In the popup window, select the object's AnimationPlayer. To create one, follow these steps.
  5. Select Tree Root > New AnimationNodeStateMachine
  6. Check the Active checkbox in the right menu

Adding Basic Animations to AnimationTrees

  1. Open the object's scene
  2. Select an AnimationTree node
  3. In the bottom menu, right click, and select Add Animation and select an animation
  4. Repeat step 3 to add another animation
  5. In the bottom menu, select Connect Nodes (looks like an arrow pointing right)
  6. Click on one animation and drag a connection to the other animation
  7. Click on a connection and add options
  • Auto Advance will automatically transition one animation to another
  • Switch Mode will choose when an animation will transition

Adding Complex Animations that Handle Directions to AnimationTrees

  1. Open the object's scene
  2. Select an AnimationTree node
  3. In the bottom menu, right click, and select Add BlendSpace2D
  4. Rename the BlendSpace2D to match the type of animation that it will control. For example, a BlendSpace2D named Idle would control the IdleRight, IdleLeft, etc. animations.
  5. Click the edit icon on the BlendSpace2D (Looks like a pencil)
  6. Select the Create points button (Looks like a pencil with a dot next to it)
  7. Click on the graph, select Add Animation, and choose the desired animation. If your animation has 4 directions, you would likely have the points at the furthest point along each axis, although you may want to make some changes for diagonal movement. To understand the directions, refer to the following:
  • Left is when the object faces left
  • Up is when the object faces down (the Y value is larger, and the Y values in the gameplay window increase going down)
  • Right is when the object faces right
  • Down is when the object faces up (the Y value is smaller, and the Y values in the gameplay window decrease going up)
  1. Select the Blend dropdown and choose the option that is a dotted line (the smooth line is for 3D animations that should transition between one another)
  2. To test, go back to the Root tab in the bottom menu, play the animation, edit the animation again, click the Set the blending position within the space button (Look like a crosshair with a cursor), and drag the crosshair inside the graph
  3. Once you are done testing, go to the menu on the right, select Parameters, and set the Blend Position to (0,0)

Adding Transitions Between Animations

  1. Open the object's scene
  2. Select an AnimationTree node
  3. In the bottom menu add your simple or complex animations described above
  4. Repeat step 3 to add another animation
  5. Click the Connect nodes button (Looks like a line with a triangle going through it)
  6. Drag a transition between the two animations. If desired, create transitions going both directions.
  7. Edit the option in the menu on the right. Switch Mode will set when an animation should play. Auto Advance will make a transition always occur automatically between the animations, such as the Idle animation always occurring after the Run animation.

Select a Default Animation in an AnimationTree

  1. Open the object's scene
  2. Select an AnimationTree node
  3. Select the desired animation in the graph
  4. Click Toggle autoplay this animation on start, restart or seek to zero (Looks like an arrow with an "A" inside it)
  5. Make sure there are no conflicting default animations in the AnimationPlayer

Play an AnimationTree

In an object's script, you must add the following variables:

onready var animationTree $AnimationTree onready var animationState = animationTree.get("parameters/playback")

Note that $AnimationTree may be named differently if you have renamed the AnimationTree node. If you are using a complex animation that controls the direction of the animation, you must call this to change the direction:

animationTree.set("parameters/ANIMATION_NAME_IN_ANIMATIONTREE/blend_position", VECTOR2_THAT_SPECIFIES_WHICH_WAY_ANIMATION_SHOULD_FACE)

To change between animations in the AnimationTree, you must add the following:

animationState.travel("ANIMATION_NAME_IN_ANIMATIONTREE")

How to Fix Diagonal Movement in an AnimationTree

When the object moves diagonally, the animation direction may be inconsistent, such as some diagonal directions using the sideways animations while other diagonal directions use the up and down animations. To fix this, do the following:

  1. Open the object's scene
  2. Select an AnimationTree node
  3. Select the desired animation in the graph
  4. For any direction that you do not want to show at diagonals, make the axis 1.1 and drag the point all the way to the edge. For example, if you always want left and right animations when moving diagonally, then you would make both Y axes equal 1.1 and drag the top and bottom points all the way to the edge. This method works because the animation will prioritize lower values, so by setting the least desired animations to higher values, they will not be triggered unless you are much closer to their value.

Wait For Scene to Load Before Running Animation

  1. Open the object's scene
  2. Select an AnimationTree node
  3. In the right menu, make sure Active is not checked
  4. In the object's script, add the following:
func _ready():
	animationTree.active = true

Call a Function During an Animation

  1. Open the object's scene
  2. Select an AnimationPlayer node
  3. In the bottom menu, navigate to the keyframe that should call the function
  4. Click the Add Track button and select Call Method Track
  5. Select the object's node that has the attached script
  6. Right click in the area below the desired keyframe and select Insert Key
  7. Select the desired function

Add an AnimatedSprite for Basic Animation

  1. Open the object's scene
  2. Add an AnimatedSprite node
  3. In the right menu, select Frames > New SpriteFrames
  4. In the bottom menu, rename default to the name of the animation
  5. Select the Speed (FPS) of the animation
  6. Click the Add Frames from a Sprite Sheet button (Looks like a grid)
  7. Select the image that represents the sprite sheet
  8. Select the number of horizontal and vertical frames in the sprite sheet
  9. Click on each of the frames that are part of this animation
  10. Depending on the desired effect, turn on/off the Playing and Centered checkboxes in the right menu and the Loop toggle in the bottom menu

Control an AnimatedSprite within an Object

  1. Open the object's scene
  2. Open the object's script
  3. Add the following to the top of the script:
onready var animatedSprite = $ANIMATEDSPRITE_NODE_NAME
  1. Wherever desired, add the following to play the animation:
animatedSprite.frame = 0   // this is in the case that the animation is starting on the last frame instead of the first
animatedSprite.play("ANIMATION_NAME")
  1. Wherever desired, add the following to stop the animation:
animatedSprite.stop()

Do Something When AnimatedSprite is Done Animating

  1. Open the object's scene
  2. Select the AnimatedSprite node
  3. In the right menu, select Node at the top
  4. Double click animation_finished()
  5. If desired, rename the Receiver Method
  6. Click Connect
  7. Add the desired code to the new function

Play an Animation and Destroy an Object

This explanation uses a separate node for the animation effect that replaces the original node, but it is possible to do this inside the original node as well.

  1. Create a new Node2D for the animated effect
  2. Add an AnimatedSprite node
  3. When the animation is complete, call queue_free() to remove the animated effect
  4. In the effect's script, play the animation in the _ready() function
  5. Open the script for the object that will be destroyed
  6. Add the following code to play the animation and destroy the object (in this example, the object will destroy itself if the user is attacking):
const EffectObjectName = preload("res://Effects/EffectObjectName.tscn")   // this will try to preload the effect and share resources
   // drag the effect file into the load() function to easily get the correct path

func _process(delta):
	if Input.is_action_just_pressed("attack"):
		var EffectObjectName = load("res://Effects/EffectObjectName.tscn")
		var localEffect = EffectObjectName.instance()
		get_parent().add_child(localEffect)
		grassEffect.global_position = global_position   // adds the destruction animation in the same position as the current object
		
		queue_free()   // destroys the current object

For a better way to play an animation and destroy an object, consider using a hitbox and a hurtbox.

How to Fix a Bug Where Some Animations Face the Wrong Direction

Sometimes a bug occurs where one animation in an AnimationTree will be facing the wrong direction when called. This can be fixed by doing the following:

  1. Open the scene for the desired object
  2. In the left menu, select the scene's AnimationTree node
  3. In the right menu, change all of the values under Parameters to have the same X and Y values
  4. Make sure that any animation that is instantiated in code has the same direction

How to Make the Destroy Animation Reusable

  1. Create the following script called Effect.gd:
extends AnimatedSprite

func _ready():
	connect("animation_finished", self, "_on_animation_finished")
	play("Animate")


func _on_animation_finished():
	queue_free()
  1. Whenever an object should have a destruction animation, create a new scene called SomeObjectEffect by pressing the + button in the top right
  2. In the left menu, select Other Node and choose an AnimatedSprite node
  3. Set up the AnimatedSprite as needed
  4. Drag the Effect.gd script from the bottom left menu to the AnimatedSprite node