개발일지 17일차 - Shop UI 제작

상점을 제작해야 한다. 위의 이미지는 기획서. 랜덤박스는 가격에 따라 다른데, 랜덤박스에 따라 나올 수 있는 아이템 등급이 다르고, 확률도 다르다. 

현재 제작 상태. 아직 ToString("C")를 이용하여 화폐 형식의 돈을 표현하는 것까지 밖에 구현이 안되었다.

상점을 구현하기 위해서는 우선 박스를 만들어야 될 듯하다. Box Class를 price 변수와 description 변수, BuyBox() OpenBox() 함수를 지닌 Abstract Class로 만들고, Wood Box, Metal Box, Steer Box, Gold Box 4가지 Class를 만들어 Box Class를 상속하게 하면 되겠다. 

그러나 스크립트를 만들던 도중, Box을 구입하는 방법이 구체화 되었다. Box를 선택한 후, 구매 버튼을 누르면 선택한 Box를 구매하는 방법으로 기획이 정해져서 다음과 같이 구조를 바꾸었다. Shop Class의 스크립트를 ShopPanel에 붙인 후, boxes List에 4가지의 Box를 넣은 후, 예로 WoodenBox Button을 클릭하면 SelectWoodenBox() 함수를 실행한다. 이 함수에는 Shop의 selectedBox 변수의 내용을 WoodenBox로 바꾸고 WoodenBox의 OpenBox()를 실행할 것이다.

그리고 다음과 같이 UI를 제작한다. 

 <ShopPanel의 Hierarchy 구조>

그리고 Shop의 스크립트를 다음과 같이 작성하였다. 스크립트의 내용은 요약하면 UI 우측의 4가지 Box 버튼 중 임의의 하나를 선택했을 때, 해당 아이템의 이미지와 Description를 띄어준다. 그리고 눌려진 버튼은 Overlay 오브젝트(이미지)가 활성화 되면서 눌러진 것처럼 보이는 것이다. 그것을 SelectOOBox() 함수에 구현해 놓았다.

이렇게 선택이 된 Box는 selectedBox 변수에 담겨지고, Buy 버튼을 누르면 BuyBox() 함수가 작동하게 되어 선택된 박스의 함수 OpenBox()를 불러오게 된다.

OpenBox()의 정의. 현재 소유하고 있는 돈을 검사하여 충분하면 박스를 여는 프레임을 띄우고, 돈이 부족하다면 알림 창이 뜬다.

박스 구입에 성공 시, 박스가 열리고 아이템이 등장하는 프레임

돈이 부족해 박스 구입에 실패 시 알림창이 뜬다.