[멋쟁이사자처럼 부트캠프TIL회고] 68일차 : 패널창 만들기

오늘 배운 것

1. 패널창 만들기

 

 

 

1. 패널창 만들기

 중간중간 알아두면 좋은 것들

 

 

1. 

StartPanelController가 혼자 닫히면 안됨

'닫혔다'라는 정보가 있어야 한다. 

-> 만일 모바일 환경이라면 여러개의 창을 열어두는 것은 부담이 될 수 있음

    닫혔다라는 정보가 필요함.

 

 

2.

Panel의 위치를 조정해서 만드는 이유는 편집의 용이함 떄문

패널창을 활성/비활성 시키며 작업할 수도 있지만, Scene창에서 편집할 때 용이하게 하기 위해

private RectTransform _rectTransform;
private Vector2 _hideAnchorPosition;

private void Awake()
{
    _rectTransform = GetComponent<RectTransform>();
    _hideAnchorPosition = _rectTransform.anchoredPosition;
    IsShow = false;
}

다음과 같이 anchoredPosition을 저장해두고 사용하면 편함

(메인 위치는 Vector2.zero로 변환 후 보이지 않을 때 다시 _hideAnchorPosition으로 전환

 

3.

매개변수로 여러 블럭의 위치를 받고 싶을 때 

이런 식으로도 가능하고

 

이런 식으로 튜플도 가능

 

 

4. LayOutGroup 꼼수

일단 다 LayOutGroup이 있는 오브젝트의 자식으로 넣어두고, SetActive를 통해 자동 정렬이 되게 할 수 있다. 

(자식들을 활성/비활성 하며 자동 정렬 되는 것을 이용)

 

---

 

본격적인 패널창 만들기
우선 다른 패널창의 기본이 될 패널컨트롤러 클래스다 (부모)

[RequireComponent(typeof(RectTransform))]
public class PanelController : MonoBehaviour
{
    public bool IsShow { get; private set; }
    
    public delegate void OnHide();
    private OnHide _onHideDelegate;
    
    private RectTransform _rectTransform;
    private Vector2 _hideAnchorPosition;

    private void Awake()
    {
        _rectTransform = GetComponent<RectTransform>();
        _hideAnchorPosition = _rectTransform.anchoredPosition;
        IsShow = false;
    }

    /// <summary>
    /// Panel 표시 함수
    /// </summary>
    public void Show(OnHide onHideDelegate)
    {
        _onHideDelegate = onHideDelegate;
        _rectTransform.anchoredPosition = Vector2.zero;
        IsShow = true;
    }

    /// <summary>
    /// Panel 숨기기 함수
    /// </summary>
    public void Hide()
    {
        _rectTransform.anchoredPosition = _hideAnchorPosition;
        IsShow = false;
        _onHideDelegate?.Invoke();
    }
}

 

각 패널들은 시작할 때 원래 위치를 저장하고 상태는 꺼진 상태이다.

 

Show()

: 다른 곳에서 Show(Hide시 실행할 함수)를 실행하면 메인 위치로 옮기고 실행할 함수를 설정한다.

상태 정보는 참(켜져 있다)로 설정한다.

 

Hide()

: 숨김 위치로 변경, 상태 정보 거짓( 꺼져 있음), Show()에서 받아온 숨겼을때 동작할 함수 실행

 

다음은 여러개의 패널을 저장하고, 관리 감독할 PanelManager 클래스다.

우선 패널들을 SerializeField로 저장해두고 패널들의 종류를 열거형 타입으로 선언한다.

패널을 한 개만 열수 있게 할 것이므로 currentPanel을 저장할 변수도 만든다. 

public class PanelManager : MonoBehaviour
{
    [SerializeField] private PanelController confirmPanelController;
    [SerializeField] private PanelController settingsPanelController;

    public enum PanelType { ConfirmPanel, SettingsPanel }
    private  PanelController _currentPanelController;
    
    /// <summary>
    /// 표시할 패널 정보 전달하는 함수
    /// </summary>
    /// <param name="panelType">표시할 패널</param>
    public void ShowPanel(PanelType panelType)
    {
        switch (panelType)
        {
            case PanelType.ConfirmPanel:
                ShowPanelController(confirmPanelController);
                break;
            case PanelType.SettingsPanel:
                ShowPanelController(settingsPanelController);
                break;
        }
    }

    /// <summary>
    /// 패널을 표시하는 함수
    /// 기존 패널이 있으면 Hide하고 새로운 패널을 Show 함
    /// </summary>
    /// <param name="panelController">표시할 패널</param>
    private void ShowPanelController(PanelController panelController)
    {
        if (_currentPanelController != null)
        {
            _currentPanelController.Hide();
        }
        panelController.Show(() =>
        {
            _currentPanelController = null;
        });
        _currentPanelController = panelController;
    }
}

 

ShowPanel(PanelType panelType)

: 패널타입을 매개 변수로 받아 어떤 ShowPanelController를 실행시킬지 결정하는 함수

 

ShowPanelController(PanelController panelController)

: 패널 컨트롤러를 매개변수로 받아 현재 다른 패널이 열려 있으면 숨기고, 

각 패널들을 hide할 때 currentPanel을 null로 만드는 함수를 추가하고, 현재 패널 상태 정보를 

매개변수로 들어온 패널컨트롤러로 설정한다. 

 

구체적인 패널 하나를 예로 들어 알아보자면

public class SettingsPanelController : PanelController
{
    /// <summary>
    /// SFX On/Off시 호출되는 함수
    /// </summary>
    /// <param name="value">On/Off 값</param>
    public void OnSFXToggleValueChanged(bool value)
    {
        
    }
    
    /// <summary>
    /// BGM On/Off시 호출되는 함수
    /// </summary>
    /// <param name="value">On/Off 값</param>
    public void OnBGMToggleValueChanged(bool value)
    {
        
    }

    /// <summary>
    /// X 버튼 클릭시 호출되는 함수
    /// </summary>
    public void OnClickCloseButton()
    {
        Hide();
    }
}

 

위의 예시는 세팅 패널 컨트롤러이다. 패널 컨트롤러를 상속받아 Show()와 Hide()가 있으며

추가적으로 안에 들어가 있는 세팅값들을 설정할 수 있고

OnClickCloseButton을 통해 특정 버튼의 실행시 Hide()가 실행되게 할 수 있다. 

 

 

 

 

 

 

조금 더 복잡한 예시를 보자.

 

밑의 패널컨트롤러는 세팅창에 붙을 패널 컨트롤러로 확인(Confirm)을 누르면 설장이 저장되면서 패널이 꺼지고

X 버튼을 누르면 그냥 꺼진다.

public class ConfirmPanelController : PanelController
{
    [SerializeField] private TMP_Text messageText;

    public delegate void OnConfirmButtonClick();
    private OnConfirmButtonClick onConfirmButtonClick;

    public void Show(string message, OnConfirmButtonClick onConfirmButtonClick, OnHide onHide)
    {
        messageText.text = message;
        this.onConfirmButtonClick = onConfirmButtonClick;
        base.Show(onHide);
    }
    
    /// <summary>
    /// Confirm 버튼 클릭시 호출되는 함수
    /// </summary>
    public void OnClickConfirmButton()
    {
        onConfirmButtonClick?.Invoke();
        Hide();
    }

    /// <summary>
    /// X 버튼 클릭시 호출되는 함수
    /// </summary>
    public void OnClickCloseButton()
    {
        Hide();
    }
}

 

public void SHow(string message, OnConfirmButtonClick onConfirmButtonClick, OnHide, onHide)

: 부모 클래스인 Panel를 override해서 만든 함수이다. 추가로 매개변수를 받아서 실행할 것이다

변수로 받은 text를 띄우고, 확인 버튼을 눌렀을 때 실행될 함수도 저장한다.(예시 : 설정 저장 후 종료)

그리고 base.Show(onHide)를 통해 원래 기능도 구현한다.

 

OnClickConfirmButton()

: Confirm 버튼 클릭시 호출되는 함수이다.  

Show에서 받아온 onConfirmButtonClick을 실행하고 Hide()한다.

 

OnClickCloseButton()

: 그냥 Hide한다. 

 

 

 

 

오늘의 목표

1. 코테 스택, 큐 , 덱 중 7번까지 풀기

2. 멋사 강의 중 스택 큐 강의 듣기 (연습문제 + 설명 약 40분 소요)

3. 오늘은 진짜 유니티 에디터 관련 강의 듣기