#14-1 유니티 체력바 만들기(캔버스, UI, 텍스트)

이번 포스팅은 유니티 캔버스, UI 요소를 사용하여 체력바를 만들겠습니다.

 

포스팅은 유니티 2D 게임 개발(게임 개발 프로그래밍)에 나온 예제로 진행합니다.

 

#1 유니티2D 개발 시작하기

---

캔버스

캔버스는 사용자 인터페이스, "UI" 요소를 유니티 Scene에 렌더링 하는 일을 담당하는 게임 오브젝트입니다.

유니티 Scene에서 모든 UI 요소는 캔버스 오브젝트의 자식 오브젝트여야 합니다.

캔버스 오브젝트는 한개 혹은 그 이상일 수 있습니다.

UI 요소를 만들었을 때 캔버스 오브젝트가 없다면 자동으로 만들어 집니다.

 

UI 요소

UI요소는 버튼, 슬라이더, 입력 필드 등과 같은 사용자 인터페이스에 공통으로 필요한 기능을 가지고 있는 게임 오브젝트 입니다.

유니티에서는 이미 만들어진 UI요소를 바탕으로 빠르게 만들 수 있습니다.

UI요소는 사각 트랜스폼 컴포넌트를 사용하여 위치, 회전, 스케일을 포함하여 너비와 높이 속성을 가지고 있어 크기를 지정할 수 있습니다.

 

---

체력바만들기

체력바를 만들어 보도록 하겠습니다.

먼저 저는 체력바에 사용할 스프라이트를 저장할 폴더인 Health Bar 폴더를 Sprite 폴더에 만들었습니다.

체력바에 사용할 스프라이트를 Health Bar 폴더에 저장하였습니다.

스프라이트를 선택한 후에 Inspector창에서 사진과 같이 설정하였습니다.

Sprite Mode : Multiple

Pixels Per Unit(PPU) : 32

Filter Mode : Point(no filter)

Compression : None

 

Apply > Sprite Editor를 열어서  Automatic(자동)으로 설정 후  Slice 하였습니다.

 

지금까지 체력바에 사용할 스프라이트 이미지를 준비하였습니다.

 

캔버스를 사용하여 화면상에 체력바를 띄우도록 하겠습니다.

Hierarchy창의 빈 공간 > 마우스 오른쪽 클릭 > UI > Canvas 오브젝트를 선택합니다.

1. Canvas, EventSystem 오브젝트가 생성된 것을 확인 할 수 있습니다.

2. Canvas 오브젝트의 이름을 HealthBarObject로 변경하였습니다.

3. EventSystem 오브젝트를 삭제하였습니다.

※ EventSystem 오브젝트는 사용자가 마우스나 기타 입력 장치를 사용하여 직접 오브젝트와 상호 작용할 수 있는 수단입니다. 필요가 없으니 삭제하였습니다.

 

HealthBarObject(캔버스 오브젝트)의 컴포넌트 속성 설정입니다.

Canvas 컴포넌트에서 Render Mode를 Screen Space - Overlay, Pixel Perfect를 체크로 설정합니다.

Screen Space - Overlay 속성은 유니티는 Scene위에 UI요소를 그리게됩니다.

이때 화면의 크기가 바뀌면 UI요소를 담은 캔버스는 자동으로 자신의 크기를 바꿉니다.

Canvas 컴포넌트는 사각 트랜스폼(Rect Transform)을 변경하며 이 설정은 외부에서 바꿀 수 없습니다.

만약 UI 요소의 크기를 변경하고 싶다면 캔버스가 아닌 UI요소 자체의 크기를 변경해야 합니다.

 

Canvas Scaler 컴포넌트에서는 UI Scale Mode를 Scale With Screen Size , Reference Pixels Per Unit을 32로 설정하였습니다.

화면 크기에 따라 캔버스의 크기를 확대 하거나 축소합니다.

 

HealthBarObject(캔버스 오브젝트)에 UI요소를 추가해보도록 하겠습니다.

HealthBarObject를 마우스 오른쪽 클릭하여 UI > Image를 선택합니다.

HealthBarObject의 자식오브젝트로 Image 오브젝트가 들어가게 됩니다.

 

이때 Image오브젝트의 이름을 Background로 변경하고 사진과 같이 설정하겠습니다.

Rect Transform 컴포넌트의 Width(너비) : 250 , Height(높이) : 50으로 설정하여 크기를 지정하였습니다.,

Image 컴포넌트의 Source Image를 스프라이트이미지로 설정하였습니다.

HealthBar_4 스프라이트 이미지

방금 설정한 Background 오브젝트의 위치를 설정하겠습니다.

1. Scene뷰에서 Gizmos를 선택하여 활성화 합니다.

2. Hierarchy차에서 HealthBarObject(캔버스 오브젝트)를 더블클릭합니다.

