2D 애니메이션 특징 소개

개요

class_AnimationPlayer 노드는 간단한 애니메이션부터 복잡한 애니메이션까지 만들 수 있습니다.

In this guide you learn to:

  • Work with the Animation Panel
  • Animate any property of any node
  • 간단한 애니메이션 만들기
  • Call functions with the powerful Call Function Tracks

In Godot, you can animate anything available in the Inspector, such as Node transforms, sprites, UI elements, particles, visibility and color of materials, and so on. You can also modify values of script variables and call any function.

AnimationPlayer 노드 만들기

애니메이션 도구를 사용하기 위해서는 먼저 class_AnimationPlayer 노드를 만들어야 합니다.

The AnimationPlayer node type is the data container for your animations. One AnimationPlayer node can hold multiple animations, that can automatically transition to one another.

The AnimationPlayer node

AnimationPlayer 노드

노드 탭에서 AnimationPlayer 노드를 클릭해서 뷰포트 하단의 애니메이션 패널을 엽니다.

The animation panel position

애니메이션 패널 위치

애니메이션 패널은 5가지 부분으로 구성되어 있습니다:

The animation panel

애니메이션 패널

  • Animation controls (i.e. add, load, save, and delete animations)
  • The tracks listing
  • The timeline with keyframes
  • The keyframe editor (when enabled)
  • The timeline and track controls, where you can zoom the timeline and edit tracks for example.

자세한 설명은 아래의 animation panel reference 를 보세요.

Computer animation relies on keyframes

키프레임은 특정 시점의 속성이 가지는 값을 정의합니다.

White and blue diamond shapes represent keyframes in the timeline.

Keyframes in Godot

Godot에서의 키프레임

엔진은 키프레임 사이의 값을 보간하여 시간이 지남에 따라 값이 점진적으로 변하게 됩니다.

Two keyframes are all it takes to obtain a smooth motion

두 개의 키프레임만 있으면 부드러운 움직임을 얻을 수 있습니다

타임라인을 사용하면 키프레임을 삽입하고 시기를 변경할 수 있습니다. 또한 애니메이션의 길이를 정의합니다.

The timeline in the animation panel

애니메이션 패널에서의 타임라인

Each line of the Animation Panel is an animation track. Normal and Transform tracks reference node properties. Their name or id is a path to the node and the affected property.

Example of Normal animation tracks

Example of Normal animation tracks

참고

If you animate the wrong property, you can edit a track's path anytime. Double click on it and type the new path. Play the animation using the "Play from beginning" button Play from beginning (Default shortcut: Shift+D) to see the changes instantly.

Tutorial: Creating a simple animation

씬 설정하기

For this tutorial, we'll going to create an AnimationPlayer node and a sprite node as an AnimationPlayer node child.

Our scene setup

Our scene setup

The sprite holds an image texture and we animate that sprite to move between two points on the screen. As a starting point, move the sprite to a left position on the screen.

참고

Adding animated nodes as children to the AnimationPlayer node is not required, but it is a nice way of distinguishing animated nodes from non-animated nodes in the Scene Tree.

Select the AnimationPlayer node and click on "Add animation" (Add Animation) in the animation tab to add a new animation.

Enter a name for the animation in the dialog box.

Add a new animation

Add a new animation

Adding a track

To add a new track for our sprite, select it and take a look in the toolbar:

Convenience buttons

Convenience buttons

These switches and buttons allow you to add keyframes for the selected node's location, rotation, and scale respectively.

Deselect rotation, because we are only interested in the location of our sprite for this tutorial and click on the key button.

As we don't have a track already set up for the transform/location property, Godot asks, whether it should set it up for us. Click on "Create".

This creates a new track and our first keyframe at the beginning of the timeline:

The sprite track

The sprite track

The track name consists of a Node Path, followed by a colon, followed by a reference to its property, that we would like to modify.

In our example, the path is AnimationPlayer/Sprite and the property is position.

The path always starts at the AnimationPlayer node's parent (so paths always have to include the AnimationPlayer node itself).

주석

Don't worry if you change the names of nodes in the Scene Tree, that you already have tracks for. Godot automatically updates the paths in the tracks.

The second keyframe

Now we need to set the destination where our sprite should be headed and how much time it takes to get there.

Let's say, we want it to take 2 seconds to go to the other point. By default the animation is set to last only 1 second, so change this in the timeline controls in animation panel's lower panel to 2.

Animation length

Animation length

Click on the timeline header near the 2 second mark and move the sprite to the target destination on the right side.

Again, click the key button in the toolbar. This creates our second keyframe.

Run the animation

Click on the "Play from beginning" (Play from beginning) button.

Yay! Our animation runs:

The animation

The animation

Back and forth

As you can see, the "loop" button is enabled by default and our animation loops. Godot has an additional feature here. Like said before, Godot always calculates the frames between two keyframes. In a loop, the first keyframe is also the last keyframe, if no keyframe is specified at the end.

