CCI - 03 - 버튼 & Mini Map (UI)

안녕하세요!!

 

 

이번 글에서는 플레이어의 UI항목에 좀 더 알아보고자 합니다.

 

점프 버튼, 그리고 겟 버튼, 미니맵 구현 동작을 알아보려고 합니다.

 

우선 가장 먼저 변경된 조이스틱 이미지를 먼저 보신 뒤 나아가 보겠습니다.

 

변경한 터치패드 Sprite 입니다.

 

원하는 이미지를 얻고 싶었는데, 공부했던 책들 중 하나가 생각나서 사용한 프로젝트에서

이미지를 가져오게 됐습니다 ㅎㅎ

(별건 아니지만 화면에 배치된 UI항목은 플레이 중이라면 계속 보게 될 화면이니..

유저분들의 입장까진 아니더라도,, 제가 원하는 걸 하고 싶었습니다 ㅎㅎ)

 

네

우선 점프 버튼부터 알아보겠습니다.

 

우선 PlayerMovement 스크립트에서

 

OnClickJumpBtn이라는 점프 기능의 함수를 만들어 주었습니다.

 

if문에서! isJump는 2회 이상 점프를 방지하기 위해 걸어주었었는데,

 

! isDie의 부분은 조금 나중에 테스트를 하면서 걸어 주었습니다.

(이유는 다들 아실 테지만.. 플레이어가 죽어서도 점프 버튼이 눌리는 이상한 그림이 연출되어서입니다....)

(누워서 점프 뛰는...)

 

중복 방지를 막기 위해 isJump는 바로 true로 바꿔 주었고

 

애니메이션의 트랜지션 조건 값과 사운드를 재생하는 코드입니다.

 

점프 뛰는 동작에 역동적인 모습을 연출하기 위해

 

RigidBody의 AddForce를 사용하였으며 ForcMode는 Impulse를 사용하였습니다.

(ForceMode에는 4가지 타입이 존재하는데요

현재 사용한 순간적인 힘을 주는 Impulse와 VelocityChange가 있으며

연속적인 힘을 주는 Force와 Acceleration이 있습니다.

 

여기서도 무게를 적용하려면 Impulse와 Force 

무게를 무시하려면 VelocityChange와 Acceleration

으로 나뉘어 볼 수 있으며 4가지를 상황에 맞게 사용해 원하는 결과를 얻을 수 있습니다 ㅎㅎ)

(네, 전 순간적인 힘 + 무게를 적용 한 Impulse를 사용했습니다.)

 

인자 값은 방향벡터 (Vector3/Up) * 지정된 스피드 값입니다.

---

점프 후 다시 사용하려면 isJump가 false가 되어야 합니다.

다양한 방법이 있겠지만, 간단하게 콜라이더를 이용해 충돌 시 일어나는

 

OnCollisionEnter에서 해결하였습니다.

 

콜라이더가 "Ground"라는 태그를 가진 녀석이랑 충돌했다면

(땅에 있다면)

 

isJump = false로 재 사용할 수 있게 해 주며

 

점프 애니메이션을 동작중이었다면 SetBool의 파라미터 값인 "JumpToGround"를

 

true로 바꿔 주어 점프 애니메이션이 재생되지 않게 해 주었습니다.

참고용 플레이어 애니메이터입니다.

---

바로 Get버튼도 알아보겠습니다.

 

이 Get버튼은 평상시에는 Close 되어 있다가, 특정 범위 안에 들어가면 Close를 비활성화시켜

 

Get 버튼이 눌리게 만들어줄 예정입니다.

 

코드도 간단히 public으로 선언하여 버튼의 OnClick이벤트에서 사용하였으며,

 

따른 동작 기능은 아직 구현하지 않았고, 애니메이션 동작만 하게 해 놓았습니다.

 

! isJump의 조건문을 걸어준 이유는, 점프 중 일 때는 사용이 안되게 하려고 조건을 걸어주었습니다.

 

