고도 엔진에서 애니메이션에 음악 및 효과음 같이 넣어 캐릭터 움직이는 애니메이션 구현 방법

AnimationPlayer을 활용한 캐릭터 애니메이션 구현 방법

AnimationPlayer을 활용해서 캐릭터 애니메이션을 구현하는 방법에 대해서 알아본다. 기본적으로 캐릭터 애니메이션은 AnimatedSprite2D에 넣어 단순히 프레임을 높이는 식으로 캐릭터 애니메이션을 구현할 수 있다. 하지만 단순히 이렇게 사용할 경우 캐릭터가 움직이는 모션에 특정 효과를 넣는다든지, 소리를 넣는다든지의 추가적인 작업을 할 수 없다. 따라서 AnimationPlayer 을 통해 애니메이션을 커스터마이징하고 원하는 방법과 수단을 동원해서 재생할 수 있다.

근본적으로 그런 작업을 위해서는 AnimationPlayer을 사용하는데, 우선 그전에 캐릭터 Sprite2D에 적용하는 애니메이션 프레임을 봐 본다.

우리는 기존에 애니메이션 프레임을 Sprite2D에 등록하여, left, right, up, down 등의 애니메이션을 만들고, 이 프레임을 수치를 계속 늘려주는 Play 작업을 통해 일정한 속도로 반복하곤 했었다. 하지만 이럴 경우 모든 프레임은 일정한 속도로 재생될 뿐더러 자세한 설정이 불가능하다. 이 경우에는 AnimationPlayer 을 사용해서 상세한 설정이 가능하다.

먼저 AnimationPlayer 을 장면에 추가한다.

AnimationPlayer을 선택한 뒤 애니메이션 -> 새로 만들기를 통해 임의 애니메이션 세트를 하나 만든다.

여기서 하나의 애니메이션 세트는 여러 동작을 포함하여 애니메이션 하나를 만들 수 있다.

걷기 애니메이션을 하나 만들어 보겠다. 이름은 walk로 한다.

그러면 흔히 영상 편집 소프트웨어에서나 보는 트랙 창을 볼 수 있는데, 여기서 우리가 초 단위로 애니메이션을 추가할 수 있다. 플레이어가 걷는 모습과 함께 특정 소리를 매칭하기 위해서, 트랙은 총 3가지가 있으면 된다. 먼저 어떤 애니메이션을 재생할 것인지를 담당하는 트랙, 몇 번째 프레임의 애니메이션을 표시할 것인지를 담당하는 트랙, 소리를 재생하는 트랙 3가지가 있으면 된다. 왼쪽의 트랙 추가 버튼을 눌러 속성 트랙을 누른다.

먼저 어떤 애니메이션을 재생할 것인지를 담당하는 animation 트랙을 추가한다.

속성 트랙을 누르고,

AnimatedSprite2D 의 노드를 선택한다.

이 노드의 속성 중 하나인 animation 속성을 선택한다. 이 속성은 AnimatedSprite2D 인스펙터에서도 볼 수 있는 속성이다. 이 값을 AnimationPlayer의 애니메이션으로 제어하겠다는 의미이다.

이렇게 추가가 되었으면, 마찬가지로 같은 노드의 frame 속성도 추가한다.

frame 속성은 int 값을 의미하는 속성으로 몇 번째 프레임을 나타내는 속성 값이다. 이 트랙으로 프레임을 변화시킬 수 있다.

이렇게 2개 트랙이 추가되었으니 임의로 애니메이션 키 프레임을 추가해보자. 트랙 공간의 빈 공간에 우클릭하고, 키 삽입을 눌러 임의 키를 추가한다. (이에 대한 자세한 설명은 애니메이션 개발 기록을 참고한다.)

그리고 이 키의 실제 Value 값을 어떤 애니메이션으로 지정할 것인지 오른쪽 속성 필터에서 선택한다.

다음으로 frame 트랙에도 키를 여러개 삽입한다. 여기서는 보간을 사용할 것이기 때문에 시작 애니메이션을 시작 지점에, 끝 애니메이션 프레임을 끝 지점에 지정한다. 각각 프레임을 선택하고 오른쪽 속성에서 애니메이션 프레임이 몇 번째인지 지정한다.

그리고 두 사이 값을 자동으로 보간하기 위해 트랙 오른쪽의 점선 모양을 누르고 연속적으로 변경해준다. 이러면 엔진이 알아서 사이 프레임 수치를 보간해서 사이에 존재하는 애니메이션 프레임으로 추가해준다.

참고로 오른쪽 위 수치를 조절하여 애니메이션 길이를 변경할 수 있다.

다음으로 오디오 재생 트랙을 추가하여 소리를 추가한다.

오디오 재생 트랙을 사용하기 위해서는 장면에 AudioListener2D와 AudioStreamPlayer2D 가 존재해야 한다. 각각의 용도는 관련 기록을 참고하길 바란다. AudioStreamPlayer2D 가 실제 오디오를 출력하는 노드이므로, 오디오 재생 트랙을 추가하면서 요구하는 노드를 AudioStreamPlayer2D로 선택하여 등록한다.

그리고, 오디오 트랙이 생성되면 이 위치에 오디오 wav 또는 mp3 파일을 드래그해서 재생할 수 있다.

오디오의 시작 길이를 조절하고자 하는 경우 오른쪽 속성을 통해 StartOffset을 조절하여 시작 지점을 변경할 수 있다.

소리의 이펙트 및 증폭이 필요한 경우는 오디오 버스를 참고하길 바란다. 이 역시 홈페이지에 오디오 관련 기록으로 작성되어 있다.

아무튼 재생하면서 소리가 재생되면 좋을 지점에 여러개 클립을 붙여넣는다. 이제 애니메이션을 재생하기 위해 이 AnimationPlayer 을 통해 Play()하면 된다.

플레이어가 움직일 때 Play하기 위해 플레이어 CharacterBody2D 측에 AnimationPlayer 을 Export 하여 객체를 입력받고, 해당 AnimationPlayer.Play("애니메이션 명"); 을 통해 아까 우리가 커스터마이징한 AnimationPlayer 객체로 애니메이션을 재생할 수 있다.

제대로 소리가 재생되는 것을 확인할 수 있다.