APP 개발 온라인 강좌 제4강 [4-5.2.1] - NGUI 구성

2) Camera

카메라는 우리가 일반적으로 생각하는 카메라의 역할보다 조금 더 다양한 일을 하고 있습니다.

   

단순히 화면을 어떻게 보이게 할 것인가의 역할 뿐 만이 아니라, 카메라가 소리를 캡쳐해낼 수 있는지, 또는 소리를 내는 역할을 할 수 있는 지(BGM), 카메라가 잡아내는 화면의 안에 있는 사용자가 어떤 방식으로 Input하여 조작할 수 있는지 등 컴포넌트의 구성에 따라 많은 역할들을 수행할 수 있습니다.

   

오브젝트를 클릭해보면, Camera, Audio Listener, UICamera (Script) 이렇게 3가지 컴포넌트를 볼 수 있는데, 이 중에서 가장 중요한 Camera 컴포넌트에 대해서 알아보겠습니다.

[그림 4-15]

Camera 컴포넌트는 카메라가 화면을 비추는 영역과 그 영역의 백그라운드 처리 효과 등, 전반적인 View 컨트롤을 하고 있습니다.

   

Clear Flags

화면의 어떤 부분이 제거될지 정합니다. 이것은 다른 게임 요소를 끌어오기 위하여 카메라를 사용할 때 편리합니다.

   

NGUI에서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있습니다.

Depth only는 카메라가 볼 수 있는 영역(Scene에서 보이는 상자형태의 영역)에 있는 오브젝트만 Depth 수준에 따라서 순서를 정하여 렌더링하는 기능을 가지고 있습니다. 즉, 하나의 카메라만 있고 그 카메라 영역 안에 1개의 오브젝트만 있다면, 그 UI만 렌더링해서 보여주지만, 서로 다른 곳을 비추는 두 개 이상의 카메라가 있고 그 카메라들 안에 다양한 오브젝트들이 있다면, 컴포넌트에 있는 Depth 값에 따라서 화면에 순서대로 렌더링 하는 기능입니다.

즉, Depth only로 설정된 카메라는 볼 수 있는 영역에 있는 오브젝트 이외의 렌더링은 일어나지 않기 때문에, Depth 수치를 높게 줘서 다른 카메라에서 보이는 영역 위에 이 카메라를 통해서 버튼 UI만 보이게 얹을 수 있습니다. 그래서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있는 것입니다.

   

이외에도 UI용 카메라가 아닌 일반 카메라에서 자주 쓰이는 기능에는 Skybox와 Solid Color가 있습니다.

   

Skybox 기능을 선택하면, 화면의 빈 공간은 현재 카메라의 스카이박스를 보여줄 것입니다. 만약 카메라가 스카이박스 설정을 가지고 있지 않으면 Render Settings (Edit->Render Settings)에서 선택된 Skybox를 기본으로 사용합니다. 그런 후에 배경색(Background Color)으로 가게 됩니다. (대안으로 Skybox component가 카메라에 추가될 수 있습니다.)

   

Solid Color는 말 그대로 화면의 빈 공간을 카메라의 배경색(Background Color)으로 표현하는 기능입니다.

   

즉, Skybox나 Solid Color의 경우에는 현재 카메라가 볼 수 있는 영역에 있는 오브젝트를 렌더링 한 후에, 남는 공간, 즉, Background 배경에 무엇을 그릴 것인지 정해줄 수 있는 기능을 가지고 있는 것입니다.

   

마지막으로 Don't Clear라는 기능이 있는데, 이 기능은 색상이나 깊이 버퍼, 등 아무것도 제거하지 않습니다. 결과적으로 각 프레임마다 화면에 렌더링이 덮여 씌워지는 형식으로 행해지고, 이것은 그림이 번진 것 같은(smear-looking)효과를 냅니다. 보통은 잘 사용되지 않으며, 사용자의 정의된 커스텀 셰이더와 함께 사용하는 것이 좋습니다.

   

※ 현재 진행 중인 'Practice NGUI' 씬과 같이 UI용 Camera 한 개만 씬에 존재할 경우, Camera 컴포넌트의 Clear Flags 설정을 Depth Only로 해둔다면, 배경을 따로 그리고 있지 않기 때문에 이 그림과 같이 이전에 오브젝트가 위치했던 곳의 렌더링까지 모두 그려주게 되어 화면이 지저분하게 되는 경우가 있습니다.

이럴 경우에는 Clear Flags 설정을 Sky Box나 Solid Color로 해주시면 됩니다.

 

[그림 4-16]

Culling Mask

레이어를 사용하여 선택적으로 화면에 그려낼 오브젝트들을 정할 수 있는 기능을 가지고 있습니다. 예를 들어 설명하자면, 게임에서 UI를 배치할 때, 게임 오브젝트의 범위와 UI 범위가 겹쳐지는 불상사가 발생할 경우에도 예외처리가 가능하도록 UI전용 레이어를 따로 지정하고 UI 카메라에서 Culling Mask를 통해 해당 레이어만 렌더링 하도록 지정하는 것이 좋습니다.

   

현재 열려있는 'Practice NGUI' 씬에서 간단한 예를 통해 기능을 한 번 살펴보겠습니다.

UI Root (2D) 오브젝트의 하위 객체로 큐브를 하나 생성한 뒤, Inspector창에서 x, y, z 좌표를 0, 0, 75.5 로 만들어주고, Layer 콤보 박스에 있는 Default를 클릭해서 add Layer를 선택합니다.

[그림 4-17]

Inspector 창에 나타난 Tagmanager에서 User Layer 8번과 9번에 'UI'와 'Player'라는 이름으로 레이어를 2개 생성합니다.

[그림 4-18]

그리고 다시 Hierarchy에서 큐브를 클릭하여 Inspector창의 내용이 큐브의 내용으로 나타나게 만든 후, Layer 콤보 박스에 있는 Default를 클릭해서 Layer를 'Player'로 바꿔줍니다.

[그림 4-19]

다음으로 'Camera'를 선택해서 Layer를 'UI'로 바꿔줍니다.

[그림 4-20]

   

[그림 4-21]

※        이와 같은 메시지 창이 나타나면, Yes를 클릭하시면 됩니다. 이 메시지 창은 레이어가 바뀌는 오브젝트 안에 하위 오브젝트가 있을 경우, 하위 오브젝트의 레이어도 함께 바꿀 것인지 물어보는 창입니다.

   

설정이 끝났다면, 'Camera' 오브젝트의 Camera 컴포넌트에서 Culling Mask를 UI만 체크했을 때, Player만 체크했을 때, 두 개 다 체크했을 때, 각각 어떻게 게임 플레이 화면이 변하는지 확인해봅시다.

다음 장에서는 Projection 부터 알아보겠습니다.

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

스마트아카데미-시설 소개

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

페이스북 왓츠앱 인수

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-5] -큐브(상자)씬 만들기