방치게임 개발하기 #12 - 탭 만들기2

 

 

 

 

저번에 했던 부분에서 조금 더 작업해서

 

일단 필요한 이미지들은 다 배치시켰다

 

 

 

 

 

 

 

헤드 탭에는 일단 Dimension 하나만 넣고

 

하위탭으로 Power와 Matter 두가지가 들어갈 예정

 

편의상 상위탭은 Page, 하위탭은 Tab으로 쓰기로했다

 

 

 

 

 

 

 

이렇게 페이지 아래에 탭을 두가지 넣어놓고

 

각 탭의 부속품들을 안에다가 다 집어넣었다

 

 

 

 

 

 

그리고 두 탭의 inspector에서 add component를 눌러서 canvas group을 추가해준다

 

이제 스크립트를 추가해줘야할 시간이다

 

 

 

 

 

    public Image Page1, Tab1, Tab2, Geer1, Inventory1;
    public CanvasGroup Power_tab, Matter_tab;
    public bool Dimension_page;
    
    public void Start(){
        Select_page1();
    }

 

 

 

새로 추가한 부분만 가져왔는데

 

몇가지 Image, CanvasGroup 변수를 추가해주고

 

스위치 용도로 쓸 변수도 만들었다

 

그리고 시작할때 Page1이 선택된 상태가 되도록 해주고

 

아래처럼 6개의 메소드를 추가해주었다

 

 

 

    public void Select_page1(){
        if (Dimension_page == false){
            Select_tab1();
        }
        Page1.color = new Color32(255,255,255,255);
    }
    public void Select_tab1(){
        Dimension_page = true;
        Toggle_canvas(Power_tab);
        Tab1.color = new Color32(255,255,255,255);
        Tab2.color = new Color32(30,30,30,30);
        Geer1.color = new Color32(255,255,255,200);
        Inventory1.color = new Color32(255,255,255,200);
    }
    public void Select_tab2(){
        Dimension_page = true;
        Toggle_canvas(Matter_tab);
        Tab1.color = new Color32(30,30,30,255);
        Tab2.color = new Color32(255,255,255,255);
        Geer1.color = new Color32(255,255,255,10);
        Inventory1.color = new Color32(255,255,255,10);
    }
    public void Toggle_canvas(CanvasGroup canvas){
        Canvas_off_all();
        canvas.alpha = 1;
        canvas.interactable = true;
        canvas.blocksRaycasts = true;
    }
    public void Canvas_off_all(){
        Canvas_off(Power_tab);
        Canvas_off(Matter_tab);
    }
    public void Canvas_off(CanvasGroup canvas){
        canvas.alpha = 0;
        canvas.interactable = false;
        canvas.blocksRaycasts = false;
    }

 

 

 

 

위에 3개는 Page1, Tab1, Tab2 버튼이 눌러졌을때의 동작

 

아래의 3개는 탭이 켜고 꺼질때 반복되는 부분들을 간소화하기 위한 메소드이다

 

지금은 2개뿐이라 별상관없지만

 

어떤 탭이 선택될때 하나하나 켜고끄는것 보다는

 

모든 캔버스를 일단 끄고 지정한것 하나만 키는것이 좋아보여서 그렇게 만들었다

 

 

 

 

 

 

 

이제 다시 유니티로 들어와 Idle manager에 새로 추가한 오브젝트들을 집어넣고

 

늘 하던대로 버튼과 메소드를 연결하면 완성

 

 

 

 

 

 

 

잘된당 ㅎ