본캠프_TIL_65일차(슬롯 코인 부족 시 비활성화, 몬스터 선택 시 화살표)

• 오전
  • 오전회의
  • 몬스터 중복 선택 시 표시
    • 콘솔에 띄워준 방식 → UI에 표시
  • 메인 씬 몬스터 선택 시 코인 부족하면 비활성화
    • 비활성화 오버레이 활용
• 오후
  • 몬스터 슬롯 선택 시 화살표 추가
    • 클릭한 이미지의 스프라이트가 변경되는 방식

 

 

몬스터 중복 선택 시 표시

 

이미 선택된 몬스터일 때 또는 몬스터 4마리를 모두 선택하지 않았을 때 띄워주는 경고창입니다. 

 

WarningBox에 Txt오브젝트를 만들고

[SerializeField] TextMeshProUGUI warningTxt;

private void LoadGameScene()
{
    if (_selectedListData.Count != 4) 
    {
        warningTxt.text = "몬스터를 모두 선택하세요";
        return; 
    }
    ...
}

 

 console.log로 띄워주던 코드를 다음과 같이 변경했습니다.

 

 

메인 씬 몬스터 선택 시 코인 부족하면 비활성화

가지고 있는 코인이 부족할 시 다음과 같이 비활성화 됩니다.

 

처음에 고려했던 방법

1. 가지고 있는 코인과 몬스터를 소환하는데 필요한 코인을 비교 후 비활성화할 slot의 idx를 받는다.

2. 해당 인덱스의 게임오브젝트의 컬러를 그레이로 변경한다.

 

-> 결과

자식 오브젝트까지 변경이 안됨.

자식 오브젝트까지 변경하려면 자식오브젝트를 가져오는 코드와 탐색하는코드가 필요함. 비용이 많이 발생.

 

->다른방법 고안

오버레이를 만들어 스크립트가 이를 참조하게 하고 해당 슬롯idx값을 받아 활성화 비활성화한다.

private void UpdateMonsterImgState()
{
    for (int i = 0; i < _slots.Count; i++)
    {
        if (_selectedMonsterList.TryGetValue(i, out var monsterInfo))
        {
            MonsterManager.Instance.SelectMonster(monsterInfo.monsterId);
            MonsterSO selectedMonsterData = MonsterManager.Instance.GetSelectedMonsterData();

            //선택가능 몬스터 검사
            bool isAvailable = IsMonsterSelectable(selectedMonsterData);

            _slotsOverlay[i].SetActive(!isAvailable);
        }
    }
}

private bool IsMonsterSelectable(MonsterSO data)
{
    return StageManager.CurrGold >= data.requiredCoins;
}

 

몬스터 슬롯 선택 시 화살표 추가 

현재 몬스터를 선택하고있는 슬롯을 나타내는 화살표입니다

 

처음고안한 방법은

 

1. 포인트를 찍어서 현재 선택진행중인 슬롯id를 받아 화살표prefab를 배치

-> 포인트를 찍어서 인스펙터창에 참조하는것 까진 가능하나. 화살표를 prefabs으로 만들어서 다시 canvas를 띄워주는게 비효율적으로 보임.

->같은 canvas에 화살표를 넣어보려곤 했지만 레이아웃에 화살표를 넣는 순간 같이 정렬이 되버림(Layout Component를 사용중이라)

 

2. 포인트를 찍어 그 위치의 이미지를 화살표로 바꿔줌

[SerializeField] Image[] arrowPoint;
    [SerializeField] Sprite arrowImg;

public void SelectSlot(int slotIdx)
    {
        _crrSlotIdx = slotIdx;
        for (int i = 0; i < arrowPoint.Length; i++) 
        {
            arrowPoint[i].sprite = null;
            Color color1 = new Color(1, 1, 1, 0);
            arrowPoint[i].color = color1;
        }
        arrowPoint[slotIdx].sprite = arrowImg;
        Color color = new Color(1, 1, 1, 1);
        arrowPoint[slotIdx].color = color;
    }

 

다음과같이 선택안되어있는 이미지들은 투명상태의 null.

선택된 이미지는 불투명상태의 이미지 스프라이트를 가진다.

 

근데 투명조절이면 충분해보인다.고쳐야겠다.