02 Animation Player - CoderDojo-Ennis/ScratchyGodot GitHub Wiki

Documentation

Godot Docs Introduction to the animation features

Walkthrough

The goal is to get a simple non-animated sprite image on the screen and create a keyframe animation for it. This step requires no coding. At the end we should have something like this:

AnimationComplete.webm

  1. Create a new scene and choose 2D Scene
  2. Press F2 and name this "Animation Scene" or however you want to name your scene
  3. At the top centre view selector choose 2D
  4. Save the scene by pressing CTRL+S
  5. Drag an image from your computer's File Explorer into the FileSystem panel in Godot at the bottom left to bring it into the project
  6. Drag that image from the FileSystem panel into your 2D scene panel. This will create a Sprite 2D instance in your top left Scene panel.
  7. Click the new sprite in the Scene panel, and on the right side Inspector panel expand the Transform section. This contains the position, size, and rotation of your sprite. These are the things we're going to animate. You may find that your sprite is already too big to fit on the screen. If so, change the Scale value to adjust it. You can type in a number, or click-drag left/right on the x label.
  8. Right-click the sprite in the Scene panel and choose Add Child Node. Select the Animation Player node type.
  9. The bottom centre of the screen will now have an Animation panel with no animations in it.
  10. Press the Animation button and choose New. Enter a name describing what your animation will do. I'm going to choose Spin as my name.
  11. When the Animation panel is open, you can animate anything in the scene by creating key-frames
  12. Select the sprite again in the Scene panel and look at the Inspector Transform section. Adjust one of the values, for example Rotation.
  13. Press the key button to the right of it to save that value for that point in time. When it asks if you want to create a track, check the "Use Bezier Curves** option and press Create
  14. In the Animation panel, click on the 1 at the top of the timeline. This means 1 second after the animation started. By default, the animation will be 1 second long. You can adjust the length with the number at the right side of the timeline.
  15. With the green time marker on 1, go back to your sprite's Transform and change the value that you recorded previously. For example change the rotation value again.
  16. Press the key icon to record that position as a key-frame at the 1 second time
  17. Activate the Loop toggle on the right side of the timeline.
  18. Activate the Autoplay on Load toggle on the top right of the animation panel
  19. Press the triangle button the top left of the animation player to preview your animation
  20. If you play the scene using the triangle button at the top right of the Godot Editor you'll see your game playing with your animation. The first time you do this it will ask you to make this the default scene for the game.