Land Of Memories - UI Design

안녕하세요.

 

추가 기능 구현에 들어가기에 앞서 UI의 디자인부터 작업해 보았습니다.

초기 상태

메뉴 & 스텟 클릭

 

---

 

현재는 버튼 클릭 기능 구현만 작업된 상태이며,

 

각 UI와 버튼에 대해 설명을 한 뒤 하나씩 차례대로 기능을 구현해 나가겠습니다.

 

---

 

화면 상단 좌측에 있는 Level 표시입니다.

플레이어의 경험치가 100이 되면 Level이 증가하며 경험치는 0으로 초기화됩니다.

 

화면 상단 중앙에 있는 맵 Text입니다.

플레이어가 현재 있는 맵의 위치를 나타 냅니다.

 

화면 하단 중앙에 있는 플레이어의 체력 HP Bar입니다.

스탯을 통해 최대치를 증가시킬 수 있으며

대미지를 입으면 체력이 깎이게 됩니다.

 

 

화면 하단 중앙에 있는 플레이어의 경험치 EXP Bar입니다.

사냥 및 퀘스트를 통해 경험치를 수급할 수 있으며,

범위는 00.00%부터 100.00%입니다.

 

 

화면 하단 우측에 있는 Menu 버튼입니다.

메뉴 버튼에는 현재 Stage 정보와 Stat 정보를 확인할 버튼이 존재합니다.

 

 

메뉴 버튼을 클릭하면 나타날 Frame입니다.

Stage, Stat 버튼을 생성해 놓은 상태이며,

Null로 표시된 부분은 앞으로 추가될 UI의 임시 공간입니다.

 

 

Stage 버튼을 누르면 팝업 될 Frame입니다.

현재 담긴 맵의 정보들이 거처해 있으며

맵의 이미지가 검은색으로 표시된 부분은, 아직 맵을 만들지 않아 임시 Black으로 처리해 놓았습니다.

Close 버튼으로 메뉴를 닫을 수 있으며, 

오른쪽 가기 버튼으로 다음 Frame으로 이동할 수 있습니다.

 

 

Stat 버튼을 클릭하면 팝업 될 Frame입니다.

최상단엔 플레이어의 현재 Level을 표시하였으며,

 

아래로 체력, 힘, 방어를 표시해 두었습니다.

 

또한 Reset 버튼과 Save 버튼을 두어 올린 스탯을 저장하거나 초기화할 수 있게 배치를 하였습니다.

 

---

 

 

다음은 버튼을 클릭하면 실행될 스크립트를 살펴보겠습니다.

 

먼저 Menu 스크립트를 생성한 뒤

 

isMenuButtonClick으로 팝업이 됐는지 안 됐는지 판단해 주었습니다.

 

Menu 버튼을 누르면 isMenuButtonClick 은 True

 

한번 더 Menu 버튼을 누르면 isMenuButtonClick 은 False

로 다음 로직이 실행됩니다.

 

 

애니메이션은 DOTween을 이용했습니다.

 

각 실행될 OpenMenu() 함수와, CloseMenu() 함수입니다.

SetActive로 활성화/비활성화를 해주었으며

DoAnchorPos()를 사용해 애니메이션 이동,

DOScale()을 사용해 크기를 변형해 주었습니다.

 

OnClickMenuButton() 함수는 'Menu' 버튼에 On Click () 이벤트로 연결해 주었습니다.

 

isMenuButtonClick에 따라 OpenMenu() / CloseMenu()가 실행되도록 하기 위함입니다.

 

 

팝업 된 Menu Frame에서 'Stage' 버튼을 클릭하면 팝업 될 Frame을 컨트롤할

MenuStage 스크립트입니다.

 

OnClickOpenStageMenu(), OnClickCloseStageMenu()

함수를 보시면 DOScale만 이동을 하여 크기 조절 Tween만 실행하여 확장되는 구현을 해보았습니다.

 

*초기화 로직을 구현한 이유는, 플레이어가 stage02 Frame에서 Close 버튼을 눌러 Frame을 닫았을 시 다시 열게 되면 Frame 02가 아닌 Frame01이 팝업 되게 하기 위함입니다.

 

 

OnClickRightButton(), OnClickLeftButton() 버튼은 각 방향으로 Frame을 넘기기 위한 버튼입니다.

현재는 Stage Frame이 총 2개 가 존재하며

각 SetActive()로 활성화/비활성화를 해주었습니다.

 

다음은 Menu Frame에서 Stat 버튼을 클릭하면 실행될 함수를 담고 있는 MenuInven 스크립트입니다.

이번엔 DOAnchorPos()를 사용해 x축 -1500에서 -718로

왼쪽 카메라 영역 밖에서 카메라 영역 좌측에 위치하도록 구현했습니다.

 

해야 할 일

 

1. Stage 맵 해금 관련 DataManager의 StageLevel01과 동기화

2. Stat 및 Hp, Exp 구현

3. 각 맵의 퀘스트인 StageLevel01~... 을 통해서 씬 이동 구현

 

---

 

 

확실히 디자인이 약간이라도 적용이 되고 안되고의 차이는 매우 큰 것 같습니다!!

사운드 적용도 하면 조금 더 분위기가 살 것 같은데, 현재 우선순위가 있는 작업은 아니기에 약간 미루도록 하겠습니다..!

 

감사합니다.

---

*(추가) 수정

 

코드를 살펴보던 도중 Stat을 Inven으로 잘못 작성을 했습니다.

 

Inven 관련된 표기를 모두 Stat으로 바꿔 주었고

 

버튼에 연결된 OnClick()에는 Missing으로 연결이 해제되어 있어서

재연결을 해주었습니다.

 

생각해 보니 Inven도 있으면 좋을것 같기도 하고 Skill도 있으면 좀 더 역동감을 줄 것 같은데

 

이 부분은 게임의 전체 흐름을 봐서 필요 하다고 판단시 추가 기능 구현을 하도록 하겠습니다.

 

 

감사합니다.