[개발일기]수학 공모전 업그레이드 시스템 #02

들어가며

블로그 작성할 여유가 많이 없는 거 같긴 하지만... 두배로 일하면 되지 않을까요?남은 추석연휴 열심히 달려보겠습니다.

 

---

개발 할 시스템

전에는 가지고 있던 Resource(재료)들이 개수가 표시되며 정렬되고, 마우스 인식을 받아

상호작용 할 수 있게 만들었는데, 이번에는 위에 업그레이드할 유닛들을 표시하고, 선택할 수 있는

시스템을 만들껍니다.

 

 

참고용 이미지

이런 식으로 유닛을 선택할 수 있게 만드는 시스템입니다. 

 

---

시스템 구조

구조를 어떻게 짤지 고민을 많이 해보았습니다.

어떻게든 돌아가게만 짠다면 여러 가지 구조가 생각이 나긴 하지만.. 뭔가 비효율적인 느낌.

그중에서 제일 맘에 들고 개발 난이도도 어렵지 않다고 생각한 구조로 짜려합니다.

 

우선 유닛을 들 전부 다 소환하여 정리해 둡니다.

 

대충 이런식으로요

 

이후 각각 모든 유닛칸들에게 Index값을 순서대로 부여해 두고(1,2,3,4,5...)

가운데 선택 되어있는 부분에도 Index값을 기본 0으로 설정해 둡니다.

이후 화살표 버튼을 누르면 버튼에 맞게 인덱스값을 조절하며 유닛칸들을 움직이고.

가운데 인덱스값과 유닛 인덱스값이 같다면 유닛이 활성화되게 하는 구조입니다.

 

말로만 설명하려니 뭔가 부족한 거 같은데, 개발하면서 다시 봐봅시다. 

 

---

 

 

개발 시작

이번에도 마찬가지로 유닛 칸을 이루기 위한 데이터 SO 먼저 만들겠습니다.

using System;
using UnityEngine;

/// <summary>
/// 유닛 업그레이드 관련 정보 SO
/// </summary>
[CreateAssetMenu(menuName = "SO/Upgrade/Data")]
public class UnitUpgradeData : ScriptableObject
{
    public Sprite sprite;//유닛 스프라이트
    public String name; // 이름
    public int index; // 유닛 인덱스
}

 

설명할 것도 없습니다.

유닛 칸에 필요한 이름, 스프라이트, 아까 구조설명할 때 말한 인덱스 값입니다.

 

 

이번엔 유닛 칸들을 관리해 주는 매니저의 일부를 봅시다.

배경은...무시해주시길 바란다..

 

간단한 구조이다. 데이터와, 프리팹을 받아오고

awake에서 foreach를 돌며 소환하는 코드입니다.

한 가지 볼 점은 패딩정도인데,

프리팹은 매니저의 자식으로 태어나 0,0,0을 가지게 되고 이후 씬에서 보니

x좌표 패딩값은 500으로 설정하였습니다.

 

소환하고 로컬 포지션의 x좌표를 x패딩에 현재 패딩을 곱하고, 이후 현재 패딩값을 더 해주었습니다.

 

이를 통해 처음 소환을 해서 0일 때는 0,0,0 

이후 1일 때는 500, 2일 때는 1000, 3 - 1500.... 이런 식으로 패딩이 잘 들어갈 것입니다.

 

 

이제 UnitUpgrade 클래스를 살펴보자.

public class UnitUpgrade : MonoBehaviour
{
    private UnitUpgradeData _unitData;//유닛 데이터 저장
    private Image _imageCompo;//이미지 컴포

    [SerializeField]
    private GameObject _panel;//껐다 킬 패널
    [SerializeField] 
    private TextMeshProUGUI _nameText; // 이름 텍스트
    
     private float _paddingValue; // 패딩 값

 

필요한 변수들입니다. 설정 및 데이터 저장을 위한 데이터,

유닛 설정을 위한 이미지 컴포, 패널, 텍스트,

이후 이동에 필요한 패딩 값입니다.

 

public void Initalize(UpgradeManager manager, UnitUpgradeData data)
    {
        _imageCompo = GetComponent<Image>();
        
        _unitData = data; // 데이터 설정
        _imageCompo.sprite = _unitData.sprite; // 이미지 데이터의 스프라이트로
        _nameText.text = _unitData.name; // 텍스트 이름으로 설정
        
        manager.OnChangeEvent += HandleChangeEvent; // 이벤트 구독
        _panel.SetActive(manager.index!=_unitData.index); // 패널 인덱스에 맞춰 끄고키기
        
        _paddingValue = manager._xPadding; // 패딩 설정
    }

초기화 메서드입니다. 데이터에 맞게 이미지와 텍스트 설정,

데이터 저장, 패널 껐다 켜기, 매니저의 패딩값 불러와 저장,

이벤트 구독 정도를 해줍니다.

 

private void HandleChangeEvent(int index, bool _isRight) // 인덱스 값이 바뀔때마다 실행될 함수
    {
        _panel.SetActive(index!=_unitData.index); // 패널 인덱스에 맞춰 끄고 키기
        
        float xPos = _isRight ? -_paddingValue : _paddingValue; // 오른쪽인지 아닌지에 따라 좌표 설정
        
        transform.DOMoveX( transform.position.x+xPos, 0.75f).SetEase(Ease.OutQuint); // 이후 좌표에 맞게 이동
    }

 

구독했던 함수는 이렇게 생겼는데,

패널을 자신의 인덱스와, 받아온 인덱스가 같은지 안 같은지 확인 후 끄고 켜줍니다.

이유는 선택된 지 안 됐는지 구분을 위함입니다.

 

_isRight의 불 변수를 이용해 오른쪽인지 아닌지 확인 후, 패딩 값에 맞게 음, 양을 설정해 주고

설정한 좌표만큼 DOtween을 이용해 부드럽게 이동하는 함수입니다.

 

유닛은 이것으로 끝입니다.

 

이제 매니저로 다시 넘어가 버튼 처리만 해주면 됩니다.

public void LeftBtnClick()
    {
        if (index > 0)
        {
            OnChangeEvent?.Invoke(--index, false);
            _rBtn.SetActive(true);
        }
        
        if(index==0)
            _lBtn.SetActive(false);
    }
    public void RightBtnClick()
    {
        if (index < 5)
        {
            OnChangeEvent?.Invoke(++index, true);
            _lBtn.SetActive(true);
        }
        
        if(index==5)
            _rBtn.SetActive(false);
    }

 

이런 식으로 인덱스 범위를 벋어난다면 실행되지 않게, 

아니라면 이벤트를 실행하며 그에 맞게 인덱스 값을 다시 재조정해주고

버튼도 끄고 켜주는 함수입니다.

 

이제 유니티로 넘어갑니다.

 

---

 

SO설정

 

 

프리팹 설정

 

 

버튼 및 매니저 설정

 

버튼까지 전부 구독을 하면 끝입니다.

 

완성 모습입니다.

 

---

마치며

Dotween으로 이동할 때 현재 포지션에 더하는 바람에이동이 끝나기 전 버튼을 누른다면 포지션이 밀리는 현상이 생깁니다.이동이 끝나기 전엔 막는 방법은 쉬울 거 같지만 그것은 원하지 않고,여러 번 연속으로 누르면 누른 만큼 이동하게 하고 싶습니다.그나마 한 가지 구조가 떠오르긴 했으나 맘에 들지 않아 좀 더 고민해봐야겠습니다.