12. 게임 인터페이스 만들기 (UGUI)

Hierarchy에서 우클을 하면 UI 탭이 따로 있습니다.

 

먼저 캔버스를 생성합니다.

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

 

그 후 상단에 2D를 누르면 Scene 창이 2D모드로 바뀝니다.

 

 

이제 캔버스 안쪽으로 UI를 생성하면 됩니다.

 

 

1.  Text

Text : 텍스트 입력

Font : 폰트

Font Style : 폰트 굵기

Font Size : 글씨 크기

Line Spacing : 줄 간격

Alignment : 글씨 정렬

Horizontal Overflow : 글씨가 ui width보다 커 넘칠 때 어떻게 할지 조정 

Vertical Overflow : 글씨가 ui height보다 커 넘칠 때 어떻게 할지 조정

Color : 글씨 색깔 

 

 

2. Image

아까처럼 UI Image를 생성합시다.

Image에 사진을 넣기 위해선 Project에 있는 사진을 Sprite화 시켜야 합니다. 

 

Apply를 누른 후, 아까 생성한 Image에 위 사진을 맵핑하면 됩니다.

 

Preserve Aspect : 비율 고정

Set Native Size : 원본 사이즈

 

Image Type을 누르면 4개의 선택지가 나옵니다.

 

Simple : 단일 이미지

 

Sliced : 이미지를 잘라서 확장하고 가운데 공백을 채움 (사이즈가 바뀌는 텍스트나, 버튼에 사용)

아래 사진은 공백채우기를 안했을 때

 

Tiled : 이미지를 타일처럼

 

Filled : Fill Amout 조정 값으로 일부분을 지울 수 있음 (스킬 쿨타임 이미지 등에 사용)

쿨타임 응용 예시 

 

 

3. Button

Fill Center : 가운데 공백 채우기 여부

Interactable : 버튼 비 활성화 (모습만 존재)

Normal Color : 기본 상태 시 버튼 색

Highlighted Color : 마우스가 버튼 위에 올라갔을 때 버튼 색

Pressed Color : 버튼이 눌렸을 때 버튼 색

Selected Color : 버튼이 눌리고 난 후 버튼 색

Disabled Color : 버튼 비 활성화시 버튼 색

Fade Duration : 색깔 바뀌는 속도

Navigation : 탭으로 버튼 이동 조정

On Click : 버튼 클릭 시 호출 될 함수 삽입

 

버튼을 눌렀을 때 Player 공이 점프하도록 해보겠습니다.

먼저 Player 스크립트에 버튼을 눌렀을 때 호출 할 Jump 함수를 하나 만들어줍니다.

이때 public으로 선언해야 유니티 상에서 맵핑에 쓸 수 있습니다.

    public void Jump()
    {
        rigid.AddForce(Vector3.up * 20, ForceMode.Impulse);
    }

 

Player 오브젝트를 맵핑 후, No Function을 클릭

 

 

플레이버튼을 누르고 점프 버튼을 누르면 점프가 됩니다.

 

4. 앵커

UI는 캔버스 기준 절대 위치를 사용하기 때문에, 화면 크기가 달라져도 UI의 위치는 똑같습니다.

 

다만 앵커를 사용하면 UI의 위치를 화면 크기에 상관없이 맞춤조정 할 수 있습니다.

UI의 posX와 posY는 캔버스 중심으로부터 떨어진 거리입니다. 이 중심점을 아래 사진 처럼 옮길 수 있습니다.

예를 들어, 원래 가운데에 있던 Button의 중심점을 캔버스 상단 우측으로 옮기고, x와 y를 0으로 만드니 버튼이 정확히 캔버스 우측 상단에 위치하게 됩니다.

 

앵커 + Shift : UI 오브젝트의 자체 기준 점을 옮길 수 있습니다. (위 버튼 내 중심에 있는 동그라미)

앵커 + alt : 여백없이 위치를 맞춰줍니다. 가운데로 옮겨봤습니다.

 

이런 식으로 UI를 게임에 삽입할 수 있습니다.

 

최종 결과