뉴진스 파워퍼프걸 팬게임 제작 (7)_ Stage1_UI & 아이템 사용 구현 (New jeans Powerpuff girls fangame)

뉴진스 파워퍼프걸 팬게임 제작 (7)_ Stage1_UI & 아이템 사용 구현 

저번글에서 오브젝트를 만들고 먹으면 점수 상승하는 것까지 구현했으나

UI가 없어서 점수가 올라도 확인할 수 가 없었다.

이번 글에서는 UI를 구현해 현재 아이템 보유 갯수와 점수를 확인해 볼 수 있도록 만들 계획이다.

 

 

 

이번 글의 목표

HP UI 구현

MP UI 구현

LIFE UI 구현

토끼 아이템 갯수 UI 구현

쿠키 아이템 갯수 UI 구현

점수 UI 구현

HP&LIFE 연동 구현

쿠키 아이템 사용 구현

토끼 아이템 사용 구현

 

 

 

1. UI Canvas 생성하기

Hierarchy 창에서 빈공간을 클릭하고 마우스 우클릭을 하면 여러 메뉴창이 보인다.

그중 UI-Image를 클릭해준다.

 

그러면 자동으로 Canvas가 생기고 그 아래에 image가 생기게 된다.

Canvas의 Render Mode는 Screen Space - Camera로 설정,

Render Camera에는 현재 Hierarchy창에 있는 Main Camera를 드래그 해서 집어 넣어준다.

그리고 Reference Pixels Per는 100으로 설정해준다.

참고로 Reference Pixels Per에 입력한 값의 차이가 뭐냐하면

 

이게 Reference Pixels Per에 0을 입력한 상태이고

 

이게 Reference Pixels Per에 100을 입력한 상태이다.

어차피 UI가 게임 오브젝트들 앞에 배치되는 것은 동일하나

어떠한 오류인건지 0으로 설정했을때는

Scene창에서 확대하면 UI가 보이지 않는 경우가 종종 있어서

저렇게 가깝게 설정해주었다.

 

 

2. Image UI 설정하고 배치하기

이제 아까 Canvas 아래에 생성된 image 오브젝트를 설정해줄 차례이다.

Source Image에 hp bar 이미지를 Project창에서 드래그 해서 넣어준다.

참고로 아래 이미지들을 보면 실제 이미지에 비해 이미지 크기가 큰 걸 확인할 수 있다.

원래는 이런식으로 해서는 안되지만 UI 배치할때 편하게 하기 위해서 

1280x720의 빈 공간에 UI를 배치한 이미지를 그대로 저장해서

xy좌표 0,0에 배치하면 알아서 알맞은 배치되도록 만들었다.

최적화따위는 포기한 무식한 방법이지만 어차피 내 게임은 굉장히 가벼운 게임이기 때문에

이 정도로는 과부하가 오지 않아서 이러한 방식으로 만드는 방법을 택했다.

 

 

참고로 HP bar 구현도 최적화 따위는 무시한 방법으로 만들었다.

HP 상태에 따른 HP Bar 이미지를 각각 따로 만들어 둔 뒤

HP 값이 변하면 HP Bar image를 알맞은 걸로 바꿔줄 생각이다.

스크립트로 변경을 해줄 거기 때문에 저 이미지중 하나만 HP UI에 넣어주면 된다.

MP Bar와 LIFE Heart도 같은 방식으로 모든 상태별로 따로 이미지를 만들었다.

 

 

뮤직비디오에 배치된 UI 모습대로 

hp_bar, mp_bar, 캐릭터 초상화, Life글자&이미지, 응원봉 글자&이미지, 쿠키 글자&이미지, 점수 글자&이미지

Image UI를 모두 배치하면 이런 모습이 된다.

 

 

 

 

3. Text UI 설정하고 배치하기

이제는 아이템 갯수와 점수를 표현할 Text UI를 만들어 볼 차례이다.

아까와 같은 방법으로 UI메뉴창에 들어간뒤 Text - TextMeshPro를 선택한다.

 

