UNITY COOKBOOKSHOT BY. INS

PART 14카메라 & UI 심화

카메라의 원리

유니티에서의 카메라는 ‘ Main Camera’ 의 존재만 있는 것이 아닙니다 . 다수의 카메라를 ‘ Viewport Rect’ 공간으로부터할당하여 여러 개의 샷을 한 화면에 담을 수 있습니다 . 물론 렌더링 속도와 거기에 드는 비용도 2 배가 되겠지요 . 평소에는 이런 테크닉은 잘 쓰이지 않고 VR 기능으로 쓰이는 추세입니다 .

( 1 / 9 )

# 공간 분할로 2 개가 동시출력 된다 .

카메라의 구성요소

드디어 항상 새 프로젝트를 만들었을 때 ‘ Main Camera’ 객체에 붙어있는 정체모를 컴포넌트를 공개하겠습니다 .기본적으로 위치와 , 카메라 컴포넌트 그리고 3 가지 컴포넌트가 추가로 붙어있는데 이는 3D 게임 상에서 필요한컴포넌트입니다 . 물론 사용자가 직접 수정 가능하며 카메라 내부에서 표현할 수 있는 기능이 많습니다 .

( 2 / 9 )

ㆍ GUI Layer: 게임 오브젝트 형태의 GUI 객체를 위한 공간‘GUI Text’, ‘GUI Texture’ 등을 사용 가능하지만 구세대 기능이라 잘 안씀

ㆍ Flare Layer: ‘Lens Flare’ 효과를 담고 조정할 수 있는 레이어

ㆍ Audio Listener: 게임 상에서 들리는 소리를 듣게 해줌 .사실상 게임에서의 ‘귀’라고 볼 수 있다 .

Render Texture

‘Project View’ 에서 ‘ Create’ 탭을 눌러보면 ‘ Render Texture’ 이라는 녀석이 있습니다 .이 것의 기능은 카메라가 현재 바라보고 있는 즉 , 렌더링 되고 있는 장면 (shot) 을 텍스쳐에 실시간 그려담습니다 .그리고 카메라가 Realtime 으로 렌더링 되듯이 Render Texture 도 항상 수정됩니다 .

( 3 / 9 )

# Render Texture 를 큐브에 입힌 상태

Culling Mask

3 개의 객체가 있는데 각각의 이름은 ‘ Red, Green, Blue’ 입니다 . 그리고 같은 이름으로 레이어를 준 상태입니다 .카메라 기능 중에 ‘ Culling Mask’ 이라는 기능이 있는데 레이어의 체크가 해제 된 것들은 렌더링 전에 인식하여아예 게임화면에서 그려지지 않습니다 .

( 4 / 9 )

# 화면에 그려지지 않은 객체

미니맵 만들기

우리가 지금까지 배운 것들을 응용하여 봅시다 .‘Render Texture’ 에 입힐 카메라의 위치를 ‘ Top View‘ 시점에서 지형을 바라보고 있게 설정합니다 .캔버스에 ‘ RawImage’ 를 만들고 랜더텍스쳐를 적용하고 빨간 마커를 움직이면 마치 미니맵을 연상시키는 테크닉이 나옵니다 .

( 5 / 9 )

# 렌더 텍스쳐에 그려지는 미니맵

UI 심화

UI 기능 중에서 잘 쓰이는 기능 몇가지를 보겠습니다 .2D 카메라 ( 캔버스 ) 상에서의 추력은 이미지 뿐만이 아니라 버튼이나 , 입력 필드 , 체크버튼 등 다양하게 만들 수 있습니다 .심지어 상호작용시 개발자 정의 스크립트까지 불러올 수 있어서 편리함과 기능성 마저 존재합니다 .이런 UI 객체들로 인벤토리 기능을 만들어보겠습니다 .

( 6 / 9 )

# RawImage

# Button # Toggle (on/off)

# Input Field

UI 응용 #1

마지막으로 UI 를 활용한 2D 인벤토리 시스템을 만들어보도록 하겠습니다 .기능 내용은 ‘ Input Field’ 의 아이템 코드 (int) 를 넣고 ‘ Button’ 을 누르면 코드를 식별하여 빈 인벤토리창에 아이템을 추가하는내용입니다 . 우선적으로 인벤토리에 필요한 슬롯과 버튼 , 그리고 입력창 , 이벤트 시스템을 받을 빈 이미지도 하나 준비합니다 .그리고 추가적으로 2 개의 스크립트를 생성합니다 .

( 7 / 9 )

UI 응용 #2

InputField 정보를 받고 인벤토리 스크립트를 수행할 버튼 스크립트 내용입니다 . 입력받은 Text 를 정수로 변환하여아이템 코드로 넘겨주는 역할을 담당하고 있습니다 .두 번째로는 인벤토리 스크립트인데 ‘ AddItem’ 으로 넘겨받은 아이템 코드는 빈 슬롯을 찾아 해당 빈 칸으로 Reflush 하여아이템코드에 걸맞는 아이템 sprite 를 대체해주는 스크립트입니다 .

( 8 / 9 )

UI 응용 #3

마지막으로 스크립트 연결을 해주는데 Button 부분에서의 스크립트 실행은 ‘ On Click’ 부분에서 수행합니다 .자기 자신을 드래그하여 위 사진에 맞는 부분에 넣고 우리가 작성했던 스크립트를 불러옵니다 .이후 버튼과 , 이벤트 객체에 맞는 스크립트를 넣고 실행하면 빈칸을 찾아 들어가는 인벤토리 기능이 완성됩니다 .이상 카메라 기능과 UI 로 인벤토리를 구현해봤습니다 .

( 9 / 9 )

# 빈 칸을 찾아 들어가는 아이템

Thank You !