[Unity 강의] 뱀서라이크 강의 - UI(2)

---

---

1. UI

✔ UI_SkillSelectPopup, UI_SkillCardItem 작업

2. UI 코드

🔹UI_SkillSelectPopup - 레벨 업 시 팝업
🔹UI_SkillCardItem - 팝업창에서 나열된 스킬 정보 (OnClick)

UI_SkillSelectPopup

✔ 스킬이 나열7될 영역(Grid)
✔ 스킬의 정보들 List<UI_SkillCardItem> _item
✅ PopulateGrid() - Grid에 이전 데이터 제거, 새로운 스킬 정보 나열

UIManager

public class UI_SkillSelectPopup : UI_Base
{
    [SerializeField]
    Transform _grid;

    List<UI_SkillCardItem> _item = new List<UI_SkillCardItem>();

    void Start()
    {
        PopulateGrid();
    }

    void PopulateGrid() 
    {
        foreach (Transform t in _grid.transform)
            Managers.Resource.Destroy(t.gameObject);

        for (int i = 0; i < 3; i++)
        {
            var go = Managers.Resource.Instantiate(PrefabsName.UI_SkillCardItem);
            UI_SkillCardItem item = go.GetOrAddComponent<UI_SkillCardItem>();

            item.transform.SetParent(_grid.transform);
            _item.Add(item);
        }
    }
}

전

후

UI_SkillCardItem

✔ 스킬 정보, Onclick으로 클릭 시 레벨 업, 팝업 닫기.

UI_GameScene

public class UI_SkillCardItem : UI_Base
{
    // 어떤 스킬?
    // 몇 레벨?
    // 데이트시트?
    int _templateID;
    Data.SkillData _skillData;

    public void SetInfo(int templateID) 
    {
        _templateID = templateID;
        Managers.Data.SkillDic.TryGetValue(templateID, out _skillData);
    }

    public void OnClickItem() 
    {
        // 스킬 레벨 업
        Debug.Log("OnClickItem");
        Managers.UI.ClosePopup();
    }
}

이것저것 메모

UI Group 배치

Vertical Layout Group : 수직 정렬(자식 UI 요소들을 자동으로 수직 정렬)
Horizontal Layout Group : 수평 정렬(자식 UI 요소들을 자동으로 수평 정렬)
Grid Layout Group : 격자 정렬(자식 UI 요소들을 행 & 열을 기준으로 정렬)
Content Size Fitter : 자동 크기 조정(자식 UI 요소의 크기에 맞게 부모 UI 크기를 자동 조정)

---

잡담, 일기?

버튼 작업 UI 작업 흐름 익히기

---