Godot에서 2D 애니메이션을 만드는 것은 비교적 쉬운 일이라고 생각합니다. 하지만 처음에는 익숙해질 때까지 조금 복잡할 수 있습니다.
그래서 이번 글에서는 2D에 집중하여 애니메이션용 일러스트레이션을 만드는 방법과 Godot에서 AnimationPlayer를 사용하여 움직이는 방법에 대해 설명하겠습니다.

픽셀 아트를 만드는 방법에 대한 자세한 내용은 this article을 참조하십시오.

1. 애니메이션용 일러스트레이션을 만듭니다.

우선 애니메이션에 사용된 일러스트를 프레임 단위로 배치할 필요가 있습니다.



*이번에는 전 세계적으로 사랑받는 캐릭터를 사용하고 싶습니다. 그런데 그는 my game에 등장한다. 관심 있으신 분들은 플레이 해보세요!

달리는 애니메이션을 만들려면 위 이미지와 같이 5개의 프레임을 각각 만드세요.
실제로 Godot에서 AnimationPlayer를 사용하여 애니메이션을 만들 때 움직임은 1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1 …

그런 다음 Godot 프로젝트에 .png로 내보냅니다.
결과적으로, Godot 프로젝트의 내용은 다음과 같아야 합니다:

2. 애니메이션할 장면 만들기

여기서는 "Human"이라는 이름의 장면을 만듭니다(움직이는 것으로 가정하므로 여기서는 KinematicBody2D를 사용합니다). 또한 Sprite, CollisionShape2D, AnimationPlayer라는 세 개의 자식 노드를 추가합니다.

3. 스프라이트 만들기

다음으로 스프라이트 텍스처로 만든 .png를 로드합니다.



결과적으로 뷰포트는 다음과 같이 반영됩니다.



아시다시피 이것은 자연스럽지 않습니다. 5명이 줄을 섰습니다! 아니… 이건 아니야! 우리는 한 사람만 뛰기를 원합니다!

따라서 Sprite에서 "Animation"이라는 항목을 추가로 편집하십시오.



생성된 일러스트는 5개의 프레임으로 구성되어 있으므로 Hframes를 5로 설정하면 1개의 프레임만 표시할 수 있습니다.
당신은 참조!

4. AnimationPlayer 만들기

AnimationPlayer 노드를 클릭하여 하단에 애니메이션 편집 화면을 엽니다.



그런 다음 아래와 같이 애니메이션 버튼을 클릭하여 새 애니메이션을 만듭니다.



대화 상자가 열리면 "새로 만들기"를 클릭하고 새 애니메이션 이름(예: "실행")을 입력합니다.
그러자 하단의 애니메이션 편집 화면이 바뀌었다.



이제 실제로 Run 애니메이션을 만들어 봅시다!

먼저 Sprite 노드를 클릭한 다음 Animation이라는 항목에서 Frame을 편집합니다.



1, 2, 3 등의 숫자를 입력해 보세요.
인간의 움직임이 바뀌어야 합니다.

그런 다음 이 숫자가 0으로 설정된 오른쪽의 키 마크를 클릭합니다.



그 결과 선택된 0 프레임이 아래와 같이 애니메이션 편집 화면에 표시됩니다.



다음으로 시간 척도가 0, 0.5, 1, 1.5 …로 정렬된 이 편집 화면 상단에서 0.5를 클릭합니다.



이전과 마찬가지로 이번에는 Sprite의 Animation 항목에서 Frame을 1로 설정한 다음 키 마크를 클릭합니다.
프레임 1이 시간 척도의 0.5 위치에 추가되었음을 볼 수 있어야 합니다.



마찬가지로 1절에서 언급한 바와 같이 프레임을 1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1… 첫 번째 프레임이 여기에 있으므로 0-> 1-> 2-> 1-> 0-> 3-> 4-> 3-> 0 …)

말로 설명하기는 어렵지만 당분간은 아래와 같습니다.



그런데 애니메이션 시간의 길이를 변경하려면 오른쪽 상단의 타이머 표시 값을 변경합니다. 이번에는 4초이므로 4로 설정합니다.
애니메이션을 반복하려면 그 옆에 있는 반복 아이콘을 클릭하세요.

뛰자!



음... 너무 느리죠?
더 빨리 움직이자!

프레임 이동을 0.1초 간격으로 줄이고 애니메이션 길이를 0.8초로 변경합니다.
이때 하단의 Snap을 0.1로 변경하면 시간 척도를 0.1씩 이동시킬 수 있습니다.



이건 어때…



좋은!

GDScript에서 애니메이션을 재생하려면...

func _ready():
    var animationPlayer = $AnimationPlayer
    animationPlayer.play("Run")

끝났다.
도움이 되었기를 바랍니다😃