Chapter 9-3. 건축 : 건축 UI 탭과 페이지 시스템

인프런에 있는 케이디님의 [유니티 3D] 실전! 생존게임 만들기 - Advanced 강의를 듣고 정리한 필기입니다. 😀
🌜 강의 들으러 가기 Click

건축 시스템

🚀 건축 UI 탭

슬롯은 단 4 개만 사용할 것이다. Fire 탭을 누르면 Fire 의 슬롯 갯수만큼의 슬롯들만 활성화되고, Fire 의 건축물 정보들로 할당된다. Building 탭을 누르면 Building 의 슬롯 갯수만큼의 슬롯들만 활성화되고, Building 과 관련된 건축물 정보들로 할당된다. 즉 슬롯 4 개를 매번 재활용 할 것이다. Fire 관련 건축물이 1 개라면, Fire 탭을 눌렀을 때 슬롯 1 개만 활성화 되며 이 슬롯 1 개가 Fire 관련 건축물 데이터로 할당되게 한다. 이 상태에서 다른 탭으로 바꾸면 슬롯들은 내용이 초기화되고 그 탭에 있는 건축물 갯수만큼만 슬롯을 활성화시키는 식으로 재활용하면 된다. 페이지가 넘어가도 마찬가지다. 페이지가 넘어가도 그 페이지에 있어야 하는 슬롯 갯수만큼만 활성화 하면 된다. 이렇게 슬롯 4 개로 초기화 하고 새롭게 할당하고 그런식으로 하면 된다.

📜CraftManual.cs

[System.Serializable]
public class Craft
{
    public string craftName; // 이름
    public Sprite craftImage; // 이미지
    public string craftDescription; // 설명
    public GameObject go_prefab; // 실제 설치 될 프리팹
    public GameObject go_PreviewPrefab; // 미리 보기 프리팹

    private int tabNumber = 0;
    private int page = 1;
    private int selectedSlotNumber;
    private Craft[] craft_SelectedTab;

    [SerializeField]
    private Craft[] craft_fire;  // 모닥불용 탭
    [SerializeField]
    private Craft[] craft_build;  // 건축용 탭

    // 필요한 UI Slot 요소
    [SerializeField]
    private GameObject[] go_Slots;
    [SerializeField]
    private Image[] image_Slot;s
    [SerializeField]
    private Text[] text_SlotName;
    [SerializeField]
    private Text[] text_SlotDescription;
}

• Craft 클래스
  • 속성 craftImage 이미지 추가
  • 속성 craftDescription 텍스트 설명 추가
• 탭
  • 불 용 건축물만 모인 탭 craft_fire
  • 건축용 건축물만 모인 탭 craft_build
  • 현재 활성화된 탭 craft_SelectedTab
    • 현재 불 용 탭 활성화 상태면 craft_fire 를 복사 받고, 현재 건축용 탭 활성화 상태면 craft_build 를 복사 받음.
• 탭 넘버 tabNumber
  • 가 0 이면 craft_fire 탭을 활성화
  • 가 1 이면 craft_build 탭을 활성화
• 페이지 넘버 page
  • 현재 페이지
  • 가장 첫 페이지를 1로 명명.
• 현재 클릭된 슬롯 selectedSlotNumber
  • 클릭된 슬롯은 프리뷰를 생성한다.
• 한 페이지내에 4 개의 슬롯이 있으므로 이 4 개 슬롯으로 활성화/비활성화 하고 그에 속한 이미지, 이름 텍스트, 설명 텍스트 UI 값들을 탭이나 페이지 바뀔 떄마다 새로운 내용으로 수정하는 식으로 사용할 것이다.
  • 따라서 4 개의 슬롯과 그에 속한 이미지, 이름 텍스트, 설명 텍스트 레퍼런스 필요

    void Start()
    {
        tabNumber = 0;
        page = 1;
        TabSlotSetting(craft_fire);
    }

    public void TabSetting(int _tabNumber)
    {
        tabNumber = _tabNumber;
        page = 1;

        switch(tabNumber)
        {
            case 0:
                TabSlotSetting(craft_fire);
                break;
            case 1:
                TabSlotSetting(craft_build);
                break;
        }
    }

    private void ClearSlot()
    {
        for (int i = 0; i < go_Slots.Length; i++)
        {
            image_Slot[i].sprite = null;
            text_SlotName[i].text = "";
            text_SlotDescription[i].text = "";
            go_Slots[i].SetActive(false);
        }
    }

    private void TabSlotSetting(Craft[] _craft_tab)
    {
        ClearSlot();

        craft_SelectedTab = _craft_tab;

        int startSlotNumber = (page - 1) * go_Slots.Length; // 4 의 배수

        for (int i = startSlotNumber; i < craft_SelectedTab.Length; i++)
        {
            if (i == page * go_Slots.Length) // 슬롯 4 개를 초과하지 않도록. 딱 현재 페이지에 있는 슬롯들만
                break;

            go_Slots[i - startSlotNumber].SetActive(true);

            image_Slot[i - startSlotNumber].sprite = craft_SelectedTab[i].craftImage;
            text_SlotName[i - startSlotNumber].text = craft_SelectedTab[i].craftName;
            text_SlotDescription[i - startSlotNumber].text = craft_SelectedTab[i].craftDescription;
        }
    }

    public void SlotClick(int _slotNumber)
    {
        selectedSlotNumber = _slotNumber + (page - 1) * go_Slots.Length; 
        go_Preview = Instantiate(craft_SelectedTab[selectedSlotNumber].go_PreviewPrefab, tf_Player.position + tf_Player.forward, Quaternion.identity);
        go_Prefab = craft_SelectedTab[selectedSlotNumber].go_prefab;
        isPreviewActivated = true;
        go_BaseUI.SetActive(false);
    }

