로블록스 애니메이션 에디터 사용하기

로블록스 스튜디오에서 기본으로 제공하는 애니메이션 에디터를 사용하여 원하는 커스텀 애니메이션을 만들어보자.

모델 선택과 애니메이션 에디터 열기

로블록스 스튜디오의 플러그인 탭을 보면 Animation Editor 가 디폴트로 제공되고 있다. 인간형 캐릭터나 비 인간형 캐릭터 모두 애니메이션을 제작할 수 있다.

rig(파트들이 Motor6D로 연결된 모델, 특히 휴머노이드)를 선택하고 Animation Editor를 선택하자. 처음 애니메이션 창을 열었다면 옆쪽의 "Build Rig"를 선택하여 기본을 제공하는 Rig를 생성하고 나서 선택하면 된다. Animation Editor를 선택하면 원하는 애니메이션의 이름을 정해야 되는 입력창이 뜨고 애니메이션 이름을 입력하면 타임라인과 애니메이션 관련 정보를 보여주는 창이 뜨게 된다.

원하는 포즈를 만들어보자.

가장 단순한 애니메이션을 생각해보고 일단 만들어보자. 여기서는 머리를 왼쪽으로 45도 정도 돌리는 애니메이션을 만들것이다.

이 애니메이션을 만들기 위해서는 두가지 포즈가 필요하다.

1. 기본 포즈(그냥 서있는 원래 포즈)
2. 기본 포즈에서 머리만 왼쪽으로 45도 돌린 포즈

기본 포즈에 대해서는 그냥 놔두면 되고 2번의 원하는 포즈를 원하는 타임에 넣어주면 된다.

타임라인창에서 scrubber bar(파란색 라인) 을 마우스로 드래그 해서 0:15에 가져다 놓자. 0:15라는 표현은 0초의 15프레임을 의미한다. seconds:frames 을 뜻하고 애니메이션은 기본적으로 1초당 30프레임을 가진다. 0초의 15프레임은 결국 0.5초를 의미하게 된다.

0.5초에 스크러버 바를 가져다 놓고 Rig(여기서는 휴머노이드)의 머리파트를 선택하자. 그러고 나서 왼쪽으로 45도 각도로 돌려준다. 그렇게 포즈를 취해주면 아래와 같이 트랙킹리스트에는 Head 파트가 나오고 오른쪽의 타임 라인에는 다이아몬드형태의 심볼이 생기는데 이것을 키프레임(Keyframe)리라고 한다.

키프레임에 그 타임라인의 모든 포즈 정보가 들어가게 된다. Head를 왼쪽으로 45도 돌리는 포즈를 완성하자. 간단한 포즈이지만, 파트의 이동과 회전, 스케일에 대한 정보가 없으면 이전 포스팅을 먼저 확인하자. 

2021.04.21 - [로블록스 개발 기초] - 로블록스 스튜디오 살펴보기(3/4)

 

완료했으면 왼쪽 위의 Play버튼을 눌러서 만든 애니메이션을 확인해보자. 이 간단한 애니메이션은 이미 완성되었다. 

로블록스에서 애니메이션은 1초(30)이 기본이지만, 아래 이미지처럼 시간을 늘려주면 애니메이션의 시간(초)를 눌려줄 수 있다.

키프레임 조정하기

위에서 살펴봤듯이 스크러버 바를 원하는 타임라인에 놓고 Rig의 포즈를 변형하면 자동으로 키프레임이 생성된다. 그 외의 방법으로 트랙킹 리스트창에서 원하는 파트의 ... 버튼을 눌러서 나오는 메뉴의 aDD Keyframe버튼으로 만들 수 있다.

 

여러가지 파트의 Keyframe을 동시에 추가하기 위해서는 아래 이미지의 타임라인의 맨 윗부분을 마우스 오른쪽 클릭하면 나오는 Add Keyframe Here를 통해서 추가할 수 있다. 이때 추가되는 키프레임들은 맨 뒤에 추가되었다면 마지막 포즈를 그대로 유지하고, 중간에 추가되었으면 변화되는 추가된 타임라인의 포즈 그대로 추가된다.

키프레임 이동

키프레임은 마우스 드래그를 통해서 쉽게 옮길 수 있다. 키프레임을 하나 옮기고 싶다면 그 키프레임을 선택하고 마우스 드래그를 하면 된다. 

 

