“MSW X Super Hackathon 2022” 에 참가하여 개발한 프로젝트 중 맡은 개발 기능 구현을 진행하며 정리한 포스트입니다.
👉 맡은 파트 - 건물 정보 UI
❗ 필요한 기능
건물 종합 정보 UI (보유 건물, 총 수익, 총 건물 개수)
건물 종합 정보 UI
우선 UI 디자인은 상점 디자인과 동일하게 하기로 결정했다. 여기서 정 사각형 itemSlot에 빌딩 정보들을 받아서 넣고 위에는 보유한 빌딩 개수, 밑에는 총 시간 당 수익을 나타내주는 UI로 제작하고자 한다.
정보 UI 로직
우선 기존 인벤토리 itemSlot과 유사한 방식으로 DataStorage에 저장된 보유한 빌딩들을 slot에 보여준다.
다음과 같이 ItemSlot UI에 붙여 줄 컴포넌트 스크립트를 생성한다. 받은 이미지 id 값을 UI 그룹 중 child로 들고 있는 image_slot UI에 접근해 이미지를 변경한다. 최종적으로 Item Slot에서 해당되는 빌딩 이미지를 보여주게 된다.
그 다음 slot과 관련된 UI 오브젝트에 컴포넌트로 방금 만든 script를 붙인다.
보유 건물 정보 버튼을 누르면 해당 함수를 호출한다. 해당 함수는 다음의 기능들을 진행한다.
1) User logic에서 저장하고 있는 현재 빌딩 정보들을 table<Entity>로 받아온다.
2) 전체 개수를 세기 위한 count 변수를 정의하고 각 building을 읽으면서 총 개수를 구한다.
3) 각 건물을 읽으며 건물의 building 컴포넌트에 접근하여 건물 이름, 건물 수익 정보를 얻어와 slot UI와 관련된 text에 설정한다.
4) building slot을 하나 생성하고 현재 building 정보로 설정해준다.
5) 총 수익을 User logic에서 가져오고 총 수익과 전체 개수를 UI Text에 설정한다.
최종적으로 다음과 같이 유저가 구매한 상점 정보가 보인다.
UI 수정
원래 건물을 클릭하면 건물 정보창을 열어주는 방식으로 진행할려고 했는데 굳이 정보를 보여주기 위해 두번의 유저 input을 받을 필요가 없겠다는 생각이 들었다. 따라서, 버튼 대신 그냥 이미지 형식으로 정보 자체를 한 번에 보여주는 것으로 UI를 좀 변경하였다.
원래 ScrollLayoutGroupComponent를 보면 기존에는 200x200 사이즈, 즉 정사각형으로 건물 정보 slot을 만들었다. 다른 정보들을 더 주기 위해서 세로로 길게 만들어서 정보들을 더 넣은 후 가로 방향으로 slot들을 배치하는 방식으로 변경하였다.
대략적으로 그린 초안 상태이다. 이미지 slot 배치가 자유롭지 않아서 좀 불편하다. 우선 배치를 정렬에 맞춰서 변경 하고 이미지 사이즈를 박스 크기 보다 작게 만들어 봐야겠다!
각 slot 별로 버튼 component를 제거해 클릭 효과를 삭제 해 이미지처럼 만들었다. (hierarchy에서 building slot (item slot)에 있는 button component를 제거하였다!)
확인해보니 img_slot 자체의 배치는 바꿀 수 없는 것 같아서 아예 child로 image 엔티티를 하나 더 만들어서 진행하였다. 우선 이전보다 좋아지긴 했는데 이미지 자체가 가로로 길면 엔티티 사이즈에 맞춰 들어가다보니 약간 찌부가 된다.. ㅎ 이 부분을 개선할 수 있는 지는 좀 더 찾아봐야 할 것 같다. (기본 제공 리소스 자체의 크기나 비율을 받아올 수 있을려나?)
