Canvas

Canvas

---

• 게임 UI를 포함하고 있는 영역 
• 게임 UI를 관리하며 확대축소를 쉽게할 수 있음

 

 

Canvas 초기 설정

---

처음 Canvas 생성 시, 꼭 Canvas를 설정해 줘야 함

 

 

1. Scale With Screes Size 설정
2. Reference Resolution 작업할 해상도로 설정
3. Match 0.5 로 설정 (해상도의 하나를 기준으로 비율 유지한 채, 확장 또는 축소, Width : 폭에 맞춰 조절, Height : 높이에 맞춰 조절)

 

Reference Resolution

Full HD 경우, 동일하게 설정 

 

Aspect 의 경우, 

16 : 9 -> 1920 x 1080

 

 

Render Mode

---

게임종류와 화면에 따라 UI가 다르게 보여야 함

 

Screen Space - Overlay

• 유니티의 기본값
• 작은 게임화면, 큰 UI화면
• 실제 화면에서는 같은 화면에서 보임
• 캔버스 자동조정
• Rect Transform 수정 불가능
• 모든 오브젝트들이 다 생성된 후, 마지막에 그려짐
• 항상 모든 오브젝트 위에 보여짐

 

 

Screen Space - Camera  

• UI가 게임화면 뒤로 (순서 조정가능)
• 캔버스의 크기가 게임화면과 같음 (자동조정)
• 그 외는 Overlay와 동일
• 게임 캐릭터가 버튼위에 있도록 설정 가능
• Render Camera에 Main Camera 드래그 해서 사용
• Rect Transform 수정 불가능

 

World Space  

• 캔버스, 카메라의 크기가 같음
• 자동으로 확대, 축소가 되지않음
• 실제 UI와 같은 평면에 존재
• Rect Transform의 Width, Height로 캔버스 크기 설정
• Sorting Layer - Add Sorting Layer UI추가 해야 함 (가장 마지막 순서로)
• ex) 16:9 라면 Width : 1600, Height : 900, Scale x, y, z : 0.01로 설정 (텍스트가 뭉개지지않기 위해)
• Pos X, Y, Z를 0으로 해서 실제 게임 화면과 맞춰 줌

 

 

UI (User Interface)

---

• User Interface를 만드는 것 자체가 객체지향적임
• 어려운 기능의 제작은 유니티가 담당하고 우리는 가져다 쓰는 것을 원칙, 이해보다는 사용 위주로 학습
• 프로그래머들도 완벽하게 알고 사용하지는 않음
• 게임구성요소와 UI구성요소는 독립적임, 게임개발과 UI제작을 별개로 생각해야 함
• UI를 사용하기 위해서는 Canvas, EventSystem 필요

 

UI 순서

---

UI는 하이어라키 위쪽에 있는 것이 먼저 생성된다.

 

 

 

 

 

 

UI 프리팹

---

• 자주 쓰는 UI들을 프리팹화 해서 사용
• ex) Text, Button, Dim, Popup 등

 

Text(TMP)

 

 

Button

 

* Transition

• None : Button의 기능만 동작
• Color Tint : Default 값, 상황별로 여러가지 칼라 설정
• Sprite Swap : 상황별로 Sprite 설정
• Animation : 상황별로 애니메이션 설정

 

 

Button Image 컴포넌트 삭제, Image 자식 추가, TMP 프리팹 자식 추가

 

 

Dim

 

 

Popup

 

Popup Image 추가

 

 

 

Inner Imager 추가

 

 

 

ContentArea 빈 GameObject 추가

 

 

 

BtnArea 빈 GameObject 추가

 

 

 

Pivot 먼저 설정 후, 각 값 설정

 

 

 

Horizontal Layout Group 추가

 

 

 

 

TMP 프리팹 추가