예전 유니티에서는 자체적으로 Text에 설정을 부여하기가 힘들었는데

요즘 유니티는 많이 좋아져서 정렬이나 글자 크기, 굵기, 테두리 색깔등 다양한 효과를 줄 수있다.

폰트도 여러개 지원하고 있어서 원하는 스타일로 설정해준다.

 

응원봉 갯수, 쿠키 갯수, 토끼 갯수, 점수

총 4개의 Text UI를 만들고 배치했다.

 

 

 

4. UI & 아이템 사용 스크립트 제작하기

원래는 UI 스크립트 따로 아이템 사용 스크립트 따로 만들고

각각의 스크립트들을 코드로 연결을 해주는 게 정석이지만

이번에도 그냥 무식하게 기존에 만든 Player_hpCtrl 스크립트에 다 때려박았다.

원래 이렇게 만들면 나중에 관리가 힘들어지는 단점이 있지만

현재 이 게임은 규모가 작고 혼자 만드는 거라 오히려 이 방법이 관리가 좀 더 수월하다.

 

 

 

4.1 using namespace

UI와 TextMeshPro를 사용하려면 코드 가장 위에 

using UnityEngine.UI;

using TMPro;

를 써줘야 한다.

 

 

4.2 변수 초기 선언

LIFE를 구현하기 위한 변수를 선언해주고

이후 UI에 관련된 변수들을 선언해주었다.

보통 저렇게 일정된 규칙을 가진 변수들은 배열로 선언하지만

각각 최대갯수가 6개밖에 되지 않아서 그냥 일일히 복사 붙여넣기 해서 선언해주었다.

Sprite변수에는 아까 소개한 각 상태별 이미지를 하나씩 집어 넣을 예정이다.

 

 

 

 

4.3 Start 함수

life_now를 초기화 해주고

각각의 Text변수에 Count변수를 Tostring()함수로 숫자를 글자로 바꾸어 초기화해준다.

또한 각각의 image변수에 오브젝트의 image 컴포넌트들을 연결 시켜 초기화 해준다.

 

 

 

 

4.4 UI Image Ctrl 함수들

이것도 for문으로 구현할까 잠깐 고민하다가 고작 해야 6개라

그냥 Switch문으로 구현했다.

각각 hp,mp,life의 현재 값에 따라 이미지 sprite를 변경해주는 코드이다.

 

 

4.5 Item 사용 함수들

S키를 누르면 토끼를 사용하고

A키를 누르면 쿠키를 사용하게 만들었다.

아이템을 사용할때는 소리가 나게 설정하고

아이템이 없거나 각각 MP와 HP가 가득일때는 사용하지 못한다.

 

 

4.6 Update 함수

방금 만든 함수들을 Update함수에 추가해주고

현재 hp가 0이되면 life 1 감소하는 if문을 추가해주었다.

 

또한 Update함수에서 계속 Count변수값을 확인하면서 

text 변수에 대입해주도록 코드를 입력했다.

 

 

 

 

5. Object 및 Sprite 채워 넣기

코드 작성을 완료하면 기존 Player 오브젝트에 있는 Player_hpCtrl 스크립트 컴포턴트에

엄청나게 많은 변수와 빈칸들이 생성된걸 확인할 수 있다.

object나 text관련 변수들은 Hierarchy 창에서 드래그 해서 채워넣고

Sprite는 Project창에서 드래그 해서 채워넣는다.

 

 

 

 

5. 결과물

UI 적용 인게임 화면

아이템 획득 & 사용에 따라

UI에 표시되는 Text와 Image가 변하는 모습을 확인할 수 있다.

 

 

UI까지 추가하니까 진짜 게임화면과 비슷해졌다.

다음 글에서는 적 캐릭터를 구현할 계획이다.

 

 

 

뉴진스 파워퍼프걸 팬게임 제작 (6)_ Stage1_오브젝트 구현 (New jeans Powerpuff girls fangame)

 

뉴진스 파워퍼프걸 팬게임 제작 (8)_ Stage1_적 캐릭터 구현 (New jeans Powerpuff girls fangame)