Get 애니메이션을 실행 시 점프를 뛰게 되면

 

점프 애니메이션이 아닌 Get애니메이션이 실행되었기 때문입니다.

 

현재는 Get버튼을 눌렀을 시 애니메이션이 다 끝나기 전에

 

Move나 Jump를 하게 된다면 애니메이션이 즉시 전환이 되며

 

Jump 중에는 Get버튼이 눌리지 않습니다.

 

---

같은 날 작업한 미니맵 구현도 같이 보겠습니다.

 

미니맵 입니다.

간단히 구현된 부분을 보자면

 

플레이어를 따라다니는 미니맵이며

 

Player와 적을 보여줄 Sprite를 구현했습니다.

 

또한 +버튼과 -버튼을 누르면 확대 및 축소 가 되며

 

string text는 Scene 이름으로 설정되게 하였습니다.

---

카메라의 제어를 위해 MinimapCam 스크립트를 새로 생성하였고.

 

카메라의 x, y, z 축의 이동 여부를 체크할 Bool 변수 3개를 선언해 주었습니다.

 

player = 씬 내의 하나의 싱글톤 패턴인 Manager로 접근하여 받아와 주었습니다.

 

첫 번째 조건문으로, 만일 플레이어가 없다면 이 Update함수의 코드는 실행되지 않고

return으로 나가게 됩니다.

 

다음 transform(minimapCam)의 위치는

3항 연산자로 x, y, z를 설정해 주었으며

 

체크가 되어 있다면 플레이어 포지션을

체크가 안되어 있다면 자기 자신 포지션을

 

설정해 두었습니다.

 

y축은 따로 이동이 필요 없이 

 

플레이어가 점프할 때나 이동할 때나 항 시 같은 값을 주기 위하여

player.position의 y축에 + 13.0f의 값만큼 주었습니다.

 

원형 이미지는 컴포넌트의 Mask를 이용해 나타내 주었습니다.

---

바로 이어서 아래 있는 +, - 버튼의 줌인/줌아웃 기능을 살펴보겠습니다.

 

이번에는 카메라 제어가 아닌 UI항목인 버튼을 제어하기 위함으로

 

MinimapZoom 스크립트를 생성해 주었습니다.

 

minimapCam : 미니맵 카메라입니다.

 

zoomMin : 줌인 버튼이 눌릴 최솟값입니다.

zoomMax : 줌 아웃 버튼이 눌릴 최댓값입니다.

 

zoomStep : 축소/확대될 값입니다.

 

textMapName : 현재 씬의 이름입니다.

 

start함수가 아닌 보다 더 빨리 실행되는 Awake함수에서

 

SceneManager에서 현재 씬의 이름을 가져와 텍스트로 할당해 주었습니다.

 

씬 매니저를 사용하려면 using UnityEngine.SceneManagement를 꼭 선언해 줘야 합니다.

 

버튼을 누르면 실행될 zoomIn과 zoomOut 함수입니다.

 

카메라이 줌 인/아웃 효과는 fielOfView로 구현했습니다.

 

값은 Mathf함수들 중에서 Min과 Max를 사용하였으며

 

더 큰 값을 반환해 주는 Max와 더 작은 값을 반환해 주는 Min입니다.

 

zoomMin / zoomMax값이 되기 전 까지는 버튼이 눌릴 때마다 줌인을 하여 검사를 합니다.

 

 

아래 이어지는 코드는 PlayOnShot으로 사운드를 재생해 주는 코드입니다.

(play로 사운드를 재생하게 되면 소리가 중첩이 되지 않습니다.)

 

00 : 36초

Get버튼은 평소 Close가 되어 있지만 영상 촬영을 위해 비활성화를 해주었습니다.

 

다음 시간엔 플레이어의 HP와 플레이어를 따라다니는 펫을 살펴보겠습니다.

 

오늘도 

 

감사합니다.