Unity 포켓몬스터 모작(2) - 배틀 UI 만들기

1. 개요

지난 시간에는 포켓몬스터의 기본 구조를 설계하고, 알맞는 애니메이션이 출력되는 것까지 확인했다.

이번에는 전투에서 나타나는 기본적인 UI를 만들어볼 생각이다.

 

미리보기

구현된 모습을 미리 보여주면 이러하다. 빨간 동그라미 친 부분을 구현해볼 생각이다.

 

 

 

 

2. 설계

(1) UI 컨트롤러 구조 설계

UI 컨트롤러의 설계도

UI컨트롤러가 제어해야 할 UI에 어떤 것이 있는지 설계를 해 보았다.

 

이름 UI : 포켓몬의 이름을 표기해주는 UI, 포켓몬컨트롤러의 PokeStatus.cs에 저장된 이름으로 초기화된다.

레벨 UI : 포켓몬의 레벨을 표기해주는 UI, 포켓몬컨트롤러의 PokeStatus.cs에 저장된 레벨로 초기화되며, 레벨이 오를 시 출력되는 레벨 역시 변경되도록 설정해야한다.

HP UI : 포켓몬의 체력을 표기해주는 UI, 포켓몬컨트롤러의 PokeStatus.cs에 저장된 체력실수치 (즉 최대값) 과 현재 체력을 기반으로 한다. 이 때 아군은 HP 바와 HP 텍스트를 모두 표기하고, 적군은 HP 바 만을 표기한다. (원작에서도 그러함)

(2) 동작 설계

포켓몬이 등장할 때 화면 밖에 숨어있던 UI창이 화면 안으로 들어오고, 퇴장할 때는 화면 밖으로 다시 나가도록 동작시킬 것이다. 이 때 모든 UI들이 일괄적인 속도로 이동해야 보는 데 불편하지 않으니 이 부분에 신경써서 구현하도록 하겠다.

이름UI와 레벨UI는 각각 처음에 초기화할 때 위치와 텍스트가 설정되며, 변동사항이 생길 경우 적용시키기 위한 업데이트 함수 역시 구현한다. 구성은 TextMeshPro로 구성한다.

HP UI는 기본적으로 슬라이더 UI를 사용한 HP bar와, TextMeshPro를 사용한 텍스트로 구성된다.

 

 

 

3. 구현

(1) PokeUIController 구현

필요한 변수 선언

UI 컨트롤하는 스크립트가 필요로 하는 변수를 일단 선언해준다.

뭐가 많은데, UI의 위치를 지정하고 있는 벡터들이 대부분으로, 초기 위치 설정 및 위치 변경 시 사용되는 변수들이다.

초기화 함수

다음은 UI위치 초기화 함수이다.

자세한 설명은 주식과 코드를 보면 알 수 있다고 생각한다.

한 가지 유의할 점만 짚고 넘어가자면, UI의 포지션을 정할 때는 transform.position을 사용하면 안된다는 것이다.

RectTransform을 사용하여야 하는데, 이러한 이유는 transform.position을 사용할 경우 화면의 사이즈, 즉 해상도에 따라서 UI가 다른 position에 위치할 가능성이 있기 때문이다. 해결방법은 어렵지 않았다. RectTransform을 기반으로 하는 UI의 위치는 RectTransform을 기반으로 코딩하면 그만이다.

 

++또한 HPBar를 구현하는 과정에 대해서도 설명을 깜빡하고 넘어갔던 것이 기억나 첨언하겠다

hpBar는 슬라이더로 구현되며, MaxValue에 rvhp를 넣고, value에 hp를 넣어주면 된다.

 

UI가 On 될 때의 작동을 구현한 함수이다.

코루틴이라는 것을 사용하게 되었다. 코루틴에 대한 개념을 정확하게 이해하지는 못하였지만, 일정한 시간에 거쳐 어떠한 작동을 하는 것을 구현할 때 많이 사용되길래 딱 적합하다고 생각하여 사용해보았다.

animationTime = 0.3f 라고 되어있는 부분은, 0.3초동안 작동시킬 예정이라는 뜻이다.

원래는 코루틴 없이 구현하였었으나 이 편이 제어가 편하다고 느껴져 사용하게 되었다.

마지막 문장은 포켓몬 애니메이션을 활성화해주는 함수로, PokeAnimationController 함수에 추가했던 함수이다.

포켓몬 등장 시 애니메이션을 활성화해준다.

 

UI가 Off될 때의 작동을 구현한 함수이다.

기본적으로 On시킬때와 같고, 퇴장 시 애니메이션을 비활성화해주는 코드도 넣었다.

showAnimation, hideAnimation 함수

showAnimation과 hideAnimation 함수의 구현을 PokeAnimationController.cs에서 구현하였다.

HP 바 컨트롤

HPBarColorUpdate() 함수는 체력바의 색을 바꿔주는 것으로, 포켓몬을 플레이 할 때 피가 1/4 밑으로 떨어지면 빨간색, 1/2 밑으로 떨어지면 노란색, 원래는 초록색이기 때문에 이를 구현해주기 위하여 넣었다.

HPUpdate() 함수는 HP bar와 HP 텍스트 모두 바꿔준다.

레벨변화, 이름변화에 따라 UI의 출력을 변경해주는 함수

LevelUpdate() 함수는 레벨이 올라갈 시 변화된 레벨을 UI에 적용시켜주는 작업이다.

rvHP, 즉 체력 실수치 값은 레벨에 대한 함수로 나타나기 때문에, 레벨이 올라가 체력 최댓값이 올라간 내용을 hpBar UI에도 똑같이 적용시켜줘야 한다. 이를 적용한 것이 LevelUpdate 함수의 마지막 문장이다.

NameUpdate() 함수는 정말 간단하게 이름 변경 시 텍스트만 변경해준 것이다.

 

(2) PokeStatus.cs 코드 추가

(1)을 보면, PokeStatus에서 rvHP 라고 하는 저번 시간에 선언하지 않았던 변수를 사용하는 것을 알 수 있다.

PokeStatus.cs에 추가적인 변수 선언

위와 같이 변수를 추가로 선언해주었다.

IV는 개체값, EV는 노력치, RV는 실수치이다.

RV를 계산하는 공식을 적용한 것이다.

공식을 보면 IV, EV가 전부 들어가는데 EV는 초기화하면 0으로 초기화되고, IV는 0~31 사이에서 랜덤으로 정해주었다.

 

 

 

4. 작동확인

포켓몬 등장 구현 확인

포켓몬 퇴장 구현 확인

HP 감소 구현 확인

HP 증가 구현 확인

이번 시간에 만들기로 의도했던 작동들이 전부 완벽하게 구현된 것을 확인할 수 있었다.

 

 

 

 

5. 향후계획

배틀 UI까지 갖춰졌으니 이제 실제로 배틀을 하는 것처럼 구현을 간단히 해보고자 한다.

기술을 고르고 스피드를 비교해 빠른 쪽이 우선 공격을 하게 되며, 공격을 당했을 때 데미지 계산식을 통해 피가 다는 것까지 구현해볼 생각이다.