본 글은 원작자 Alice Hinton-Jones의 허락을 받고 번역하였습니다.

 

 

원제 : Getting Started with Unity’s 2D Animation Package

원문 링크: https://blogs.unity3d.com/2018/11/09/getting-started-with-unitys-2d-animation-package/

원작자 : Alice Hinton-Jones

원문 작성일 : 2018/11/09

 

 

 

2D 스켈레톤을 생성하기 위한 간단한 방법을 찾고 있나요?  오늘 저희는 에디터 내에서 2D 스프라이트를 리깅하고, 본 가중치를 그리고, 스켈레톤 애니메이션을 생성할수있는 2D애니메이션 패키지를 소개하려 합니다.  IK(Inverse Kinematics)에 대한 지원도 합니다. 여러분들은 이 기능을 지금 바로 확인할수있습니다.  – 이 기능은 2018.1 프리뷰 버전부터 지원이 됩니다이 패키지를 여러분의 프로젝트에 효과적으로 적용하는 방법을 배워봅시다.

 

패키지 설치하기

2D애니메이션은 프리뷰 패키지로 배포되었습니다. 이 뜻은 Unity의 패키지 관리자( Package Manger)를 통해 여러분의 프로젝트에 이 패키지를 설치할수 있습니다. 패키지 매니저는 Unity 2018.1이후 버전에서 접근이 가능합니다만약 IK를 이용할 계획이 있다면, 2D IK 패키지 또한 설치 해야합니다. – 이에 대한 내용은 이번 달에 다른 포스트에서 다시 다루겠습니다.

[ 역자 코멘트. ]

Unity 상단 메뉴에서 [Window]-[Package Manger]를 통해서 창을 킨 후, ALL 탭을 클릭하여 설치를 진행합니다. 2018년 12월20일 기준으로 IK는 1.0.6 preview, 2D Animation 은 1.0.16 preview입니다. 

 

에셋을 임포트할때 주의사항

애니메이션 작업을 시작하려면, 두 가지가 필요합니다. 첫 번째는 애니메이션으로 만들 기 원하는 스프라이트가 필요합니다. 이것은 여러분이 원하시는 어떤 것이든 상관없습니다. – 캐릭터, 몬스터, 사물 그밖에 여러가지..

 

2D애니메이션을 위해 스프라이트를 임포트할 때 주의해야할 몇가지가 있습니다. 첫째로 현재 레이어에 대한 지원이 없습니다. 그렇기 때문에 여러분이 여러 개로 분리된 스프라이트 메시를 리깅하려는 경우 한 개의 레이어에 배치하는 작업이 필요합니다.  PSD파일이나 다른 파일에서 전체 레이어를 가져오는 것에 대한 지원은 추후 패키지 릴리즈에 포함될 예정입니다추가로 유니티에 새로 추가된SVG파일을 임포트할수있는 Vector Graphics 패키지와 연동이 되지 않습니다. 이 또한 현재 지원을 준비중입니다.

 

위와 같은 내용을 염두에 두고여러분의 스프라이트를 임포트 해봅시다이 글에서 사용될 예제는 Ríkr the Viking(Ríkr: ()게르만어로 늙은 스칸디나비아인) 입니다. 이 캐릭터를 여러분들과 함께 실험용으로 사용하겠습니다. 캐릭터는 여러 개의 스프라이트로 나누어져 있고 하나의 레이어에 재배열되었습니다.

  

2D 스켈레톤 만들기

모든 2D 리깅작업은 스프라이트 에디터 상에서 이루어집니다. 스프라이트 에디터에 접근하려면 캐릭터 스프라이트 에셋을 클릭한뒤 인스펙터 창에서 Sprite Editor 버튼을 찾을수있습니다.

 

