8. 게임 인터페이스 구현

오늘은 Ui를 구현해 볼 것이다.

 

캔버스

 

Hierarchy 우클릭 > Ui > Canvas를 누르면 캔버스가 생성이 되고,

2D 버튼을 누르면

다음과 같은 화면이 나온다.

 

이 하얀색 직사각형이 바로 스크린이다.

 

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

유니티에는 크게 2가지 좌표계가 있다.

1. World (월드) : 우리가 즐기는 게임 그 자체

2. Screen (화면 창) : 게임창, 게임 윈도우, 화면 자체 (마우스 커서도 스크린 좌표계에 포함.

 

Text Ui

위 사진과 같이 누르면 텍스트 창이 생긴다.

 

텍스트 창 생긴 모습

 

주로 사용하는 것들

Font : 글씨체를 나타냄. 상업적으로 팔 때에는 라이센스를 꼭 확인할 것! (많이 쓰는 폰트 : 배민체 등)

Font Style : 굵게 혹은 이탈릭체 등 스타일을 나타냄

Font Size : 폰트 사이즈. 주어진 범위를 넘어가면 짤릴 수 있음

Horizontal Overflow : 폰트 사이즈가 클 경우, overflow로 설정하여 범위를 넘어가도 글씨를 나타내는 기능

Line Spacing : 띄워쓰기 간격

Alignment : 정렬

Color : 색깔

 

Image

이번에는 이미지를 넣는 방법이다.

 

다음과 같이 누르면 

 

 

이미지를 넣을 수 있게 생성된다.

 

저 흰색 네모 박스를 관리하는 창인데,

Color로 색깔을 바꿔주거나

이미지를 넣을 수 있다.

 

우선 이미지를 선택한다.

 

그럼 Inspector 창에 Texture type이라는 메뉴가 있는데,

Default에서 Sprite (2D and Ui)로 바꿔주고 Apply를 누른다.

 

그리고 끌어 넣으면 다음과 같이 사진이 적용된다.

 

사진을 넣으면 다음과 같이 Preserve Aspect라는 항목이 나오는데, 이는 원본의 비율을 맞춘다는 것이다.

그리고 그 아래에 Set Native Size는 원본 크기를 맞춘다는 것이다.

 

+Image Type (스킬 쿨타임 이펙트)

다양한 모드가 있지만 그 중 Filled가 있다.

 

다음과 같이 2가지 그림을 준비하고 하나는 살짝 어둡게 표현한다.

그리고 두사진을 겹쳐 놓은 뒤,

Filled Amount 항목의 효과를 이용하면

다음과 같이 스킬 쿨타임 같은 효과를 낼 수 있다.

 

+이미지를 위로 올리는 법

 

여기서 아래의 항목일수록 

나중에 그려진다. (맨 위로 올라오는 효과)

순서를 바꾸면 된다.

 

Button

 

다음과 같이 클릭하여 버튼을 생성할 수 있다.

 

생성된 버튼의 모습

버튼 안에 보면 Text가 하위 항목으로 들어가 있는데

 

옆에 Text 창으로 버튼 안의 글을 수정할 수 있다.

 

Button 기능 알아보기

Interactable : 체크 해제 시, 버튼의 기능을 하지 않음

Transition : 어떻게 반응할 것인지를 나타냄

1. None

2. Color Tint : 색깔을 바꾸어줌

-Normal Color : 원래의 버튼색

-Highlighted Color : 마우스를 올려놓았을 때의 버튼색

-Pressed Color : 버튼을 눌렀을 때의 버튼색

-Disabled Color : 버튼이 비활성화 되었을 때의 버튼색

-Selected Color : 버튼이 선택되었을 때의 버튼색

-Fade Duration : 색깔이 바뀌는 시간

-Color Multiplier : 색깔 섞는 강도 

-Navigation : 인터넷에서 Tab키를 누르면 다른 인터페이스로 넘어가듯이, Tab키를 누르면 다른 버튼으로 넘어가게 해주는 기능. 버튼이 한개이면 굳이 신경 안 써도 된다.

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

 a. +를 눌러주고, 원하는 물체를 끌어온다.

저번 시간에서의 Ball을 끌어왔다.

b. Ball의 스크립트를 열어서 함수를 정의한다. (이때, private가 아닌 public으로 해야지 Inspector 창에서 쓸 수 있다.

c. Onclick()창으로 가서 추가했던 함수를 설정해준다.

3. Sprite Swap

4. Animation

 

Anchor

만든 것을 실행하다 보면, 해상도가 바뀜에 따라서

표현했던 텍스트, 이미지 , 버튼들의 위치가 자꾸 바뀌게 되는 현상이 있다.

 

이를 해결하기 위해서 Anchor (해석하면 닻) 이라는 기능을 써 볼 것이다.

 

현재 위 사진에서의 텍스트는 가운데 바람개비 모양에 위치를 중심으로 Pos X와 Pos Y의 수치(픽셀)만큼 이동되어 있는 것이다.

 

따라서, 화면의 해상도가 바뀌면 바뀐 해상도의 가운데를 기준으로 저 수치만큼 이동하여 표시되기 때문에,

안 맞는 것처럼 보여지는 것이다. 

 

따라서 텍스트는 왼쪽 위에 존재하게 설정하고 싶으므로,

 

왼쪽 위의 것을 클릭해주면,

 

다음과 같이 바람개비 모양의 Anchor가 이동한 것을 확인하고 해결할 수 있다.