2D 스프라이트 애니메이션

소개

이번 튜토리얼에서는 2D 애니메이션 캐릭터를 만드는 두 가지 방법을 배우게 됩니다. 전형적으로 애니메이션 캐릭터를 만들거나 다운로드 할 경우 두 가지 유형 중 하나일 것입니다: 개별 이미지 또는 애니메이션 프레임을 모두 담긴 단일 스프라이트 시트. 애셋 유형에 따라 다음 해결책 중 하나를 선택할 수 있습니다.

첫 번째는 AnimatedSprite 를 사용하여 개별적인 이미지들을 애니메이션으로 만들 겁니다. 그 다음 스프라이트 시트를 사용하려면 SpriteAnimation 속성과 함께 AnimationPlayer 를 사용합니다.

주석

Art for the following examples by https://opengameart.org/users/ansimuz

Individual images with AnimatedSprite

In this scenario, you have a collection of images, each containing one of your character's animation frames. For this example, we'll use the following animation:

../../_images/2d_animation_run_preview.gif

이미지들은 여기서 다운로드 할 수 있습니다: using_kinematic2d.zip

이미지 압축을 풀고 당신의 프로젝트 폴더에 넣으세요. 다음과 같은 노드를 씬 트리에 설정하세요:

../../_images/2d_animation_tree1.png

주석

The root node could also be Area2D or RigidBody2D. The animation will still be made in the same way. Once the animation is completed, you can assign a shape to the CollisionShape2D. See Physics Introduction for more information.

이제 AnimatedSprite 를 선택하고 노드의 SpriteFrames 속성에서 "새 SpriteFrames"를 선택하세요.

../../_images/2d_animation_new_spriteframes.png

새 SpriteFrames 리소스를 클릭하면 편집기 창 하단에 새로운 패널이 나타날 것입니다:

../../_images/2d_animation_spriteframes.png

왼쪽의 파일 시스템 독에서 8개의 개별 이미지를 SpriteFrames 패널의 중앙 부분으로 끌어다 놓으세요. 왼쪽에서 애니메이션의 이름을 "default"에서 "run"으로 변경하세요.

../../_images/2d_animation_spriteframes_done.png

인스펙터로 돌아가서 Playing 속성 박스를 체크하세요. 이제 뷰포트에서 애니메이션이 재생되는 것을 볼 수 있습니다. 그러나 꽤 느립니다. 고치기 위해서는 SpriteFrames 패널에서 속도 (FPS) 설정을 바꾸세요.

"새로운 애니메이션" 버튼을 클릭하고 이미지를 추가해서 애니메이션을 추가할 수 있습니다.

애니메이션 제어하기

애니메이션을 완성하면 play()stop() 메서드를 사용하여 코드로 애니메이션을 제어할 수 있습니다. 여기 오른쪽 화살표 키를 누르고 있으면 애니메이션을 재생하고 떼면 중지하는 간단한 예제가 있습니다.

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimatedSprite.play("run")
    else:
        $AnimatedSprite.stop()

Sprite sheet with AnimationPlayer

In the event you have a sprite sheet containing all of your animation frames, you can't easily use AnimatedSprite. Instead, you can use a standard Sprite node to display the texture, and then animate the change from texture to texture with AnimationPlayer.

6개의 애니메이션 프레임이 포함된 스프라이트 시트를 고려하세요:

../../_images/2d_animation_player-run.png

오른쪽 마우스 버튼으로 이미지를 클릭하고 "다른 이름으로 저장" 선택해서 다운로드 하세요. 그 다음 당신의 프로젝트 폴더에 이미지를 복사하세요.

우리의 목표는 이 이미지들을 차례로 반복해서 보여주는 것입니다. 다음과 같이 씬 트리를 설정하여 시작하세요:

../../_images/2d_animation_tree2.png

주석

The root node could also be Area2D or RigidBody2D. The animation will still be made in the same way. Once the animation is completed, you can assign a shape to the CollisionShape2D. See Physics Introduction for more information.

스프라이트 시트를 스프라이트의 Texture 속성에 끌어 놓으면 전체 시트가 화면에 보여집니다. 개별 프레임으로 자르려면 인스펙터에서 Animation 부분을 확장하고 Hframes6 으로 설정하세요. HframesVframes 는 스프라이트 시트에서 수평 및 수직 프레임의 수입니다.

../../_images/2d_animation_setframes.png

Now try changing the value of the Frame property. You'll see that it ranges from 0 to 5 and the image displayed by the Sprite changes accordingly. This is the property we'll be animating.

AnimationPlayer 를 선택하고 "애니메이션" 버튼을 클릭한 다음 "새 파일"을 클릭하세요. 새 애니메이션을 "walk"로 이름을 지으세요. 애니메이션 길이를 0.6 로 설정하고 "Loop" 버튼을 클릭해서 애니메이션이 반복되도록 하세요.

../../_images/2d_animation_new_animation.png

이제 스프라이트 를 선택하고 열쇠 아이콘을 클릭해서 새로운 트랙에 추가하세요.

../../_images/2d_animation_new_track.png

Continue adding frames at each point in the timeline (0.1 seconds by default), until you have all the frames from 0 to 5. You'll see the frames actually appearing in the animation track:

../../_images/2d_animation_full_animation.png

애니메이션에서 "Play" 를 누르고 어떻게 작동하는지 보세요.

../../_images/2d_animation_running.gif

요약

These examples illustrate the two most common situations you'll encounter in 2D animation. Each has its benefits. Working with AnimationPlayer is a bit more complex, but provides additional functionality, since you can also animate other properties like position or scale. Experiment and see which works best for your needs.