스프라이트 에디터 왼쪽 상단을 보면 Sprite Editor가 선택된 드랍박스가 보이실 것입니다. 이를 클릭하여 Bone Editor를 클릭해주도록 합시다. 그러면 우리는 이제 최초의 본을 생성하는 것을 시작할수있습니다우측 하단에는 본을 수정할 수 있는 도구가 표시됩니다.

 

첫번째 본을 생성하기 위해 Create Bone Tool을 클릭합니다. ( 단축키 ‘B’, 첫번째 아이콘 ). 이후 본 에디터 상에서 어디엔가 좌측 클릭을 하면 루트(Root)본의 시작 지점을 설정할수있습니다이후 좌 클릭을 한번 더 하면 해당 본의 종료지점을 설정할수있습니다.   우 클릭은 생성된 본을 취소할수있습니다.

 

 

 

루트 본 배치

루트 본을 생성할 때 어디에 루트 본을 배치해야 가장 적합한지 고민할수도있습니다. 일반적으로 두가지의 접근 방식이 있습니다첫째로는 메쉬 위가 아닌 임의의 지점에 배치할수있습니다. 캐릭터 다리의 중간 점을 예시로 들수있습니다. 이를 보통 원점(origin point)이라고 합니다. 둘째 방법은 캐릭터의 엉덩이에 두고 이를 엉덩이 본과 같이 사용하는것입니다. 여기서 고려해야할점은 여러분들이 루트본 모션을 구현할 계획이 있는지입니다. 루트 본을 나머지 스켈레톤들에서 분리한다면, 전체 캐릭터 이동을 원점을 통해서 아주 간단하게 할수있습니다이 작업 과정은 루트의 위치는 그대로 두면서 엉덩이의 위치를 변경하는 애니메이션을 생성할때도 매우 유용합니다.

 

본 수정 툴

본 에디터에서 접근할 수 있는 다른 본 수정 툴들이 있습니다이중하나는 Free Bone Tool(단축키 ‘N’)입니다. 이 툴을 이용하면  부모본이 존재하지만 직접적으로 연결되지않는 본을 생성할수있습니다. Free Bone Tool은 실제 스프라이트에 연결되지않은 루트본이 있을 때나, 여러 개의 파츠로 스프라이트가 나누어져있을때 유용합니다예를 들어 Free Bone Tool을 이용해서 우리 캐릭터의 팔,다리를 나머지 스켈레톤과 연결시킬수있습니다. Free Bone들을 몸체 기준으로 자유롭게 이동 시킬수있기 때문에 추후 우리가 애니메이션을 생성할 때 하나의 완전한 스프라이트처럼 보일것입니다.

 

 

다른 툴로는 기존 본을 작은 본 두개로 나누는 Split(단축키 ‘S’ ) Parent(단축키 ‘P’) 그리고 기존에 다른 본에 부착된 본을 Free 본으로 바꿔주는 Move(단축키 ‘M’) 이있습니다. 실수로 본을 생성하는 것은 큰문제가 아닙니다. 간단히 해당본을 클릭하고 ‘Delete’키를 누르면 됩니다.

 

스켈레톤 작업을 모두 끝마치면, 스프라이트 에디터 우측 상단에 있는 ‘Apply’버튼을 꼭 클릭하셔야합니다! 그렇지 않는 경우 지금까지 작업한 변경사항들을 모두 잃게됩니다.

 

[역자코멘트]

현재 프리뷰 버전이라 작업중 프리징되는 현상이 여러 번 있었습니다.

 

 

 

메모: 본에 서술적인 이름을 붙이면 좋습니다. 어떤 본을 찾아야하는지 알고있다면 복잡한 스켈레톤에서 계층구조를 탐색하기 매우 쉬워집니다.

 

스프라이트 메시(Sprite Mesh) 생성하기

리깅을 완료하였다면 이제 스프라이트를 위한 메시를 생성할수있습니다. 메시는 조금있다 추가해줄 본 가중치(bone weight) 함께 본이 움직이거나 회전할 때 스프라이트가 어떻게 변형될지를 결정합니다. 왼쪽 상단의 드랍다운을 클릭하여 Skin Weights and Geometry Editor를 선택합시다.

 