원하는 타임라인의 모든 키프레임을 동시에 옮기고 싶다면 키프레임들의 맨 위에 있는 대표 키프레임을 드래그하면 모두 같이 움직인다. 

부분적인 키프레임들이라면, 원하는 키프레임을 마우스 왼쪽 드래그로 선택하고 드래그하면 원하는 키프레임들만 이동시킬 수 있다. 보통 일반적인 프로그램의 마우스 UI와 별반 다를바는 없으므로 어렵지 않게 가능할 것이다.

키프레임 복사

키프레임들의 이동처럼 일반적인 UI와 많이 다르지 않다. 원하는 키프레임을 선택하고 Copy 그리고 원하는 타임라인으로 이동하고 Paste하면 된다.

키프레임 삭제

삭제를 원하는 키프레임들을 모두 선택하고 Delete 버튼으로 삭제하자.

Animation Easing

Easing은 포즈와 포즈 사이에 채워주는 애니메이션에 대한 내용이다. 딱 두 포즈만 만들었지만, 그 사이의 타임라인에는 두 포즈를 스무쓰하게 연결해주는 애니메이션으로 채워져 있다. 이 자동으로 채워진 애니메이션에 대해서 어떻게 채워 넣는가? 에 대한 정보가 Easing이다. 디폴트로는 두 포즈의 애니메이션은 선형적으로 이루어져 있다. 아래의 동영상을 보면 선형(Linear) Easing에 대해 살펴볼 수 있다.

반면에 다른 Easing을 사용한 동영상을 살펴보자. Cubic Easing의 경우는 아래의 동영상으로 살펴볼 수 있다.

Easing 타입을 바꾸려면 원하는 키프레임을 선택하고 마우스 우클릭으로 나오는 메뉴에서 Easing Style을 을 선택하면 된다. Easing Direction 으로 Easing이 적용되는 방향... 방향이라고 표현하면 애매한데, 예를 들어 Cubic Easing의 경우 처음에는 느리게 시작하다가 마지막부분에 빠르게 적용되는데 이 상태를 Easing Direction 이 In 인 상태이고 Out으로 바꾸면 처음이 빠르고 나중이 느려지게 된다. InOut으로 바꾸면 처음에 느리고 중간에 빠르고 마지막에 또 느려지게 된다.

Easing Style

• Linear : 일정한 속도의 애니메이션으로 보여줌
• Constant : 포즈 사이에 애미메이션을 안 보여줌. 즉, 두 포즈 사이에 따로 애미메이션을 넣지 않고 딱딱 끊어지는 애니메이션이 됨.
• Cubic : 3차 그래프 느낌의 보간 애니메이션을 보여줌.
• Elastic : 마치 고무줄에 붙어있는 물체를 움직이는 듯한 보간 애니메이션을 보여줌
• Bounce : 애니메이션의 마지막에 고무공이 팅기는 듯한 느낌의 보간 애니메이션을 보여줌

Easing Style

• Out : 처음을 빠르게 하고 마지막을 느리게
• InOut : 처음을 느리게 중간을 빠르게 마지막을 느리게
• In : 처음을 느리게 마지막을 빠르게

Inverse Kinematics

Inverse Kinematics는 약자로 IK, 포즈를 만드는데 도움을 주는 방법이다.

포즈를 만들 때, 간단한 포즈야 상관없겠지만, 어려운 포즈를 만들려면, 가령 오른쪽 팔을 기괴하게 구부린다고 가정해보자. 오른쪽 어깨는 어떻게 회전시키고 움직이고 그 다음 오른쪽 팔은 어떻게 하고, 그다음 오른쪽 손의 회전과 움직임으로 오른팔의 포즈를 완성시켜서 포즈를 만들려면 사실 너무 손이 많이 간다. 이런 방법을 Forward kinematics 라고 한다. 그와 반대로 오른손을 원하는 위치에 가져다 놓으면 어깨와 팔이 그 손의 위치에 맞게 저절로 계산되어져서 이동되는 방식이 Inverse Kinematics 라고 한다. 원하는 정확한 포즈가 되진 않겠지만, 원하는 포즈와 꽤나 비슷하게 나오고 적절하게 수정하면 정말 편하게 포즈를 취할 수 있게해주는 도구가 된다.

애니메이션 에디터에서 IK모드를 사용하고 싶으면 Rig옆의 IK 버튼을 누르면 된다. IK버튼을 누르면 ManageIK라는 창이 새로 뜨는데 그 창의 아래쪽에 "Enable IK"를 누르면 IK를 사용할 수 있는 상태로 바뀌게 된다.

