# 애니메이션 에디터

## 개요 <a href="#overview" id="overview"></a>

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-00730a10ca045dc3f6d2847f8b4fdc58da625d8f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**애니메이션 에디터**는 ODA(OVERDARE Deformable Avatar) 기반의 아바타 표준에 맞춘 애니메이션을 제작하고 편집할 수 있는 강력한 도구입니다.

## 특징

스튜디오에 내장된 애니메이션 에디터를 통해 별도의 외부 프로그램 없이도 스튜디오 작업 흐름 내에서 직접 애니메이션을 제작할 수 있으며, 외부에서 제작된 FBX 애니메이션 파일을 가져와 손쉽게 편집하는 것도 가능합니다.

* **타임라인**에서 키프레임 단위로 애니메이션을 정밀하게 편집하고, **미리보기 패널**에서 애니메이션을 실시간으로 편집하고 확인할 수 있습니다.
* 외부에서 제작한 **FBX** 애니메이션 파일을 가져올 수 있습니다.
* 작업한 애니메이션을 **서버에 등록**하고, 서버에 저장된 애니메이션 파일을 불러와 사용할 수 있습니다.
* **애니메이션 이벤트**를 설정해 스크립트에서 필요한 처리와 연동할 수 있습니다.

## 애니메이션 에디터 표시 <a href="#how-to-use" id="how-to-use"></a>

애니메이션 에디터는 OVERDARE Studio 최상단 탭 영역에서 **Model탭**을 선택하면 출력되는 **Animation Editor 버튼**을 클릭해서 표시할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-e401f173f2b77f2fb5d5502c7700431f60a4dc70%2FAnimEditor1.png?alt=media" alt=""><figcaption></figcaption></figure>

## 화면 구성

애니메이션 에디터의 화면은 다음과 같이 구성되어 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-53b60f963e4cc1cc042897d65f2d1b1b1a0d6bfa%2FAniEditorLayout.png?alt=media" alt=""><figcaption></figcaption></figure>

* **툴바** : 애니메이션을 저장하거나 불러올 수 있고, 미리보기 패널의 편집 모드를 변경할 수 있습니다.
* **Rig Hierarchy** : 아바타의 본 구조를 표시합니다.
* **미리보기 패널** : 타임라인의 현재 위치에 해당하는 애니메이션을 표시합니다.
* **키프레임 에디터** : 타임라인 기반으로 애니메이션을 정밀하게 편집할 수 있습니다.

## 사용 방법

### 툴바 기능 <a href="#toolbar-functions" id="toolbar-functions"></a>

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-89de5fcd0147e3215317c43f73fa16385abbad22%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="221.017578125">기능</th><th>설명</th></tr></thead><tbody><tr><td><strong>Save</strong></td><td>작업중인 애니메이션을 저장합니다.<br>(맵이 아닌 현재 PC의 스튜디오에 내부적으로 저장됩니다.)</td></tr><tr><td><strong>Save As</strong></td><td>작업중인 애니메이션을 다른 이름으로 저장합니다.</td></tr><tr><td><strong>Load</strong></td><td>저장한 작업 애니메이션을 불러옵니다.</td></tr><tr><td><strong>Import</strong></td><td><ul><li><strong>Import from OVERDARE :</strong> 서버에 등록된 내 애니메이션을 불러옵니다.</li><li><strong>Import from FBX :</strong> fbx 파일로 애니메이션을 가져옵니다.</li></ul></td></tr><tr><td><strong>Get Asset Id</strong></td><td>작업중인 애니메이션을 <strong>서버에 등록</strong>하고 Asset Id를 생성합니다.</td></tr><tr><td><strong>Create New</strong></td><td>새로운 애니메이션을 만듭니다.</td></tr><tr><td><strong>Select</strong></td><td>미리보기 패널의 편집 모드를 <strong>선택 모드</strong>로 변경합니다.</td></tr><tr><td><strong>Move</strong></td><td>미리보기 패널의 편집 모드를 <strong>이동 모드</strong>로 변경합니다.<br>(미리보기 패널에서 본을 클릭하여, 본을 이동시킬 수 있습니다.)</td></tr><tr><td><strong>Rotate</strong></td><td>미리보기 패널의 편집 모드를 <strong>회전 모드</strong>로 변경합니다.<br>(미리보기 패널에서 본을 클릭하여, 본을 회전시킬 수 있습니다.)</td></tr></tbody></table>

표시한 버튼을 눌러 선택한 본의 좌표축 편집 기준을 World나 Local로 변경할 수 있습니다.

<div align="left"><figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-597d0d8557e854a03dee596a48e799604efc8df2%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

### Rig Hierarchy **패널** <a href="#rig-hierarchy-panel" id="rig-hierarchy-panel"></a>

Rig Hierarchy 패널에 아바타의 골격 구조가 표시됩니다. Rig Hierarchy에서 본을 클릭하면 미리보기 패널에서도 해당 본이 선택됩니다.