• Start()
  • 건축 UI 가 처음 활성화 되면 0 번째 탭(🔥불탭)과 1 페이지를 활성화 하기 위해 tabNumber, page를 초기화 한다.
  • 🔥불탭 활성화
• TabSetting(int _tabNumber) 👉 탭 버튼들의 이벤트로 호출
  • 각각 2 개의 탭에서 TabSetting(0), TabSetting(1) 을 호출하게 하자
  • TabSetting(0) 이면 TabSlotSetting(craft_fire) 🔥불탭 활성화
  • TabSetting(1) 이면 TabSlotSetting(craft_build) 건축탭 활성화
• ClearSlot()
  • 탭이 바뀌면 4 개의 슬롯들이 전부 null 로 초기화 되야 한다.
  • 이제 다른 탭의 건축물들 내용이 들어가야 하므로
• TabSlotSetting(Craft[] _craft_tab) 👉 인수로 받은 해당 탭의 슬롯들 활성화
  • 4개의 슬롯 기존 탭에서 썼던 내용들 싹 초기화
  • craft_SelectedTab 현재 활성화 되있는 탭은 인수로 받은 탭
  • startSlotNumber 현재 페이지의 첫 번째 슬롯 넘버
    • 1 페이지면 0, 2 페이지면 4, 3 페이지면 8 .. 이렇게 4의 배수가 된다.
      • go_Slots.Length가 사실 4 로 고정이라..
  • ‘현재’ 페이지의 슬롯들( 4개 이하 ) craft_SelectedTab 현재 활성화 된 탭에 속한 건축물들로 초기화 하는 작업 해주기
• SlotClick(int _slotNumber) 👉 슬롯 버튼들의 이벤트로 호출되며 프리뷰를 생성한다.
  • 한 페이지의 슬롯 넘버는 4 개를 넘지 않기 때문에, 즉 실제 슬롯 오브젝트는 4 개가 최대이기 때문에 현재 2 페이지의 슬롯 넘버 2 라면, 실제로는 해당 탭의 6 번째 건축물 프리뷰를 생성해야 하는 것이다.
  • 따라서 selectedSlotNumber = _slotNumber + (page - 1) * go_Slots.Length; 요런 작업을 해주고 여기서 구한 selectedSlotNumber 인덱스로 프리뷰 생성

이미지와 설명 할당, 페이지 넘어가는걸 확인해보기 위해 건축 탭의 건축물 종류를 6 개로 추가시켜봄

사용할 4 개의 슬롯 오브젝트들과 UI 요소들 추가..

🚀 페이지 시스템

• 오른쪽 화살표 버튼을 누르면 다음 페이지로 이동하고 최대 페이지에서 또 넘기면 첫 번째 페이지로 넘어온다. 왼쪽 화살표 버튼은 이와 반대.
• 두 화살표 이미지 UI 를 추가하고 버튼 컴포넌트도 추가해준다.

📜CraftManual.cs

    public void RightPageSetting()
    {
        if (page < craft_SelectedTab.Length / go_Slots.Length + 1) // 1페이지부터 시작하니까 +1
            page++;
        else
            page = 1;

        TabSlotSetting(craft_SelectedTab);
    }

    public void LeftPageSetting()
    {
        if (page != 1)
            page--;
        else
            page = craft_SelectedTab.Length / go_Slots.Length + 1; // 1페이지부터 시작하니까 +1

        TabSlotSetting(craft_SelectedTab);
    }

• 오른쪽 화살표
  • 최대 페이지가 아닌 페이지에서 누르면 단순히 다음 페이지로.
  • 최대 페이지인 상태에서 누른거면 첫 페이지로!
• 왼쪽 화살표
  • 첫 페이지가 아닌 페이지에서 누르면 단순히 이전 페이지로.
  • 첫 페이지인 상태에서 누른거면 최대 페이지로!

• 오른쪽 화살표 UI 는 버튼 이벤트로 RightPageSetting() 호출
• 왼쪽 화살표 UI 는 버튼 이벤트로 LeftPageSetting() 호출

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Unity Lesson 3 카테고리 내 다른 글 보러가기