#Camera #Culling #Mask #Inven #Item

1. UNITY COOKBOOK
SHOT BY. INS
PART 14
카메라 & UI심화

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

3. 카메라의 구성요소
드디어 항상 새 프로젝트를 만들었을 때 ‘Main Camera’ 객체에 붙어있는 정체모를 컴포넌트를 공개하겠습니다.
기본적으로 위치와, 카메라 컴포넌트 그리고 3가지 컴포넌트가 추가로 붙어있는데 이는 3D 게임 상에서 필요한
컴포넌트입니다. 물론 사용자가 직접 수정 가능하며 카메라 내부에서 표현할 수 있는 기능이 많습니다.
( 2 / 9 )
ㆍ GUI Layer: 게임 오브젝트 형태의 GUI 객체를 위한 공간
‘GUI Text’, ‘GUI Texture’ 등을 사용 가능하지만 구세대 기능이라 잘 안씀
ㆍ Flare Layer: ‘Lens Flare’ 효과를 담고 조정할 수 있는 레이어
ㆍ Audio Listener: 게임 상에서 들리는 소리를 듣게 해줌.
사실상 게임에서의 ‘귀’라고 볼 수 있다.

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

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

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

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

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

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

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

11. Thank You !