Level Selection

🔒 플레이어의 스테이지 레벨에 따라서 레벨이 해금되는 Level Selection을 구현해보았다

1. 우선 레벨 판넬을 만들어준다
레벨 판넬 아래 자식 오브젝트로 Scroll View 오브젝트를 이용해 만들 것이다.

Scroll View : 화면 상에 오브젝트들을 스크롤로 표시하고 싶을 때 사용

Scroll View 오브젝트를 생성하면 하위에 오브젝트를 담는 영역인 Viewport와 수평 스크롤바, 수직 스크롤바 오브젝트가 있다.

2. Viewport를 제외하고 스크롤바들을 삭제해준다
   화면에 시각적으로 보이는 스크롤바를 삭제한 것이며 수평으로 스크롤할지 수직으로 스크롤할지는 Scroll View 오브젝트의 Scroll Rect 컴포넌트에서 방향을 설정한다.
   

3. Viewport의 Content가 스크롤링이 되는 영역이므로 Content의 자식으로 버튼 오브젝트를 추가해준다
   
   Content에 Grid Layout Group 컴포넌트를 추가하여, 자식 오브젝트의 사이즈, 패딩 등 레이아웃 요소를 정할 수 있다.
   레이아웃이 정해지면 자식으로 들어간 버튼 오브젝트를 프리팹으로 만들어준다.
   이 프리팹을 이용하여 stage의 수 만큼의 버튼을 생성할 것이다.

4. Level Selection에 추가할 스크립트를 작성한다

//프리팹으로 만든 Button UI 
[SerializeField] private GameObject btnTemplate;
//버튼이 생성 될 영역, Content 오브젝트
[SerializeField] Transform btnArea;
//프리팹을 이용해 생성되는 각 스테이지의 버튼 인스턴스
private GameObject btn;
//생성한 인스턴스를 저장할 리스트
public List<GameObject> stageButtons;

public void SetStageButtons()
{
		//게임 매니저를 통해 스테이지 리스트의 길이를 가져온다
        int len = GameManager.instance.fbManager.stageList.Count;        

		//스테이지 리스트만큼 for문을 돌리며 스테이지 버튼 인스턴스 생성 & 초기화
        for (int i = 0; i < len; i++)
        {
        	//스크롤 영역에 버튼 인스턴스 생성
            btn = Instantiate(btnTemplate, btnArea);
            
            //스테이지 단계는 1부터 시작해야 하므로 (i + 1)의 값으로 표기
            btn.transform.GetChild(1).GetComponent<Text>().text = (i+1).ToString();
            
            //처음에 활성화 되지 않은 상태로 초기화 하기 위해
            //자물쇠 이미지를 제외한 다른 자식 오브젝트들은 비화성화 처리를 해주었다
            btn.transform.GetChild(0).gameObject.SetActive(false);
            btn.transform.GetChild(1).gameObject.SetActive(false);

			//버튼 비활성화
            btn.GetComponent<Button>().interactable = false;

			//초기화 된 버튼 인스턴스를 리스트에 추가
            stageButtons.Add(btn);

        }

		//다시 스테이지 단계만큼 for문을 돌리며 클리어한 스테이지까지 버튼 해금 작업
        for(int i=0; i < len; i++)
        {
            if(i < GameManager.instance.fbManager.player.current_stage)
            {
                stageButtons[i].transform.GetChild(0).gameObject.SetActive(true);
                stageButtons[i].transform.GetChild(1).gameObject.SetActive(true);
                stageButtons[i].transform.GetChild(2).gameObject.SetActive(false);
                stageButtons[i].GetComponent<Button>().interactable = true;
                stageButtons[i].GetComponent<Button>().AddEventListener(i, OpenLevel);                
            }
        }


}

인스펙터 창에서 프리팹과 스크롤영역을 할당해준다.

스테이지만큼 버튼이 생성되고 클리어된 스테이지까지만 해금이 된 상태를 확인할 수 있다.