<div align="left"><figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-7f07ee41eb7e992814132eac24e5d4fcbbc6c53f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

### **미리보기 패널** <a href="#preview-panel" id="preview-panel"></a>

**미리보기 패널**에는 타임라인의 현재 위치에 해당하는 애니메이션이 표시됩니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-9410d91c663c9fb2c96a98dff9bd8d763aa0edb2%2FAniEditorPreview.png?alt=media" alt=""><figcaption></figcaption></figure>

미리보기 패널에서 본을 선택한 다음, 편집 모드를 **Move**나 **Rotate**로 설정하면 해당 본을 기즈모(Gizmo) 축을 이용해 편집할 수 있습니다.

(타임라인의 현재 위치에 키프레임이 없는 경우, 기즈모 조작시 자동으로 키프레임이 생성됩니다.)

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-2e9a8d7c19dd96e2f6e63085fce22afc0164cd35%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**Show 토글**을 통해 배경과 바닥의 표시 여부를 설정할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-836318b57781f3813259fed0ab70bd3ec1a9d108%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### 키프레임 에디터 <a href="#keyframe-editor" id="keyframe-editor"></a>

타임라인에서 각 본에 대한 **트랙**을 추가하거나 제거하고, 각 본의 위치와 회전 정보를 키프레임 단위로 정밀하게 편집할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-d66db56083d2da076ee0721a7e805e4830e4e7f7%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**Add Track 버튼**을 눌러 각 본(Bone)에 대한 **트랙**을 추가하거나 제거할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-f859d4d7d5eccdabed88d84f5cb736186913107b%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**타임라인**은 시간별로 애니메이션의 키프레임을 편집하는 작업 영역입니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-ddb3b32ed79d74288224d9cab0057b3dd904973a%2FAniEditorTimeline1.png?alt=media" alt=""><figcaption></figcaption></figure>

타임라인 시작/끝 입력 필드에 원하는 프레임 값을 직접 입력하여, 타임라인 작업 영역의 범위를 조절할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-f712943b519a7ed59032c231beab5a10d7ed0303%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**스크러버(Scrubber)**&#xB294; 타임라인 상에서 시간 위치를 선택하는 세로 줄로, **시간 눈금줄을 드래그**해서 스크러버의 위치를 변경할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-6ff9097232b14b64bfd48adbd178b25163596178%2FAnimEditorGIF1.gif?alt=media" alt=""><figcaption></figcaption></figure>

**옵션 버튼**을 눌러, 스커러버를 타임라인의 처음이나 마지막으로 이동할 수 있고, Playback Speed 옵션으로 재생 속도를 조절할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-200ca213466351e92a9cccb413514d92347f8eb1%2FAniEditorTimeline3.png?alt=media" alt=""><figcaption></figcaption></figure>

**재생 컨트롤** 영역에서 애니메이션의 재생, 역재생, 특정 프레임으로 이동, 반복 설정 등의 기능을 이용할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-53225f59cdcadd25719b72d45d8d1f85aaa2a14f%2FAniEditorTimeline4.png?alt=media" alt=""><figcaption></figcaption></figure>

타임라인에서 **키프레임을 우클릭**하면 표시되는 메뉴에서 애니메이션 정보를 초기화하거나 삭제할 수 있고, **인터폴레이션(Interpolation)**&#xC744; 통해 보간 방식을 선형(Linear), 고정(Constant), 큐빅(Cubic)으로 설정할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-812daa761f57dfe4b84a78158771f63f23a88a7c%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

* **Reset Keyframes** : 키프레임의 애니메이션 정보를 초기화합니다.
* **Delete Keyframes** : 키프레임을 삭제합니다.
* **Copy Keyframes** : 키프레임을 복사합니다.
* **Set Interpolation** : 보간 방식을 설정합니다.

타임라인에서 키프레임이 없는 **빈 화면을 우클릭**하면 표시되는 메뉴에서 특정 구간에 프레임을 삭제하거나, 원하는 위치에 새 프레임을 추가할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-52828fb65165e363b9146e304f2ac94c2c928be4%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

* **Remove frame n to n** : n\~n 프레임 사이의 키프레임을 삭제합니다.
* **Insert frame before n** : n 프레임 이전에키프레임을 추가합니다.
* **Insert frame after n** : n 프레임 이후에 키프레임을 추가합니다.
* **Append at Beginning** : 입력한 프레임의 앞에 키프레임을 추가합니다.
* **Append at End** : 입력한 프레임의 뒤에 키프레임을 추가합니다.
* **Add All Keyframe Here** : 이전 키프레임과 동일한 키프레임을 이 위치에 추가합니다.
* **Add Reset Keyframe Here** : 애니메이션 정보가 초기화된 키프레임을 이 위치에 추가합니다.
* **Paste Keyframes :** 복사한 키프레임을 이 위치에 붙여넣습니다.

