이 글에서는 2D 캐릭터용 애니메이션 스테이트 머신을 구성하여 정의된 범주에 따라 캐릭터가 각기 다른 플립북 애니메이션으로 전환할 수 있도록 하는 방법을 배워보겠습니다.
이 튜토리얼은 이미 이동 구성이 완료된 페이퍼 2D 캐릭터와, 그 캐릭터에 전환시키고자 하는 플립북 애니메이션이 몇 개 있다고 가정합니다. 캐릭터나 플립북 애니메이션이 없는 경우, 내려보기 2D 게임 구성 문서에서 페이퍼 2D 캐릭터 구성 및 이동 적용 관련 정보와 이 튜토리얼에 사용된 샘플 애셋 링크를 확인하시기 바랍니다.
프로젝트를 열고 페이퍼 2D 캐릭터 준비가 되었으면 다음 단계를 따라합니다.
변수 구성
-
프로젝트 안에서 페이퍼 2D 캐릭터 블루프린트를 엽니다 (우리 예제에서는 TopDownCharacter 입니다).
-
내 블루프린트 창에서 변수 추가 버튼을 클릭하여 Bool 변수를 만들고 이름을 IsMoving? 이라 합니다.
-
플립북 애니메이션 중 (Idle, 빈둥 같은 것) 하나를 기반으로 변수를 또하나 만들고 이름을 지은 다음 Paper Flipbook 유형으로 설정합니다.
제작중인 게임 유형에 따라 여러가지 애니메이션이 있을 수 있습니다. 대부분의 캐릭터 기반 게임은 캐릭터가 빈둥거리는 ( 또는 쉬거나 움직이지 않는) 상태가 있습니다.
-
컴파일 을 클릭한 다음 변수의 기본값을 해당하는 플립북 애셋으로 설정합니다.
위에서 IdleFlipbook 애니메이션에 Idle 플립북 애니메이션을 할당했습니다.
(옵션) 명확성을 위해, 변수를 Animations 라는 카테고리 에 넣는 것도 좋습니다.
카테고리 이름을 원하는 대로 입력하여 체계적인 정리가 가능합니다.
-
캐릭터에 재생할 수 있었으면 하는 애니메이션 각각에 대해 전 두 단계를 반복합니다.
위에서 RunFlipbook 라는 페이퍼 플립북 변수를 하나 더 만들고 컴파일 을 클릭한 다음 그 변수에 대한 Default Value (기본값)을 그에 해당하는 Run 플립북 애니메이션으로 설정했습니다. 우리 예제에는 애니메이션이 둘 밖에 없지만, 사망 애니메이션이나, (있다면) 총 재장전 또는 근접 공격 애니메이션, 아이템 수집 또는 사용 애니메이션 등을 추가할 수도 있습니다.
플립북 애니메이션 상태 각각에 대해 변수를 추가한 이후에는, 다음 단계로 진행합니다.
애니메이션 구성 업데이트
다음으로 애니메이션 스테이트 업데이트 처리를 위한 스크립트를 작성하겠습니다.
-
이벤트 그래프 안에서 우클릭 한 다음 Custom Event 를 검색 추가합니다.
Custom Event 무언가를 UpdateAnimation 이펙트로 호출합니다.
-
그래프에 다시 우클릭 한 다음 Get Velocity 노드를 추가한 뒤, Return Value 를 끌어놓고 Vector Length 노드를 추가합니다.
Velocity 의 Vector Length 를 사용하여 캐릭터가 이동중인지 아닌지를 알 수 있습니다.
-
Vector Length 의 Return Value 를 끌어 > 노드를 놓은 다음, IsMoving? 변수를 끌어 Bool 반환에 놓아 설정합니다.
애니메이션 스테이트 머신 함수
여기서는 현재 상태 검사 및 그에 맞게 사용할 플립북 애니메이션 출력을 할 함수를 만들어 주겠습니다.
-
내 블루프린트 창에서 Anim State Machine 이라는 함수 를 새로 만듭니다.
-
함수의 디테일 패널에서 IsMoving? 이라는 부울 입력 과 Output Flipbook 이라는 출력 페이퍼 플립북을 추가합니다.
이 함수는 IsMoving? 라고도 하는 우리 변수 값을 받아 움직이고 있는지 검사한 다음 어떤 상태에 있는지 (움직이는지 아닌지) 결정하기 위한 테스트 케이스로 사용합니다. 그런 다음 Output Flipbook 을 출력하여 곧 사용할 스프라이트를 설정합니다.
-
함수의 입력 실행 핀에서 Branch (분기) 노드를 연결합니다.
이 함수가 호출되면 가장 먼저 IsMoving? 변수에 대한 True/False 검사를 실행합니다.
-
콘텐츠 브라우저 로 돌아와서 우클릭 한 다음 블루프린트 아래 Enumeration (Enum)을 만들고 Animation State 라 해줍니다.
Enum 을 사용해서 캐릭터가 있을 수 있는 모든 애니메이션 상태 목록을 만들고 나면, 거기서 선택할 수 있습니다.
-
Enum 을 열고, 캐릭터가 들어갈 각 애니메이션에 대한 상태를 추가합니다.
우리는 Idle 과 Run 밖에 없지만, 여러분 상황에 따라 추가로 만들어야 할 수도 있습니다.
-
페이퍼 2D 캐릭터 블루프린트로 돌아가 AnimationState 라는 변수를 새로 만들고 Enum Animation State 로 설정합니다.
-
Anim State Machine 함수 안에서 Alt 키를 누르고 AnimationState 변수를 끌어 놓아 Set 합니다.
-
AnimationState 변수를 하나 더 끌어놓고 Branch (분기) 노드의 True 와 False 핀 각각에 연결합니다.
True 에 연결된 Enum 의 경우, 상태를 Run 으로, 다른 Enum 은 Idle 로 설정합니다. IsMoving? 이 True 이면 달리기 상태로, 움직이지 않고 있으면 빈둥 상태로 설정하는 것입니다. 예제는 움직이는지 아닌지만 검사하는 반면, 분기 노드를 추가시켜 필요에 따라 다른 검사를 할 수도 있습니다.
참고로 검사 처리 순서가 중요하며, 특정 상태의 우선권을 다른 상태보다 높이고 싶을 수가 있습니다. 예를 들어 캐릭터의 사망 플립북 애니메이션이 있다면 먼저 처리해주고 싶을 것이므로, 캐릭터가 죽었는지 검사해서 그렇다면, 바로 사망 애니메이션을 재생하고 캐릭터를 없앱니다. 죽지 않았다면, 다음 검사로 넘어갑니다 (즉 캐릭터가 이동, 공격, 아이템 사용중인지 등을 검사하고, 마지막으로 캐릭터가 아무것도 하지 않고 있으면 빈둥 포즈가 됩니다).
-
Ctrl 키를 누르고 IdleFlipbook, RunFlipbook, Animation State 변수를 끌어놓은 다음, 우클릭 후 Select (선택) 노드를 추가합니다.
여기서는 그래프에 애니메이션 변수 각각을 끌어놓아야 합니다.
-
각 노드를 연결하여 함수를 완성시킵니다. 아래와 비슷할 것입니다.
이제 함수가 움직이는지 검사한 다음 그렇다면 Enum 상태를 Run 으로 (아니라면 Idle 로) 설정합니다. 그리고 Select 노드를 사용하여 Enum 에서 Animation State 를 구한 다음, 그에 따라 해당하는 플립북을 사용할 Output Flipbook 으로 할당합니다.
애니메이션 업데이트 이벤트 마무리
함수가 완료되었으니, Update Animation Event 의 일부분으로 호출해 주고 나머지 스크립트를 마무리하겠습니다.
-
이벤트 그래프 에서 내 블루프린트 창에 Show Inherited Variables (상속된 변수 표시)를 선택한 다음 Ctrl 키를 누르고 Sprite 를 끌어놓습니다.
-
Anim State Machine 함수를 끌어놓고 Set Is Moving? 노드에 연결한 다음, Sprite 를 끌어놓고 Set Flipbook 노드를 추가합니다.
-
아래와 같이 UpdateAnimation 커스텀 이벤트에 대해 모든 노드를 연결합니다.
-
MoveForward 이벤트의 Add Movement Input 노드 뒤에 Update Animation 커스텀 이벤트를 호출합니다.
-
컴파일, 저장 후 에디터에서 플레이합니다.
캐릭터의 이동 여부에 따라 두 가지 상태가 전환되는 캐릭터가 생겼습니다.
정리하자면, 이 구성에 애니메이션 스테이트를 추가하는 방법은 다음과 같습니다.
- 캐릭터가 들어가고자 하는 애니메이션 스테이트 각각에 대해 플립북 애니메이션을 준비합니다.
- 그 애니메이션을 페이퍼 2D 캐릭터 블루프린트 안에 플립북 변수로 추가 및 설정합니다.
- 각 스테이트를 앞서 만든 Animation State Enum 에 추가합니다.
- 캐릭터의 각 상태 진입 시점을 결정하는 조건을 만든 다음 Anim State Machine 함수에 추가합니다.
- 플립북 변수 각각을 Anim State Machine 함수 안의 Select 노드에 연결합니다.