게임 인터페이스_UGUI 기초

출처: https://youtube.com/playlist?list=PLO-mt5Iu5TeYI4dbYwWP8JqZMC9iuUIW2&feature=shared

📚 유니티 기초 강좌

#1. 캔버스

Canvas: UI가 그려지는 도화지 역할인 컴포넌트

Hierarchy창에서 우클릭>UI>Canvas 생성

Scene창에서 2D메뉴 클릭해서 스크린 확인 가능

---

#2. 스크린

스크린: 게임이 표시되는 화면, 해상도로 크기가 결정된다.

 

유니티에는 2개의 좌표계가 있다. 하나는 카메라가 관찰하는 World 좌표계 / 다른 하나는 게임 화면을 보여주는 Screen 좌표계가 있다.

 

마우스 커서도 스크린 좌표계에 포함된다.

---

#3. 텍스트 UI

Text: 문자열을 표시하는 UI

Hierarchy창에서 우클릭>UI>Text-MeshPro 생성

 

게임을 유료화해서 수익을 얻을 때에는 폰트 라이센스를 확인해야한다.

폰트 사이즈가 현재 설정된 네모칸 사이즈를 초과하면 폰트가 안보일 수 있다.

---

#4. 이미지 UI

Image: 이미지를 표시하는 UI

Hierarchy창에서 우클릭>UI>Image 생성

 

import한 이미지 파일의 Texture Type을 Sprite (2D and UI)로 설정해야 UI 적용 가능하다. (꼭 설정변경 후 Apply 누르기)

이미지 파일을 Image UI 컴포넌트의 Source Image에 드래그하여 적용시키면 된다.

 

Image UI 컴포넌트의 Set Native Size 버튼을 클릭하면 이미지의 원본 사이즈로 맞춰준다.

Image Type은 4가지가 있다. Simple / Sliced / Tiled / Filled

Simple은 Width * Hegiht만큼 늘어난다.

Sliced는 이미지를 가장자리 부분을 잘라서 배치하고, 가운데를 배치한다. (버튼에서 활용)

Tiled는 크기는 원본 사이즈 고정인데, Width * Hegiht만큼 이미지가 복사된다.

Filled는 어떻게 채워지느냐인데, 보통 Radial 360을 사용해서 각도만큼 이미지 분량을 조절할 수 있다. (쿨타임 효과 구현 가능)

 

이미지를 겹치고 싶다면 오브젝트 순서를 조정하면 된다. 아래쪽에 올수록 위에 오게 된다.

UI는 Hierarcy창의 순서에 따라 위 / 아래가 결정된다.

---

#5. 버튼 UI

Button: 클릭 이벤트를 가지고 있는 반응형 UI

Hierarchy창에서 우클릭>UI>Button-TextMeshPro 생성

 

클릭을 하면 어떠한 기능이 발생하는 UI이다.

버튼 오브젝트에는 이미지, 버튼 컴포넌트가 있고, 텍스트 오브젝트가 내장되어있다.

기본적으로 Image Type이 Sliced로 설정되어있다.

 

Button 컴포넌트의 Interactable은 클릭에 대해 반응할지 여부를 결정한다. (기본값: 체크->반응한다)

Transition은 이벤트에 대해 어떻게 반응할지 타입을 결정한다.

Color Tint는 색상을 바꿔준다. Normal Color는 아무 입력도 안하는 상태의 색상 Highlighted Color는 마우스를 올려놓았을 때 색상 Pressed Color는 눌렀을 때 색상 Color Multiplier는 색을 어떻게 섞을지 등등 옵션이 있다.

 

Navigation은 Tab키를 누르면 다음 버튼으로 이동할 것인지 어느 방향으로 이동할지 설정할 수 있다.

 

OnClick() : 버튼 클릭 시 호출되는 이벤트 함수

Button UI 컴포넌트에서 스크립트의 함수를 적용시키려면, 해당 스크립트 함수의 접근자가 public으로 입력되어있어야 한다. (매핑시키기)

 

버튼 클릭은 누르기+떼기 한 세트 동작이다.

---

#6. 앵커

스크린 좌표계에서 적용되는 오브젝트들은 일반 Transform 컴포넌트가 아닌, Rect Transform 컴포넌트가 탑재되어있다.

Rect Transform은 Anchor 옵션이 포함되어있고, 기준 Anchor로부터 X축으로 Y축으로 Z축으로 얼마나 UI 오브젝트가 떨어져있는지 알려준다.

(2)Shift: 컴포넌트의 기준점 /  (3)Shift+Alt: 컴포넌트 위치

 

그래서 위 십자선 아이콘인 Anchor Presets는 빨간점으로 캔버스에서의 기준점의 위치를 표시한다.

여기서 Shift키를 누르면 컴포넌트에서의 기준점이 파란점으로 표시된다.

여기에 Shift키+Alt키를 누르면 컴포넌트의 위치까지 여백없이 맞춰준다.

이렇게 Anchor 설정을 해주면, 항상 스크린에서 해당 위치에 고정된다.

 

앵커-빨간점 : 캔버스에서의 기준점

앵커-파란점 : 컴포넌트에서의 기준점 (Shift)

앵커-중앙네모 : 컴포넌트의 위치 (Alt)