IK 모드

Body 파트 모드와 Full Body 파트 모드가 있다.

• Body 파트 모드 : 관련된 팔다리들의 따로따로 적용받는 IK모드. 오른손을 움직이면 오른팔쪽에만 관련되서 움직이게 된다.
• Full Body 파트 모드 : 모든 파트를 다 사용하여 IK모드를 적용함. 오른손을 움직이면 오른팔쪽만이 아니라 몸통, 다리 머리까지 적용을 받는다. 물론 적용받을 정도로 움직였을 때 얘기임. 

Pinning 파트

위의 Full Body 파트 모드인 IK 모드를 사용하면 Rig의 움직임에 관련된 모든 파트에 다 적용된다고 밝혔다. 사용해보면 알겠지만 파트의 움직임에 몸전체가 움직여 버리는 경우도 있고, 생각보다 사용하기 곤란할 때가 많다. 그럴때는 특정파트는 적용되지 않고 딱 움직이지 않게 고정시켜 버릴 수 있다. 고정되길 원하는 파트에 핀을 적용시켜면 된다.

아래의 동영상은 왼쪽(?)발에 핀으로 고정시키고 IK를 적용시키는 모습을 보여준다.

특정 파트에 핀을 체크하기 위해서는 ManageIK창에서 원하는 파트를 찾아서 핀 모양의 아이콘을 클릭하면 된다.

IK모드를 빠져나오기 위해서는 ManageIK 창의 아래쪽의 Disable IK 버튼을 클릭하면 된다. 얼핏 모든 IK관련 정보가 날아가는 것처럼 보이지만 IK모드에서 만든 IK정보는 모두 저장되어 있다. 

애니메이션 셋팅

애니메이션 반복 재생 

애니메이션 에디터에서 애니메이션을 편집할 때, 아래의 이미지와 같이 Looping 버튼을 누르면 애니메이션이 자동으로 반복 재생하게 된다. 반복 재생하게 될 때의 모습을 살펴볼 수 있으므로 매우 유용하다. 시작 포즈와 끝 포즈를 확인할 수 있다. 매끄러운 반복 재생을 생각하고 있다면 시작 포즈의 키프레임들을 그대로 마지막 포즈의 키프레임으로 재사용하는게 좋다. 

애니메이션의 우선 순위

로블록스의 애니메이션 체계는 우선순위를 사용한다. 순위가 낮은 애니메이션이 플레이중에 순위가 더 높은 애니메이션을 플레이하면 낮은 순위의 애니메이션을 덮어 버리고 플레이된다. 

애니메이션 에디터 창의 ... 버튼을 클릭하여 나오는 메뉴에서 "Set Animation Priority" 를 선택하여 원하는 우선 순위를 정해줄 수 있다.

 

애니메이션의 우선 순위에 대한 높음 낮음은 다음과 같다.

애니메이션 이벤트

애니메이션 중에 이벤트를 발생시키기 위해서는 event marker를 사용한다. 애니메이션 중에 스크립트를 사용할 필요가 있을 때가 일반적으로 이벤트를 사용한다. 공격 애니메이션 중에서 시작에서부터 바로 데미지가 들어가는 것이 아니라 원하는 동작중일 때 데미지가 들어가게 만들고 싶다면? 단순히 시간차를 주고 데미지를 줄 것이 아니라 실제 애니메이션중에 내리치는 동작일 때 이벤트를 만들어서 그 타이밍에 데미지가 들어갈 수 있게 코드를 만들어 줄 수 있을 것이다. 

이벤트 보기

디폴트 상태에서는 이벤트가 보이지 않는다. 아래 이미지의 기어버튼을 클릭하여 Show Animation Events 를 선택해주어야 보인다.

Animation Events 바는 애니메이션 에디터의 컨트롤바 바로 아래에 나오게 된다.

 

이벤트 생성

이벤트를 생성하려면, 원하는 타임라인에 스커러버 바를 놓고 아래의 이미지에서의 이벤트 아이콘과 플러스 모양의 버튼을 클릭하면 이벤트가 추가된다. 혹은 원하는 타임라인의 Animation Events 바에 마우스를 위치하고 우클릭 메뉴에서 Add Animation Event Here 를 선택하면 된다.

