[Memo-Unity] 23. Ui 강의 1~2

업데이트: 2023.12.15

카테고리: MeMo Unity

Ui

Ui

UI강의

플레이어가 게임을 할 때 원활하게 플레이 할 수 있도록 설계하는 것
게임UI : 몰입성 , 상황을 빠르게 이해, 화면중앙에 집중되게 심플한 디자인

UI 체크사항

게임을 이해할 수 있도록 디자인

적절한 방법, 명확한 안내

가이드, 튜토리얼 이해쉽게, 건너뛰기

시각효과를 사용해 보상, 인앱 구매 눈에 띄게

UI는 단순하게 복잡X

계층구조, 중요부분 표시 명확한 안내

사이드바 제공, 공간 확장

반응형 UI

Mesh

작동원리

DrawCall

계속 변하는 UI는 매번 CPU에서 연산 후 GPU로 넘기는 구조
DRAWCALL = 화면에 그려줘~

UGUI

Grapgics.cs : 그래픽적 요소를 가지고 있는 클래스(Image 등) 관리

Canvas.cpp : 그래픽적 요소를 가지고 있는 것을 하나의 버퍼로 만들어서 GPU에 할당
Canvas 하위에 UI요소가 갱신되면 전체 Canvas를 갱신해야 함

Canvas

ui 생성시 Canvas 자동생성
Canvas(도화지) 3D좌표상의 위치가 아닌 유저에게 보여지는 스크린에 대응하는

`Rect TransForm`

TransForm을 상속받은(불변) (RENDER MODE - WORLD 면 수정가능)

Anchors

UI Elemnet 원점을 세팅하는 기준

앵커값 기준으로 pos x ,y 가 정해진다.

앵커 min,max 다를 때

Pivot

UI Elemnet 내부 기준점을 세팅하는 기준

CanvasScale

Render Mode

overlay -> 캔버스가 모든 오브젝트보다 앞에 그려진다 Cmara : 카메라 시점으로 캔버스가 보일 수 있다. world : 오브젝트처럼 배치

Canvas Scaler(반응형으로)

Scale Mode : Scale With Screen Size
Reference Resolution 1920 1080

Screen Math Mode

Match Width Or Height : 해상도 변화 시 넓이 또는 높이를 변경x Expand : Reference Resolution 보다 작게 안만든다.

UI강의 2회차 12/26

UGUI - Event System

canvas의 Graphic Raycaster 컴포넌트가 UI 요소에서 광선으로 터치 등의 이벤트를 알림
EventSystem은 어떤 이벤트인지를 UI 요소에게 광선으로 알려주어서 반응하게 함

사용할 UI들 프리팹으로 만들어서 사용

TMP

TMP설정

material 만들고 적용하기 Material preset -> outline Red

DynamicUI

Layout

Vertical Layout Group

프로퍼티	기능
Padding	레이아웃 그룹 에지의 패딩입니다.
Spacing	레이아웃 요소 간의 간격입니다.
Child Alignment	사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라인먼트입니다.
Child Controls Size	레이아웃 그룹이 자식의 너비와 높이를 제어할지 여부입니다.
Child Force Expand	추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃을 강제로 확장할지 여부입니다.

Horizomtal Layout Group

프로퍼티	기능
Padding	레이아웃 그룹 에지의 패딩입니다.
Spacing	레이아웃 요소 간의 간격입니다.
Child Alignment	사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라인먼트입니다.
Control Child Size	레이아웃 그룹이 자식 레이아웃 요소의 너비와 높이를 제어할지 여부를 결정합니다.
Use Child Scale	요소의 크기를 지정하거나 요소를 배치할 때 레이아웃 그룹이 해당 자식 레이아웃 요소의 스케일을 고려할지 여부를 결정합니다. Width 및 Height는 각 자식 레이아웃 요소의 Rect Transform 컴포넌트에 있는 Scale > X 및 Scale > Y 값에 해당합니다.
Child Force Expand	추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃 요소를 강제로 확장할지 여부를 결정합니다.

Grid Layout Group

프로퍼티	기능
Padding	레이아웃 그룹 에지의 패딩입니다.
Cell Size	그룹의 각 레이아웃 요소가 사용할 크기입니다.
Spacing	레이아웃 요소 간의 간격입니다.
Start Corner	첫 요소가 위치하는 코너입니다.
Start Axis	요소를 따라 배치할 주축을 지정합니다. 수평축으로 하면 새 행을 시작하기 이전 행을 전부 채웁니다. 수직축으로 하면 새 열을 시작하기 이전 열을 전부 채웁니다.
Child Alignment	레이아웃 요소가 사용 가능한 공간을 전부 사용하지 않는 경우, 사용할 얼라인먼 방식입니다.
Constraint	자동 레이아웃 시스템을 지원하기 위해 격자 무늬의 행렬 수를 제한합니다.

Size Fillter

Content Size Fillter

Horizontal Fit 너비 제어 방법입니다.
Vertical Fit 높이 제어 방법입니다.

프로퍼티	기능
Unconstrained	레이아웃 요소에 기반하여 너비를 조정하지 않습니다.
Min Size	레이아웃 요소의 최소 너비에 기반하여 너비를 조정합니다.
Preferred Size	레이아웃 요소의 기본 너비에 기반하여 너비를 조정합니다.

Layout Element

Layout Element 체크 -> transform 다시지정

프로퍼티	기능
Ignore Layout	활성화하면 레이아웃 시스템이 이 레이아웃 요소를 무시합니다.
Min Width	이 레이아웃 요소의 최소 너비입니다.
Min Height	이 레이아웃 요소의 최소 높이입니다.
Preferred Width	추가 가용 너비가 할당되기 전에 이 레이아웃 요소의 선호 너비입니다.
Preferred Height	추가 가용 높이가 할당되기 전에 이 레이아웃 요소의 선호 높이입니다.
Flexible Width	레이아웃 요소가 형제 레이아웃에 상대적으로 채워야 하는 (추가 사용 가능한)너비의 상대적 크기입니다.
Flexible Height	레이아웃 요소가 형제 레이아웃에 상대적으로 채워야 하는 (추가 사용 가능한)높이의 상대적 크기입니다.
Layout Priority	이 컴포넌트에 대한 레이아웃 우선 순위입니다.

Layout Priority
게임 오브젝트에 레이아웃 프로퍼티가 있는 컴포넌트가 두 개 이상(예: Image 컴포넌트와 LayoutElement| 컴포넌트) 있으면 레이아웃 시스템은 Layout Priority가 가장 높은 컴포넌트의 프로퍼티 값을 사용합니다.
컴포넌트에 동일한 Layout Priority가 있으면 레이아웃 시스템은 어느 컴포넌트에서 왔든 상관없이 각 프로퍼티에 대한 가장 높은 값을 사용합니다.

잡담

UI 잘다루기

[Unity] Ui TOP

| 종 이 |