UI 특강 정리

UI도 Mesh로 이루어져 있다.

 

Vertex Buffer(버텍스 정보를 저장하는 공간)

-> Index Buffer (버텍스 순서를 숫자로 저장)

-> Render State(버텍스 순서를 시계방향으로 생성할 건지 반시계 방향으로 생성할 건지 결정, GPU가 삼각형의 앞면 뒷면을 알고 있어야하는데, 이 정보를 담고 있다.)

-> Vertex Decl (어떤 단위로 GPU가 읽어들일 건지 - Position, Color, VU 등)

 

CPU와 GPU 메모리는 분리되어 있음

동적으로 변하는 UI는 매번 CPU에서 연산 후 GPU로 넘기는 구조(Draw Call)

 

위 내용은 알고만 있을 것

 

Canvas - GPU한테 그려달라고 요청하는 주체, Draw Call을 발생시킨다.

 

 

Canvas

Render Mode

ScreenSpace - Overlay: 디폴트 세팅값, 게임 오브젝트 들이 그려지고 난 후 그 위에 덮어씌우는 형식의 Canvas

ScreenSpace - Camera: 카메라와 캔버스 사이의  오브젝트를 보여줄 수 있음, 스크린위에 파티클 같은 오브젝트를 그릴 때 사용하기도 한다.

World Space: Rect Transform의 값들을 변경가능함

 

 

Canvas Scaler

Constant Pixel Size

픽셀 기준으로 canvas결정

스크린 해상도가 커지면 UI요소들의 크기는 작아지고 스크린 해상도가 작아지면 UI요소들의 크기는 커짐

Scale Factor로 이 크기를 조절할 수 있음

해상도에 따라 UI가 변하기는 어려움

 

Scale With Screen Size

해상도에 따라 UI 변하도록 할 수 있음

Reference Resolution을 정해서 이보다 해상도가 크면 UI요소들을 더 크게 보여주고 이보다 해상도가 작으면 UI요소들을 더 작게 보여줌

 

Screen Match Mode

Match Width Or Height: Width로 갈 수록 가로의 해상도를 유지하겠다. Height로 갈 수록 세로의 해상도를 유지하겠다.

Expand: Reference Resolution보다 작게 만들지 않겠다.

Shrink: Reference Resolution보다 크게 만들지 않겠다. (세로 비율이 늘어나면 가로 비율을 줄여서 Reference Resolution에 맞추겠다)

 

 

UGUI - EventSystem

Canvas의 Graphic Raycaster컴포넌트가 UI요소에게 광선(Ray)으로 터치 등의 이벤트를 알림

EventSystem은 어떤 이벤트인지를 UI요소에게 광선으로 알려주어서 반응하게 함

 

 

Assets - Prefabs - UI - Common 폴더를 만들어 UI Prefab을 관리하는 방법을 많이 사용함

- 확장성 등에 용이

 

 

TextMeshPro

Font Asset을 활용해 폰트에 여러가지 효과를 줄 수 있다. (예: Outline을 복사해 Color를 red로)

 

 

Button

Transition

- None: 버튼을 버튼같지 않아 보이게 하는 효과를 줄 수 있다.

- Color Tint: 버튼에 color를 넣는다. 현업에서는 거의 사용하지 않는다.

- Sprite Swap: 버튼의 이벤트마다 스프라이트를 넣어줄 수 있다 - 가장 많이 사용되는 옵션

- Animation: 버튼에 애니메이션을 넣을 수 있다. 하지만 버튼에 과도한 애니메이션은 좋지 않다.

 

 

Vertical(Horizontal) Layout Group

Content Size Filter

- 자식 UI GameObject를 손쉽게 관리할 수 있는 컴포넌트 (정렬 등)