여기서부터 직접 버텍스를 추가하는 방법으로 스프라이트 메시를 생성할수있습니다. 상단 툴바에는 다음과 같은 도구가 있습니다. 버텍스 생성(Create Vertex), 엣지 생성(Create Edge ), 엣지 나누기(Split Edge). 하지만 이 작업은 시간 소모가 장난아닙니다. 특히 스프라이트가 복잡하고 정교할때는 더욱요이러한 이유로 유니티에서는 설정된 값에 따라서 자동적으로 메시를 생성해주는 옵션을 제공해줍니다.

 

상단 툴바에서 Generate를 클릭합시다.   

여기서 생성될 메시가 이미지에 정확하게 맞춰질지에 대한 값인 Outline Detail을 설정할수있습니다.

Alpha Tolerance는 메시를 생성할떄 투명도가 얼마나 영향을 줄지를 결정합니다. 값이 높을수록 픽셀에 정확하게 맞는 메시가 생성되지만, 너무 높게 설정하는 경우 반투명 메시에서 제외되거나 세부적인 메시가 잠재적으로 성능저하를 일으킬 가능성이 있습니다.

The Subdivide Level은 얼마나 많은 버텍스들이 메시안에 생성될지를 결정합니다.  얼굴 애니메이션을 생성하는것처럼 그래픽 내에서 변형을 줄 때 유용하게 사용할수있습니다. 또한 커스텀 라이팅 쉐이더를 사용하길 원할 때 좀 더 나은 메시 테셀레이션(mesh tessellation)을 가능하게합니다.

 

일반적으로 좋은 작업 방식은 자동 생성을 통해 기본을 만든 후, 수정 도구들을 사용하여 직접 디테일을 추가/삭제하는 것입니다.

 

 

본 가중치 색칠하기

 

메쉬를 생성하였다면 이제 본에 가중치를 추가할 차례입니다. 이 작업은 어떤 버텍스들이 특정 본에 영향을 받는지 그리고 얼마나 영향을 받는지를 결정합니다. 본 가중치를 수정하기 위해서는 상단의 editing modeGeometry 에서 Weights로 변경해줍니다.

 

우측 하단에 새로운 툴 창이 생긴 것을 확인하실수있을것입니다. 이것을 이용해서 본 가중치를 손으로 색칠해줄수있습니다. 하지만 메시를 생성했던것과 같이, Auto Tool을 이용해서 자동으로 가중치를 생성해줄수있습니다.

가중치를 수정하는 동안 본을 선택하고 이를 움직이거나 회전시키면 메시의 여러 파츠들이 어떻게 변형되는지 미리 볼수있습니다또한 상단의 슬라이더를 조절하여 메시위에 색칠된 가중치를 보였다 안보였다 조절할수있습니다. 이를 통해 스프라이트가 어떨 때 더 좋아보이는지 알수있습니다.     

 

 

각  본마다 어떤 정점을 움직이는 지에 대한 정확한 통제를 원하는 경우 일반적으로 본 가중치는 메시 작업에 비하여 좀 더 손이 많이 갑니다. 하단의 브러쉬와 슬라이드 툴은 정확히 이런 목적을 위해 존재합니다.

 

브러쉬툴을 이용하면 메시위의 버텍스에 직접적으로 가중치를 칠할수있습니다.  Size를 변경하여 한번에 얼마나 많은 버텍스들이 선택될지를 설정할수있고, HardnessStep세팅을 통해서 정점에 한 개 이상의 본이 영향을 줄 때의 가중치를 조절할수도있습니다.

 

