[고도4] Part.1 - 7 애니메이션 적용

이번 시간에는 주인공 캐릭터에 애니메이션을 적용할 것인데, 그에 앞서 캐릭터를 수정, 재사용하기 편하게 스테이지와 분리하자. 우선 파일 시스템에서 character라는 이름으로 폴더를 만들자.

그리고 stage_1 씬에서 Player노드를 character폴더에 드래그한다.

그러면 Player노드와 그 자식노드들이 player.tscn이라는 별개의 씬으로 묶여서 저장된다. 이렇게 씬 내에 존재하는 노드들을 묶어서 또 다른 씬으로 만들 수도 있다.

stage_1씬을 열 때와 마찬가지로 파일 시스템에서 player씬을 더블클릭하여 열어보자.

그리고 player씬의 루트 노드(해당 씬의 최상위 노드)인 Player노드를 선택하고 인스펙터에서 Transform 속성들을 초기값으로 설정하고 저장(Ctrl+S)하자

이제 stage_1씬으로 돌아가면 stage_1에서도 캐릭터의 위치가 원점으로 돌아간 것을 볼 수 있다. 이처럼 player씬에서 변경한 내용은 다른 씬에서도 적용된다.

stage_1에서의 플레이어 캐릭터의 위치를 적당히 옮겨보자

그러면 Player노드의 Transform의 position속성 바로 옆에 원본 씬에서의 값으로 되돌리는 버튼이 나타난다.

이는 해당 속성의 값이  원본 씬에서의 값과는 다름을 나타낸다. 이것이 표시되면 더 이상 해당 속성은 원본 씬의 수정에 영향받지 않는다.

이제 player씬에서 애니메이션을 적용해보자. AnimationPlayer를 선택하자.

그럼 메인스크린 아래 바텀 패널에 Animation탭이 나타난다.  여기서 애니메이션을 제작, 수정할 수 있다.

스크린샷과 같이 Animation메뉴의 New를 클릭해서 새 애니메이션을 생성한다.

새 애니메이션의 이름은 idle로 지어주자

이렇게 애니메이션 목록에 idle이 나타날 것이다.

애니메이션 탭이 켜져있는 상태에서, Sprite노드를 선택하고 인스펙터를 보면 속성들 바로 오른쪽에 열쇠모양 버튼이 나타난다. texture속성에 붙어있는 열쇠모양 버튼을 클릭하자.

확인 창이 나타나면 Create버튼을 누르자

이제 idle애니메이션에서 Sprite의 texture속성을 조작할 수 있는 트랙이 생겼다.

트랙을 우클릭하고 Insert key를 선택하자.

그러면 트랙에 새로운 [키프레임]이 생성된다. [키프레임]은 특정 타이밍에 해당 트랙이 가리키는 속성의 값을 지정한다.

키프레임 선택하면 인스펙터에서 키프레임의 타이밍(time)과 값(value)을 볼 수 있다.

생성한 키프레임을 0.5초 지점에 위치시키자.

그리고 파일 시스템으로부터 idle_001.png파일을 0.5초 지점의 키프레임의 값에 드래그하자.

애니메이션 탭의 오른쪽 상단의 루프버튼를 클릭해서 파랗게 활성화 시켜주자. 루프가 활성화되면 애니메이션을 재생할 때 무한히 반복하게 된다.

이제 애니메이션 탭 왼쪽 상단의 버튼들을 이용해서 애니메이션을 재생시켜보자. 가만히 서서 0.5초마다 팔을 움직이는 모습을 볼 수 있을 것이다.

이번에는 달리는 애니메이션을 만들어보자. run이라는 이름으로 애니메이션을 생성해주자.

idle애니메이션을 만들 때에는 인스펙터에서 열쇠모양 버튼을 클릭하여 트랙을 생성했지만, 이번에는 재생 버튼 아래의 Add Track버튼을 이용해서 트랙을 생성해보자.

Add Track버튼을 클릭하고 Property Track메뉴를 선택하자.

씬에 존재하는 노드목록이 나타난다. Sprite노드를 선택하자.

그러면 Sprite노드의 속성 목록이 나타나는데 texture속성을 선택하자.

texture트랙이 생성될 것이다.

이번에는 키프레임을 6개 준비하고, 루프 버튼 바로 왼쪽에 1.2를 입력하여 run애니메이션의 길이를 1.2초로 설정하자.

그리고 키프레임들을 0.2초 간격으로 배치하자

키프레임이 너무 다닥다닥 붙어있어 조작하기 어렵다면 확대하자. 애니메이션 탭에서 Ctrl을 누르며 마우스 휠을 굴리거나 오른쪽 아래의 슬라이드를 조정하여 배율을 조정할 수 있다.

run 애니메이션도 루프를 활성화 시키자

이제 각 키프레임들의 값을 각각 run_000.png부터 run_005.png까지 순서대로 지정하자. idle 애니메이션을 만들 때처럼 각 키프레임을 선택하고 인스펙터의 value값에 해당 이미지 파일을 드래그하면 된다.

완료했다면 재생해보자.

재생해봤더니 0.2초 간격은 좀 느린 것 같다. 애니메이션의 총 길이를 0.6초로 줄이고 키프레임간의 간격이 0.1초가 되도록 다시 배치해보자.

애니메이션 탭 하단의 Snap수치를 낮추면 0.1초보다도 더 작은 간격으로 배치할 수도 있다. 원한다면 해보자.

최종적으로 이러한 모습이 나와야 한다. 재생해보면 적당한 속도로 달리는 애니메이션이 재생될 것이다.

마지막으로 체공 애니메이션을 만들자.

in_air라는 이름의 애니메이션을 생성하고 마찬가지로 Sprite의 texture속성에 대한 트랙을 생성해준 뒤 키프레임에 in_air_000.png파일을 값으로 지정해주자.

루프는 활성화해도 되고 안해도 된다.

애니메이션 목록을 클릭해서 모든 애니메이션(idle, in_air, run)이 제대로 있는지 확인하자.

RESET이라는 애니메이션도 있을 것인데, 이는 애니메이션의 적용을 받는 속성들의 기본값을 저장하는 용도로 사용된다.

만든 애니메이션들이 적절하게 재생되도록 player.gd스크립트에 스크린샷과 같이 코드를 추가해주자.

_process메서드에도 스크린샷을 보며 코드를 추가하자.

들여쓰기와 오타에 주의하자.

이제 stage_1씬을 실행하면 되는데, 씬이 2개가 되었으니 지금까지처럼 [현재 씬 실행하기]로 실행하면 실수로 stage_1이 아닌 다른 씬을 실행하는 귀찮은 상황이 생기기 쉽다. 그러니 [메인 씬 실행하기]기능을 사용해보자.

에디터 왼쪽 위 메뉴를 통하여 프로젝트 설정창을 열고 Application - Run 설정에서 Main Scene을 지정해주자.

stage_1 씬을 지정하자.

제대로 지정했다면 스크린샷처럼 표시될 것이다.

이제 F5키를 입력하거나 에디터 오른쪽 상단의 메인 씬 실행 버튼을 클릭하면, 현재 어느 씬을 보고 있던 간에 stage_1씬이 실행될 것이다.

실행하고 캐릭터를 조작해보면 기본, 이동, 체공 애니메이션이 적용된 모습을 볼 수 있다.