위치를 이동해야 하는 Background(이미지 오브젝트)를 선택하고 Scene뷰에서 단축키 W인 이동도구를 선택하여 캔버스 기준 오른쪽 상단으로 위치합니다.

Game뷰를 확인해보면 Backgorund가 오른쪽 상단에 위치한 것을 볼 수 있습니다.

 

체력바가 항상 화면의 오른쪽 상단에 위치시키기 위하여 앵커포인트를 수정하도록 하겠습니다.

먼저 사진처럼 Background(UI요소)를 선택하면 보이는 4가지의 삼각형을 가지고 있는 모양을 앵커라고 합니다.

이 앵커는 UI요소에만 존재합니다.

앵커포인트는 4가지의 삼각형 핸들을 말합니다.

앵커포인트가 4가지인 이유는 각 삼각형이 사각형의 각 모서리에 해당하기 때문입니다.

 

Background를 선택하고 Anchor Presets 아이콘을 클릭한 후에 사진과 같은 top(행)- right(열) Anchor Presets을 설정합니다.

중앙에 위치했던 앵커포인트가 모두 오른쪽 상단으로 모여있는 것을 볼 수 있습니다.

 

지금까지는 체력바의 배경과 위치를 설정하였습니다.

다음은 UI 이미지 마스크를 사용하여 체력값에 따라 바뀌는 이미지를 만들겠습니다.

먼저 Hierarchy창에서 Background를 마우스 오른쪽 클릭 > UI > Image를 선택하여 Background의 자식 오브젝트를 생성합니다.

이름 : BarMask

Rect Transform 컴포넌트 Pos X : 0 , Pos Y : 6

Rect Transform 컴포넌트 Width  : 240 , Height : 30

Image 컴포넌트 Source Image 속성 설정

Mask 컴포넌트 추가

이름과 위치, 크기, 컴포넌트를 설정하겠습니다.

방금 만든 자식 오브젝트인 이미지 오브젝트가 마스크 역할을 하겠습니다.

마스크란 무언가를 가리는 가면이 아니라 마스크의 아래에 있는 자식 오브젝트가 마스크의 모양 부분만 보여주도록 하겠습니다.

BarMask가 마스크 컴포넌트가 있기 때문에 BarMask의 자식 오브젝트에 마스크를 적용합니다.

BarMask를 선택 > 마우스 오른쪽 클릭 > UI > Image 선택하여 BarMask의 자식오브젝트를 생성합니다.

방금 만든 BarMask의 자식 오브젝트인 이미지 오브젝트의 속성 설정입니다.

이름 : HPmeter

Rect Transfrom 컴포넌트의 Witdh : 240, Height : 30 설정

부모오브젝트인 BarMask의 크기와 동일합니다. 위치는 BarMask의 자식오브젝트이기 때문에 바꿀필요가 없습니다.

Image 컴포넌트의 Source Image 설정하였습니다. 아래의 이미지 입니다.

HealthBar_2

Image Type : Filled

Image Type > Fill Method : Horizontal

Image Type > Fill Origin : Left

Fill Amount 슬라이더를 움직여보면  체력바가 왼쪽에서 오른쪽으로 채워집니다.

Fill Amount를 0.5로 설정하였습니다.

 

현재 Hierarchy창에서의 HealthBarObject(캔버스 오브젝트)의 구조입니다.

 

다음은 남은 체력을 보여주는 텍스트를 만들어 보겠습니다.

Assets > Fonts폴더를 생성하였습니다. 텍스트에 사용할 폰트를 저장할 폴더입니다.

Fonts폴더에 텍스트로 사용할 폰트를 드래그 앤 드롭하여 임포트합니다.

유니티에서는 자동으로 파일 형식을 감지합니다.

저는 책에서 제공한 제이슨 코트크가 만든 실크스크린 서체를 사용하겠습니다.

 

텍스트로 사용할 폰트가 준비가 되었습니다. 체력 텍스트를 추가하겠습니다.

Background의 자식오브젝트로 UI > Text를 선택하여 텍스트 컴포넌트를 생성합니다.

만든 Text 컴포넌트를 사진과 같이 설정합니다.

이름 : HPText

Rect Transform > Anchor Presets > bottom- left 

Rect Transform >  Width : 70 , Height : 16 

Text : HP : 100

Character > Font > 위에서 설정한 폰트 혹은 프로젝트에 맞는 폰트 사용

Character > Font Size > 프로젝트에 맞게 설정

Paragraph > Alignment > 왼쪽, 중앙

Color > 흰색

앵커포인트, 크기, 텍스트, 폰트, 정렬 , 색상을 설정하였습니다.

위치는 Background의 왼쪽 하단 부분에 위치하였습니다.

 

마지막으로 방금까지 만든 HealthBarObject를 프리팹으로 만듭니다.

 

다음 포스팅에는 체력아이템을 먹으면 체력이 회복되는 기능을 만들겠습니다.

 

마지막으로 Ctrl + S를 눌러 Scene을 저장합니다!