사용자는 Add and Subtract(더하기 빼기)모드를 통해서 가중치 칠하기를 시작할수있습니다.  아니면 간단하게 스프라이트 에디터나 브러쉬툴의 드랍다운 에서 가중치를 추가하고 싶은 본을 선택합니다.

 

 

슬라이더를 이용해서 가중치를 전체적으로 분산시킬수있습니다. 그리고 브러쉬툴이라는 이름 처럼 선택한 모드를 기반으로 다르게 움직입니다.

 

 Add and Subtract모드는 선택된 본이 전체 메시에 미치는 영향력을 더해줍니다. Grow and Shrink모드는 기존에 적용된 본이 영향을 끼치는 범위를 늘리거나 줄입니다따라서 이는 본 주변의 버텍스로 제한됩니다.

 

Smooth모드는 가중치간의 전환을 균일하게 하는데 사용됩니다.  브러시 툴과 이 모드를 함께 사용하는 경우 브러시 영역에만 적용됩니다.

 

 

본 깊이 변경하기

 

스프라이트를 리깅할 때 현재 작업중인 부분이 다른 부분을 오버레이하는 것을 제어하고 싶을것입니다. 예를 들어 우측 팔이 몸통부분의 앞에 나오고 왼쪽팔이 몸통의 뒤쪽에 나오는식으로 말입니다. 2D Animation은 본깊이(Bone Depth)라는 설정을 통하여 본이 렌더링 되는 순서를 지정해줄수있습니다.

 

본 깊이는 개별 본 마다 설정할수있고, Weight Editor내에서 설정할수있습니다본이 렌더되는 순서를 변경하기 위해서 해당 본을 에디터 윈도우상에서 선택합니다. 그 후 좌측하단에 있는 Inspector창을 확인할수있습니다. 여기서 렌더링 우선순위를 결정할수있습니다. 높은 값을 가진 본에 연관되어있는 메시가 낮은 값을 가진 본과 연관되있는 메시를 덮게됩니다. 모든 본의 초기 깊이값은 0입니다.

 

[역자코멘트]

쉽게말해 높을수록 앞면에 배치된다.

 

 

 

[역자코멘트]

여기서 Apply를 잊지마세요!!

 

씬에서 리깅하기

리깅이 완료된 메시와 칠해진 본 가중치가 준비되었다면 이제 씬(Scene장면)에서 사용할수있습니다. 첫째로 지금 까지 작업한 Sprite에셋을 씬으로 드래그합니다. 그후 ‘Sprite Skin’ 컴포넌트를 추가해줍니다. 만약에 스프라이트가 스켈레톤 데이터를 포함하고 있는경우 Create Bones라는 버튼이 보일것입니다. 이 버튼을 클릭하게되면 스켈레톤이 현재의 씬에 인스턴스화 됩니다.

 

이후 본인이 원하는 캐릭터의 포즈를 만들기위해 본을 자유롭게 위치를 변경하거나 회전시킬수있습니다본을 회전시키기 위해서는 해당 본을 클릭하여 선택하고 회전툴(단축키 ‘E’)를 사용하거나 본의 끝부분을 잡아서 원하는 방향으로 드래그해주면됩니다. 본을 움직이거나 부모에게서 떼어내고 싶은경우, 이동 툴(단축키 M)을 사용하거나 원점에서 잡아끌면 됩니다.  기존에 리깅작업이 된 상태로 다시 되돌리려면 인스펙터 내에서 Reset Bind Pose를 클릭하면 됩니다. 그룹처럼 여러개의 본을 선택하고 회전하는것도 가능합니다.  – 이는  머리카락이나 뿌리 같은 둥근 모양을 만드는데 유용합니다.  

 


 

애니메이션 클립 만들기

자 이제 새로 만들어진 스켈레톤을 이용해서 완전한 2D애니메이션을 만드는 방법을  빠르게 살펴보도록 하겠습니다.

 

