[Unity] NGUI + Spine 연동

진행 중인 프로젝트의 UI를 NGUI 기반으로 만들고 있다. 그런데 기존 UI에 Spine 오브젝트를 추가할 일이 생겼다. NGUI Panel 사이에 Spine 오브젝트를 끼워 넣는 식으로 작업했다. 작업 중 몇 가지 이슈가 생겨서 이를 해결한 방법을 정리했다.

먼저 기존 UI와 Spine 오브젝트 간 렌더링 우선 순위(depth)를 정하는 작업을 한다. 따로 구현할 필요는 없고 각각 아래의 값을 사용하면 된다. NGUI 오브젝트는 UI Panel 컴포넌트의 Sort Order 값을 사용한다.

Spine 오브젝트는 아래 그림과 같이 Skeleton Animation 컴포넌트의 Order in Layer 값을 사용한다.

Background는 UI Panel 오브젝트로 Sort Order를 1로 설정한다. 다음으로 Dragon은 Spine 오브젝트인데 Order in Layer 값을 2로 설정한다. 끝으로 UI Panel 오브젝트인 OK 팝업은 Sort Order 값으로 2를 준다.

그 결과로 Background 이미지, Spine 오브젝트, OK 팝업이 차례대로 렌더링된다.

렌더링 뎁스 작업 시, 아래 포스트를 많이 참고했다. renderQueue보다 Sort Order가 상위 개념, 즉 우선순위가 높다는 것이 핵심이다.

https://qits.tistory.com/116

유니티 렌더링 뎊스 : UI 사이에 오브젝트 그리기

다음으로 UI Panel의 Alpha, Color Tint 값이 Spine 오브젝트에도 적용되도록 구현한다. 작업은 아주 간단하다. Spine 코드 중 SkeletonRenderer 클래스가 MonoBehaviour가 아닌 UIWidget을 상속받도록 수정한다. NGUI 오브젝트의 Alpha, Color Tint 값은 UIWidget에서 처리하기 때문이다. 이것만으로 상위 UI Panel에서 해당 값을 변경하면 Spine 오브젝트의 값도 변경된다.

마지막으로 UIWidget의 pivot, scale 변경 기능이 Spine 오브젝트에도 적용되도록 구현한다. 위에서 UIWidget을 상속 받았기 때문에 spine 오브젝트에 아래와 같은 Widget 기능이 붙는다. 하지만 에디터 상에서 pivot이나 size 값을 수정해도 제대로 적용되지 않는다.

이건 상속만으로 안 된다. pivot 기능은 spine 오브젝트 mesh의 vertex 값을 수정해야 한다. 모든 vertex 값에 pivot 종류에 따라 mesh size의 절반 값을 더하거나 뺀다. Spine 코드 중 SkeletonRenderer 클래스의 LateUpdate() 메서드에 다음과 같은 코드를 추가한다.

scale 기능은 spine 오브젝트의 ScaleX, ScaleY 값을 수정해서 구현했다. mesh 크기에 NGUI Wiget의 mWidth, mHeight 값을 곱한다. SkeletonAnimation 클래스에 다음과 같은 메서드를 추가한다.

이 모든 작업은 UI 아티스트의 작업 편의를 위한 것이다. 렌더링 depth는 아예 신경 쓸 필요가 없다. alpha, color tint는 NGUI 오브젝트만 수정하면 하위 Spine 오브젝트도 함께 수정된다. pivot, scale은 기존 NGUI 오브젝트에서 Widget을 조작하는 방식 그대로 Spine 오브젝트를 수정할 수 있다. 끝.