[Wiggle Quest - 4] 상호작용 UI

지난 글에서는 아이템 스폰 시스템을 개발해보았다. 

1. 지렁이가 땅에 랜덤으로 떨어지는 먹이를 먹으면 몸이 늘어나고(레벨증가) , 장애물에 부딪히면 몸이 줄어든다.(레벨감소)
2. 지렁이가 땅에 랜덤으로 떨어지는 골드를 먹으면 '상점'에서 여러가지 버프와, 갑옷 구매가 가능하다.
3. 지렁이의 몸이 특정 레벨까지 오르면 게임 클리어
4. 지렁이의 몸이 모두 사라지면 게임 오버

이번엔 이 중 굵은 글씨로 표시해놓은 "상점"을 개발해보려 한다.

 

상점의 물품을 클릭으로 구매할 수 있으며, 구매한 것들이 한 눈에 보이도록 개발할 예정이다.

 

상점에서 구매가능한 물품에는 버프와 갑옷 두가지 종류가 있는데, 그 중 버프에는

1. 스피드 증가 

2. 골드 획득 증가 

3. 경험치 획득 증가 ( : 먹이 증가, HeartUp )

가 있으며, 최대 10레벨까지 레벨업이 가능하다.

갑옷은 최대 3레벨까지 레벨업이 가능하다.

 

우선 버프 부분을 구현하기 위해선 버프를 구매할 수 있는 버튼과, 한눈에 볼 수 있는 레벨 이미지, 가격표가 필요하고,

갑옷 부분을 구현하기 위해서는 가격표와 버프와 갑옷 구매 부분은 구분되길 원하므로 위의 방식과는 다르게 1,2,3레벨의 갑옷 이미지가 필요하다.

 

[ UI제작 ]

- 우선 UI를 텍스처를 활용하여 기본 틀을 잡아본다.

 

- 버프 버튼 이미지와 갑옷 이미지를 버튼으로 만들고, 갑옷의 버튼은 모두 비활성화 상태로 만들었다.

- 현재 레벨을 보여주는 게이지 블록들 또한 비활성화 상태의 이미지로 바꾸어 주었다.

 

- 가격표 이미지도 준비해두었다.

 

 

[ 코드 작성 ]

모든 리소스가 준비되었으니 이제 서로 연결 시켜주는 작업을 해보자! 

우선 버튼에 마우스를 올렸을 때, 가격표가 뜨게 하고, 모두 구매완료 했다면, "구매불가" 문구를 출력하도록 해보겠다.

- 마우스가 버튼 위에 올라갔는지 확인하는 메서드

 bool CheckMouse()
{
	return RectTransformUtility.RectangleContainsScreenPoint(thisRectTransform, mousePoint);
}

 

- 매프레임마다 위의 메서드를 활용하여 확인 후, panel(=가격표)를 활성화/비활성화 해준다.

panel(=가격표)의 위치는 현재 마우스 포인트에서 임의로 설정한 벡터만큼 더한 좌표이다. (SetPosPriceGroup)

void Update()
{
    if (CheckMouse() == true)
	{
		if (panel.activeInHierarchy == false)
		{
			panel.SetActive(true);
		}

		SetPosPriceGroup();
	}
	else if (CheckMouse() == false)
	{
		if (panel.activeInHierarchy == true)
		{
			panel.SetActive(false);
		}
	}
}

----------------------------------------------------------------

void SetPosPriceGroup()
{
	panel.transform.position = mousePoint + offset;
}

 

판매 물품에 따라 가격이 다르다. 

- 버프(예시:Speed)의 경우 최대레벨 도달시 Soldout을 출력하며,아니라면 버프 가격 배열에서 해당 버프의 가격을 가져와 출력한다.

            if (isDone == true)
            {
                priceText.text = "Sold Out";
                return;
            }
            
            switch (priceType)
            {
                case PriceType.Speed:
                    if (shopUI.PriceSpeed.Length == Worm.SpeedLv)
                    {
                        isDone = true;
                        break;
                    }
                    priceText.text = shopUI.PriceSpeed[Worm.SpeedLv].ToString() + "G";
                    break;

- 갑옷(예시:ArmorM)의 경우 가격 출력과 함께,  구매 가능한 갑옷만 활성화도 같이  작업해주었다.

현재 레벨이 해당 품목의 레벨(예시:1레벨)보다 높다면 SoldOut을 출력하고, 갑옷 버튼(+이미지)를 비활성화 시킨다. 

만약 높지않다면 갑옷 가격을 모아둔 배열에서 현재 갑옷의 가격을 가져와 출력하고, 해당 갑옷의 다음 단계 버튼(=이미지)를 활성화 시켜준다.

                case PriceType.ArmorM:
                    if (Worm.DefLv > 1) 
                    {
                        this.GetComponent<Button>().interactable = false;
                        isDone = true;
                        break;
                    }
                    else if (Worm.DefLv == 1)  
                    	this.GetComponent<Button>().interactable = true; 

                    priceText.text = shopUI.PriceDef[1].ToString() + "G";
                    break;
             }

 

- 버프의 경우, 구매시 옆의 게이지 블록들이 하나씩 채워져야 한다.

<예시 이미지>

상점에서 버프 품목을 구매하여 레벨업할때마다, 이 메서드를 부른다.

해당되는 버프 품목의 게이지 블록 배열과 현재 레벨을 입력하면 레벨을 하나 올리고 늘어난 레벨의 게이지 블록 이미지를 활성화 시켜주는 방식이다.

void AddGaugeImage(Image[] images, ref int level)
{
	level++;
	images[(level - 1)].enabled = true;
}

 

 

 

[관련코드추가]

모든 구매는 가지고 있는 골드로만 구매할 수 있다.

 

- 상점 구매 메서드

레벨업가능 레벨보다 크거나 같으면 return, 아니라면 해당 버프의 가격 배열 (priceSpeed)에서 가격을 가져와, 플레이어가 소지하고 있는 돈에서 구매가 가능한지 체크 후 가능하다면 레벨을 올려준다.

        public void PurchaseSpeed()
        {
            if (Worm.SpeedLv >= priceSpeed.Length)
            {
                Debug.Log("speed 구매불가");
                return;
            }
            
            if (worm.SubtractGold(priceSpeed[Worm.SpeedLv]))
            {
                worm.AddLv(AddPercent.Speed);
                return;
            }
        }

- 플레이어의 구매 메서드

플레이어가 소지하고 있는 돈에서 구매가 가능한지 체크 후 가능하다면 돈을 차감해주는 기능을 가지고 있다. 

        public bool SubtractGold(int value)
        {
            if (gold < value)
            {
                Debug.Log("돈부족! 구매불가능");
                return false;
            }
            else // gold >= value 
            {
                gold -= value;
                return true;
            }
        }

이로써 상호작용이 가능한 UI가 완성되었다!

 

 

 

- 구현 후 | Game View