2D Animation 패키지를 사용하면, 3D 프로젝트에서처럼 스켈레톤 애니메이션을 생성할수있습니다.  가장 간단한 방법은 리깅된 스프라이트를 선택하고 애니메이션 창을 여는것입니다. (Window-> Animation -> Animation ) 창을 열면해당 게임오브젝트를 위한Animation컴포넌트와 Animation클립를 생성할것인지 메시지가 표시됩니다. Create를 클릭하면 원하는 폴더에 이름을 정해 저장할수있습니다.  Animator 에셋은 자동으로 생성되지만 원하는대로 이동하거나 이름을 변경할수있습니다. 또는 Animator를 먼져 생성하고 이를 컴포넌트처럼 게임오브젝트에 추가할수도있습니다. 이젠 애니메이션 클립만 생성하면 됩니다.

 

모든 애니메이션 작업은 Animation창에서 이루어집니다. - Animator별로 여러 개의 애니메이션 클립을 가질수있습니다. 새로운 클립을 만들기 위해서는 좌측 상단에 드랍다운 메뉴에서 현재 클립이름을 클릭하면 나오는 Create New Clip이라는 옵션을 클릭해주면 됩니다.

 

애니메이션 작업을 시작전에 현재 모든 본의 위치와 회전값을 키프레임하는 것이 좋습니다. 모든 본에 애니메이션을 적용할게 아니여도 말이죠왜냐면 나중에 씬내에서 애니메이션의 영향을 받지 않는 본들을 움직이거나 회전시키는 경우, 그들은 씬에서의 Transform정보을 그대로 유지하고 있기 때문에 애니메이션을 이상하게 동작하게 합니다.

 

모든 본들을 키프레임하고 애니메이션의 변경사항을 기록하기 위해서는 첫째로 애니메이션 창 상단 툴바에 있는 빨간색 버튼을 클릭하여 레코딩 모드를 활성화해야합니다. 그후 hierarchy창에서 모든 본들을 선택한뒤 인스펙터 창에 있는 PostionRoation을 우측 클릭하고 Add Key를 눌러서 초기 키프레임을 생성할수있습니다. 이러면 선택한 모든 본의 위치와 회전에 대한 키가 생성됩니다.

본 계층의 모든 본을 선택했는지 확인하려면 Alt( 맥의 경우 Option)을 누르고 루트 본을 클릭하면 모든 계층 구조를 열었다가 닫았다가 할수있습니다.

 


 

레코딩모드중에는 플레이 헤드를 새로운 위치로 이동시킨후 장면내에서 본들을 이동하거나 회전시키는것으로 새로운 키프레임이 자동 생성됩니다.

 

키 프레임을 애니메이션 타임라인을 선택하거나 타임라인을 따라서 드래그하여 원하는 위치에 키프레임을 이동할수있습니다. 아니면 익숙한 키( Ctrl(Cmd) + CCtrl + V) 를 이용하여 선택한 키들을 복사 붙여넣기를 할수있습니다. 애니메이션 작업이 모두 끝나면 레코딩 모드에서 빠져나와서 플레이버튼을 눌러 애니메이션을 미리볼수있습니다.

 

자 이제 여러분은 본인만의 스켈레톤 애니메이션을 만드는 데 필요한 모든 것을 갖추었습니다. 다음은 우리의 바이킹을 위해 만들어진 걷기 예제 클립입니다.

 

 

추가 자료

2D Animation의 미리보기 문서를 여기서 보실수있습니다.

같은 저장소 안에는 이 글에서 설명하는 기본적인 작업을 시연해볼수있는 몇 개의 샘플 프로젝트 있습니다.

 

[역자코멘트]

Rig는 고유 명사처럼 사용되서 한글로 말하면 리그라 리깅으로 번역하였습니다.

리깅은 정적인 메시에 내부에 뼈대를 생성하고 이를 연관시키는 일련의 과정을 칭하며 스키닝, 엔벨로핑, 바인딩 등으로 불리기도 합니다.