### 애니메이션 이벤트 <a href="#animation-events" id="animation-events"></a>

**Add Events 버튼**을 눌러 애니메이션 이벤트를 추가하면, 애니메이션의 특정 프레임에서 **스크립트와 상호작용**할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-9a56651f9dda8453b091308499652a91a8489f38%2FAnimEditor2.png?alt=media" alt=""><figcaption></figcaption></figure>

* 등록한 이벤트는 타임라인의 **애니메이션 이벤트 바(Event Bar)** 상에 마커 형태로 표시됩니다.
* 등록한 이벤트를 우클릭하여, **이름 변경(Rename Event), 복사(Copy), 삭제(Delete)**&#xD560; 수 있습니다.

추가한 애니메이션 이벤트는 다음과 같이 처리할 수 있습니다:

<pre class="language-lua"><code class="lang-lua">local Players = game:GetService("Players")
<strong>local LocalPlayer = Players.LocalPlayer
</strong>
local character = LocalPlayer.Character
local humanoid = character:WaitForChild("Humanoid")

local animation = Instance.new("Animation")
animation.AnimationId = "ovdrassetid://1234"

local animator = humanoid:FindFirstChild("Animator")
local animationTrack = animator:LoadAnimation(animation)

local function OnAnimationEvent()
    print("OnAnimationEvent")
end
animationTrack:GetMarkerReachedSignal("SomeKeyName"):connect(OnAnimationEvent)

animationTrack:Play()
</code></pre>

## 키보드 단축키 <a href="#keyboard-shortcuts" id="keyboard-shortcuts"></a>

<table><thead><tr><th width="360">단축키</th><th>동작</th></tr></thead><tbody><tr><td><strong>(미리보기 패널 클릭 상태에서) 방향키</strong></td><td>카메라 이동</td></tr><tr><td><strong>(본 선택 상태에서) F</strong></td><td>해당 본으로 카메라 포커스 이동</td></tr><tr><td><strong>Shift+본 클릭</strong></td><td>본 다중 선택</td></tr><tr><td><strong>Ctrl+1</strong></td><td>Select Tool</td></tr><tr><td><strong>Ctrl+2</strong></td><td>Move Tool</td></tr><tr><td><strong>Ctrl+3</strong></td><td>Rotate Tool</td></tr><tr><td><strong>Ctrl+S</strong></td><td>애니메이션 저장</td></tr><tr><td><strong>Spacebar</strong></td><td>애니메이션 재생 / 일시정지</td></tr><tr><td><strong>Ctrl+Z / Ctrl+Y</strong></td><td>Undo / Redo</td></tr><tr><td><strong>(키프레임 선택 상태에서) Ctrl+C / Ctrl+V</strong></td><td>키프레임 복사 / 붙여넣기</td></tr><tr><td><strong>(키프레임 선택 상태에서) Delete</strong></td><td>키프레임 삭제</td></tr><tr><td><strong>(키프레임 선택 상태에서) Shift + Click + Drag</strong></td><td>키프레임 복제</td></tr><tr><td><strong>Ctrl+마우스휠 업다운</strong></td><td>타임라인 영역 확대 / 축소</td></tr></tbody></table>

## 애니메이션 등록 및 사용 방법

제작한 애니메이션은 **Get Asset Id 버튼**을 눌러, 서버에 등록할 수 있습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-8bab5d366f5e3e29d9e4aa4d6cfeef6f9b745288%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

서버에 애니메이션 등록이 완료되면 **Asset Id**가 생성됩니다. 이미지에서 표시한 버튼을 눌러 **Asset Id를 복사**하세요.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-70f7ab68e187fc11a430f707c04127c763cbec87%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

애니메이션을 사용하려면 Level Browser에 **반드시 배치**되어 있어야 합니다. ServerStorage에 **Animation**을 추가합니다.

<div align="left"><figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-1741c2010ab1db9271224ced814f5ecdf672f73f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

추가한 Animation을 선택한 다음, 프로퍼티 창의 **Animation Id**에 복사한 **Asset Id**를 넣습니다.

<figure><img src="https://2697870212-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRPi87oM9ttlk5nyu7L7%2Fuploads%2Fgit-blob-10a3bde8ec022d98a94122ddb48aafa21a5ef95a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## 주의 사항

* 작업중인 애니메이션을 **저장(Save)**&#xD558;면, 맵이 아닌 **OVERDARE Studio에 저장**됩니다.
  * 따라서, 다른 PC 환경에서 맵을 열면 작업중인 애니메이션은 표시되지 않습니다.
* OVERDARE에 등록된 내 애니메이션은 **Import from OVERDARE**로 다시 가져올 수 있습니다.
* **애니메이션을 등록한 이후**에도 데이터가 수정되면, 변경된 내용을 반영하기 위해 **다시 등록**하고 새로운 **Asset ID를 생성 및 연결**한 뒤 사용해야 합니다.