Unity/UI

유니티 UI 캐릭터 정보 변경

홍삼맛 2023. 11. 27. 20:52

📌 메인 화면 캐릭터 정보 변경

  • 메인 씬에서 캐릭터 정보 변경
  • 캐릭터 이미지 교체와 이름 변경 가능

 

📌 구현 결과

 

메인 화면 UI 구성

  • 메인 화면 좌측에 Left Side를 구성하고 해당 버튼에 기능을 설명하는 Text를 배치함.
  • 버튼을 누르면 해당 패널을 SetActive로 설정하여 패널을 불러오도록 한다.

캐릭터 교체 창

  • 캐릭터 교체 창은 전에 작업했던 로비 씬에서 작업한 에셋을 그대로 가져와서 사용했다.
  • 똑같이 토글 방식으로 캐릭터를 누르고 버튼을 눌러서 교체가 가능하다.
  • 한가지 추가 기능으로는 선택 창이 활성화 되었을 시, GameState로 플레이어 조작을 제어하고, 교체랑 x버튼 이 외에는 다른 UI 버튼이 누르지 않도록 추가 했다.

이름 교체 창

  • 이름 교체 창도 똑같이 로비 씬에서 작업한 에셋을 그대로 가져와서 사용했다.
  • 화면 제어 부분도 위에 선택 창 처럼 똑같이 작동한다.

📄 UI_Scene_Main.cs

public class UI_Scene_Main : MonoBehaviour
{
    [Header("Current Time")]
    [SerializeField] private TextMeshProUGUI displayTime;

    [Header("Change - Character")]
    [SerializeField] private Button characterChangeEnterBtn;
    [SerializeField] private Button characterChangeExitBtn;
    [SerializeField] private Button characterChangeBtn;
    [SerializeField] private GameObject characterChangePanel;
    [SerializeField] private ToggleGroup toggleGroup;

    [Header("Change - Name")]
    [SerializeField] private Button nameChangeEnterBtn;
    [SerializeField] private Button nameChangeExitBtn;
    [SerializeField] private Button nameChangeBtn;
    [SerializeField] private GameObject nameChangePanel;
    [SerializeField] private TMP_InputField nameChangeInput;

    [Header("View Community")]
    [SerializeField] private Button communityShowBtn;
    [SerializeField] private Button communityHideBtn;
    [SerializeField] private GameObject communityPanel;
    [SerializeField] private Transform communityList;

    private void OnEnable()
    {
        InitCharacterChange();
        InitNameChange();
        InitViewCommunity();
    }

    private IEnumerator Start()
    {
        while (true)
        {
            displayTime.text = Util.GetCurrntTime();
            yield return new WaitForSeconds(1f);
        }
    }

    private void InitCharacterChange()
    {
        Manager.Resource.AddCharacterToggles(toggleGroup);

        characterChangeEnterBtn.onClick.AddListener(EnterCharacterChange);
        characterChangeExitBtn.onClick.AddListener(ExitCharacterChange);
        characterChangeBtn.onClick.AddListener(OnCharacterChange);
    }

    private void EnterCharacterChange()
    {
        Manager.Game.State = GameState.Pause;
        characterChangePanel.SetActive(true);
    }

    private void ExitCharacterChange()
    {
        Manager.Game.State = GameState.Play;
        characterChangePanel.SetActive(false);
    }

    private void OnCharacterChange()
    {
        Player.Instance.InitCharacter();
        ExitCharacterChange();
    }

    private void InitNameChange()
    {
        nameChangeEnterBtn.onClick.AddListener(EnterNameChange);
        nameChangeExitBtn.onClick.AddListener(ExitNameChange);
        nameChangeBtn.onClick.AddListener(OnNameChange);
        nameChangeInput.onEndEdit.AddListener(delegate { ChangedName(nameChangeInput); });
    }

    private void EnterNameChange()
    {
        Manager.Game.State = GameState.Pause;
        nameChangePanel.SetActive(true);
    }

    private void ExitNameChange()
    {
        Manager.Game.State = GameState.Play;
        nameChangePanel.SetActive(false);
    }

    private void OnNameChange()
    {
        Player.Instance.InitName();
        ExitNameChange();
    }

    public void ChangedName(TMP_InputField input)
    {
        if (input.text.Length < 2 || input.text.Length > 10)
        {
            Debug.Log("아이디를 2 ~ 10 글자이내로 작성하시오");
            input.text = string.Empty;
            return;
        }

        PlayerPrefs.SetString("user_id", input.text);
        PlayerPrefs.Save();
    }
}

 

 

💡 결과 화면

 

캐릭터 교체 확인
이름 교체 확인