[유니티 활용] 3D 캐릭터를 UI 로 표시하는 방법

안녕하세요. 이번 글에서는 캐릭터 상태창이나 선택 UI 에서 많이 볼 수 있는 움직이는 3D 캐릭터를 UI 로 표현하는 방법에 대해 알아보도록 하겠습니다. 

 

이것을 구현하기 위해 RenderTexture와 RawImage 컴포넌트를 사용할 것입니다.

 

▶ RenderTexture

RenderTexture 는 카메라에 연결해 카메라가 비추는 영역을 일반 texture 로 사용할 수 있게 해줍니다.

 

 

▶ RawImage

RawImage 는 모든 텍스쳐를 표시할 수 있지만 Image 컴포넌트와는 다르게 Sliced, Filled 와 같은 기능을 사용할 수 없습니다. 대신 Image 컴포넌트는 스프라이트 텍스쳐만 사용 가능합니다.

 

 

▶ 작업 흐름

• 카메라가 캐릭터를 촬영합니다.
• 촬영된 영상을 RenderTexture 가 일반 texture 로 변형해 줍니다.
• RawImage 에서 UI 화면에 표시합니다.

RenderTexture 는 런타임에 카메라가 촬영하는 영상을 실시간으로 업데이트하기 때문에 RawImage 에서 카메라가 촬영하는 영상을 그대로 볼 수 있게 되는 원리입니다.

 

 

 

 

▶ 만들어 보기

• 이 예제에서 사용하는 에셋은 무료 에셋을 사용했습니다. 여기를 클릭하시면 다운로드 받으실 수 있습니다.
• 위의 에셋을 다운로드 받고 import 하신 다음 캐릭터를 Hierarchy 창에 끌어다 놓아 객체를 만듭니다.
• 캐릭터를 선택하고 마우스 우클릭 Camera 를 선택해 캐릭터의 자식 객체로 새로운 카메라를 생성합니다.
• 카메라가 캐릭터의 정면을 비추도록 움직여 줍니다. 아래는 제가 설정한 값입니다.

 

• Project 창의 Assets 폴더에서 마우스 우클릭 [Create > Render Texture] 를 생성하고 CharacterCamTexture 로 이름을 변경해 줍니다.
• CharacterCamTexture 를 위에서 생성한 카메라에 다음과 같이 연결합니다.

 

• 위의 그림과 같이 Clear Flags 를 Solid Color 로 변경합니다.
• Background 의 색이 있는 부분을 클릭하면 컬러 선택창이 나타나는데 여기서 A 의 값을 0 으로 설정합니다. A 는 Alpha 값으로 투명도를 의미합니다. 이걸 0 으로 하면 촬영한 캐릭터의 배경이 투명하게 됩니다. 만약 배경색이 필요 하다면 A를 0 으로 하지 말고 원하는 색을 선택하시면 됩니다.
• 이제 각자 자신만의 캐릭터 상태창 UI 를 만드시면 됩니다. 단, 캐릭터 표시는 반드시 RawImage 로 생성해 주셔야 합니다. RawImage 를 생성하셨으면 아래와 같이 CharacterCamTexture 를 연결해 주면 끝입니다.

 

Play 해보시면 아래와 같이 UI 에서 캐릭터가 움직이는 모습을 볼 수 있습니다.

 

 

이 방법은 캐릭터 상태창 뿐 아니라 자동차의 사이드/룸 미러 구현에도 활용할 수 있고, 동굴 같은 곳에서 레버를 움직였을 때 문이 열리는 장소를 보여주는 등의 연출에도 활용할 수 있습니다.