애니메이션 이벤트 생성시에 나오는 입력창에서 이벤트의 이름과 파라메터를 문자열로 지정해 줄 수 있다. 입력을 모두 마치고 Save 버튼을 누르면 이벤트 아이콘이 원하는 타임라인에 생성된 것을 확인할 수 있다.

이벤트를 소스 코드에서 사용하기

이벤트를 감지는 로컬 스크립트에서만 가능하다. 로컬 스크립터를 사용하여야 하고 AnimationTrack 객체의 GetMarkerReachedSignal()함수를 사용하여 소스 코드에서 감지할 수 있다. AnimationTrack 객체는 애니메이션의 플레이를 컨트롤하는 객체이다. 

local Players = game:GetService("Players")
 
local player = Players.LocalPlayer
local character = player.Character
if not character or not character.Parent then
    character = player.CharacterAdded:Wait()
end
local humanoid = character:WaitForChild("Humanoid")
local animator = humanoid:WaitForChild("Animator")
 
-- "Animation" 인스턴스를 생성
local walkAnim = Instance.new("Animation")
-- 원하는 "AnimationId" 를 설정
walkAnim.AnimationId = "rbxassetid://5432167890"
 
-- 애니메이터에서 애니메이션트랙을 불러옴.
local walkAnimTrack = animator:LoadAnimation(walkAnim)
 
-- "GetMarkerReachedSignal"함수로 불러온 이벤트를 단순하게 프린트만 해주는 함수와 연결.
walkAnimTrack:GetMarkerReachedSignal("FootStep"):Connect(function(paramString)
    --- 이벤트 생성시에 입력한 Param 문자열을 paramString이라는 이름의 파라메터로 함수에서 사용 가능함.
    print(paramString)
end)

이벤트 복제

이벤트는 애니메이션 전체에 걸쳐서 여러번 사용가능하다. 하나를 만들고 그대로 카피&페이스트로 복제가 가능하다.

애니메이션내에서 여러번 이벤트를 복사하여 사용할 수 있음을 알아두자.

복제된 이벤트라고 하더라도 파라메터는 바꿀 수 있다. 이벤트 아이콘에서 "Edit Animation Event"를 선택하면 Param 문자열을 바꿀 수 있다.

저장과 내보내기(Saving 과 Exporting)

지금까지 잘 만들어온 애니메이션을 저장하고 실제 게임에서 사용하기 위해서도 몇가지 과정이 필요하다.

애니메이션의 저장

만들어 놓은 애니메이션을 저장하기 위해서는 KeyframeSequence 객체로 만들어서 저장할 수 있다. 로블록스 애니메이션 에디터의 ...버튼을 클릭하면 나오는 메뉴에서 Save 혹은 Save as 를 통해 AnimSaves의 자식형태로 애니메이션이 저장된다. 

이 방법은 애니메이션을 저장하는 방법이지 실제로 게임에서 사용되기 위한 방법이 아니다.  실제로 게임에서 사용하기 위해서는 로블록스 서버에 애니메이션을 업로드(Export)시켜야 한다.

Exporting to Roblox

 실제 게임에서 커스텀하게 만든 애니메이션을 사용하기 위해서는 로블록스 서버에 Export해 줘야 한다. Export 를 해서 나온 AssetID를 사용하여 실제 게임에서 애니메이션을 구현할 수 있다. Export 하는 방법은 저장과 비슷하지만 애니메이션 에디터창에서 ... 버튼을 눌러 나오는 Context 메뉴에서 Exrpot를 선택한다.

 

이렇게 Export된 애니메이션은 아래의 이미지처럼 Asset ID를 가지게 되고 그 ID를 사용하여 실제 게임에서 사용된다.

 

애니메이션을 실제 게임에서 사용할 때, 로블록스에서 기본 제공하는 애니메이션이 아닌 커스텀 애니메이션으로 교체하고 싶을 경우가 있다. 점프, 달리기 애니메이션을 내가 만든 애니메이션으로 교체하고 싶은 경우에는 마지막 키프레임의 이름을 "End"로 바꿔줘야 한다. 정확하게 "End"로 바꿔줘야 한다. 키프레임의 이름을 바꾸는 것은 아래의 이미지처럼 마지막 키프레임대표 아이콘을 선택하고 나오는 컨텍스트 메뉴에서 Rename Key Keyframe을 선택하면 가능하다.

 

실제 애니메이션을 게임에서 사용하는 방법은 아래 포스팅을 확인하자.

2021.05.26 - [분류 전체보기] - 게임에서 직접 만든 커스텀 애니메이션 사용하기