Animation loop

Animation loop

If you set the animation length to 4 seconds now, the animation moves back and forth. You can change this behaviour if you change the track's loop mode. This is covered in the next chapter.

Track settings

Each track has a settings panel at the end, where you can set the update rate, the track interpolation, and the loop mode.

Track settings

Track settings

The update rate of a track tells Godot when to update the property values. This can be:

  • Continuous: Update the property on each frame
  • Discrete: Only update the property on keyframes
  • Trigger: Only update the property on keyframes or triggers
Track rate

Track rate

In normal animations, you usually use "Continuous". The other types are used to script complex animations.

The interpolation tells Godot how to calculate the frame values between the keyframes. These interpolation modes are supported:

  • Nearest: Set the nearest keyframe value
  • Linear: Set the value based on a linear function calculation between the two keyframes
  • Cubic: Set the value based on a cubic function calculation between the two keyframes
Track interpolation

Track interpolation

Cubic interpolation leads to a more natural movement, where the animation is slower at a keyframe and faster between keyframes. This is usually used for character animation. Linear interpolation creates more of a robotic movement.

Godot supports two loop modes, which affect the animation if it's set to loop:

Loop modes

Loop modes

  • Clamp loop interpolation: When this is selected, the animation stops after the last keyframe for this track. When the first keyframe is reached again, the animation will reset to its values.
  • Wrap loop interpolation: When this is selected, Godot calculates the animation after the last keyframe to reach the values of the first keyframe again.

Keyframes for other properties

Godot doesn't restrict you to only edit transform properties. Every property can be used as a track where you can set keyframes.

If you select your sprite while the animation panel is visible, you get a small keyframe button for all of the sprite's properties. Click on this button and Godot automatically adds a track and keyframe to the current animation.

Keyframes for other properties

Keyframes for other properties

Edit keyframes

For advanced use and to edit keyframe in detail, enable the keyframe editor (Keyframe editor).

This adds an editor pane on the right side of the track settings. When you select a keyframe, you can directly edit its values in this editor:

Keyframe editor editing a key

Keyframe editor editing a key

Additionally, you can also edit the transition value for this keyframe:

Keyframe editor editing a transition

Keyframe editor editing a transition

This tells Godot, how to change the property values when it reaches this keyframe.

You usually tweak your animations this way, when the movement doesn't "look right".

Advanced: Call Func tracks

Godot's animation engine doesn't stop here. If you're already comfortable with Godot's scripting language GDScript 기초 and /classes/index you know that each node type is a class and has a bunch of callable functions.

For example, the class_AudioStreamPlayer node type has a function to play an audio stream.

Wouldn't it be great to play a stream at a specific keyframe in an animation? This is where "Call Func Tracks" come in handy. These tracks reference a node again, this time without a reference to a property. Instead, a keyframe holds the name and arguments of a function, that Godot should call when it reaches this keyframe.

To let Godot play a sample when it reaches a keyframe, follow this list:

Add a class_AudioStreamPlayer to the Scene Tree and setup a stream using an audio file you put in your project.

Add AudioStreamPlayer

Add AudioStreamPlayer

Click on "Add track" (Add track) on the animation panel's track controls.

Select "Add Call Func Track" from the list of possible track types.

Add Call Func Track

Add Call Func Track

Select the class_AudioStreamPlayer node in the selection window. Godot adds the track with the reference to the node.

Select AudioStreamPlayer

Select AudioStreamPlayer

Select the timeline position, where Godot should play the sample by clicking on the timeline header.

Enable the Keyframe Editor by clicking on Keyframe editor.

Click on "Add keyframe" near the settings of our func track (Add keyframe) and select the keyframe.

Add a keyframe to the call func track

Add a keyframe to the call func track

Enter "play" as the function name.

Keyframe settings of a call func track

Keyframe settings of a call func track

When Godot reaches the keyframe, Godot calls the class_AnimationPlayer node's "play" function and the stream plays.

References

Animation panel reference

The animation panel reference

The animation panel reference

The animation panel has the following parts (from left to right):

Animation controls

Animation controls

Animation controls

  • Play animation backwards from current position
  • Play animation backwards from the animation end
  • Stop animation
  • Play animation forwards from the animation beginning
  • Play animation forwards from the current position
  • Direct time selection

Animation management

Animation management

Animation management

  • Create a new animation
  • Load animation
  • Save animation
  • Duplicate animation
  • Rename animation
  • Delete animation
  • Animation selection
  • Automatically play selected animation
  • Edit animation blend times
  • Extended animation Tools

Timeline zoom level control

Timeline zoom level control

Timeline zoom level control

Timeline control

Timeline control

Timeline control

  • Length of animation
  • Steps of animation
  • Toggle loop animation

Track control

Track control

Track control

  • Add track
  • Move track up
  • Move track down
  • Delete track
  • Extended track tools
  • Toggle keyframe editor