유니티 UI 캐릭터 선택 창

📌 캐릭터 선택 창

• 캐릭터 이미지를 선택하고 선택한 캐릭터가 인게임에 나오도록 구현

 

📌 구현 결과

public enum LobbyStep
{
    Start,
    Select,
    Input,
    Finish,
}

• 우선 캐릭터 생성 순서를 열거형 단계로 나눠서 표현한다.
  
  

캐릭터 선택 창

• 캐릭터 선택창 안에는 ScriptableObject로 저장된 CharacterBlueprint 수 만큼 가져와서 생성된다.

📄 CharacterBlueprint.cs

[CreateAssetMenu(fileName = "Character", menuName = "Blueprint/Character")]
public class CharacterBlueprint : ScriptableObject
{
    [SerializeField] private string cName;
    [SerializeField] private Sprite cSprite;
    [SerializeField] private AnimatorController cAnim;

    public string CName => cName;
    public Sprite CSprite => cSprite;
    public AnimatorController CAnim => cAnim;
}

• ScriptableObject로 캐릭터 설계도를 만들어서 데이터화 해서 저장한다.
• 저장된 ScriptableObject는 ResourceManager로 통해서 Resource 폴더 내에서 가져오도록 구현한다.

📄 ResourceManager.cs

public class ResourceManager
{
    private List<CharacterBlueprint> characterBlueprints = new();

    public void Initialize()
    {
        // Character 설계도
        CharacterBlueprint[] characters = Resources.LoadAll<CharacterBlueprint>("ScriptableObjects/Player");
        foreach (CharacterBlueprint character in characters) characterBlueprints.Add(character);
    }
    
    // 캐릭터 설계도 캡슐화
    public CharacterBlueprint[] GetCharacterBlueprints()
    {
        return characterBlueprints.ToArray();
    }
}

• ResourceManager로 Resource 폴더 내에 있는 캐릭터 설계도를 다 가져온다.
• 가져온 캐릭터 설계도 리스트를 배열화 해서 값을 보낼 수 있다.

📄 UI_Scene_Lobby.cs

public class UI_Scene_Lobby : MonoBehaviour
{
    [Header("Step")]
    [SerializeField] private LobbyStep step;
    [SerializeField] private GameObject stepSelect;
    [SerializeField] private GameObject stepInput;

    [Header("Select Field")]
    [SerializeField] private GameObject characterTogglePrefab;
    [SerializeField] private ToggleGroup toggleGroup;
    [SerializeField] private Button nextStepButton;
    private CharacterBlueprint[] characterBlueprints;

    [Header("Input Field")]
    [SerializeField] private Image selectCharacter;
    [SerializeField] private TMP_InputField idInput;
    [SerializeField] private Button playButton;

    private void Start()
    {
        // 초기 단계를 Select 부터 시작
        step = LobbyStep.Select;

        InitStepSelect();
        InitStepInput();
    }

    // Input Select 값 초기화
    private void InitStepSelect()
    {
        characterBlueprints = Manager.Resource.GetCharacterBlueprints();

        for (int i = 0; i < characterBlueprints.Length; i++)
        {
            var characterToggle = Instantiate(characterTogglePrefab, toggleGroup.transform);
            var uiToggle = characterToggle.GetComponent<UI_CharacterToggle>();
            uiToggle.Initialized(characterBlueprints[i], toggleGroup);
        }

        nextStepButton.onClick.AddListener(NextStep);
    }

    // 캐릭 선택 후, 다음 단계로 넘기기
    private void NextStep()
    {
        // 캐릭이 선택되지 않을 경우, 단계 넘어가기 불가능
        if (Manager.Game.PlayerBlueprint == null) return;

        step = LobbyStep.Input;
        selectCharacter.sprite = Manager.Game.PlayerBlueprint.CSprite;

        stepSelect.SetActive(false);
        stepInput.SetActive(true);
    }
	
    // Input Field 값 초기화
    private void InitStepInput()
    {
        idInput.onEndEdit.AddListener(delegate { CreateID(idInput); });
        playButton.onClick.AddListener(PlayToMain);

        stepInput.SetActive(false);
    }

    // 인풋 필드에 텍스트 입력시 아이디 생성
    public void CreateID(TMP_InputField input)
    {
        if (input.text.Length < 2 || input.text.Length > 10)
        {
            step = LobbyStep.Input;
            Debug.Log("아이디를 2 ~ 10 글자이내로 작성하시오");
            input.text = string.Empty;
            return;
        }

        step = LobbyStep.Finish;
        PlayerPrefs.SetString("user_id", input.text);
        PlayerPrefs.Save();
    }

    // 마무리 단계에 도달한 경우, 메인 씬으로 로드
    public void PlayToMain()
    {
        if (step != LobbyStep.Finish) return;

        SceneManager.LoadScene("Main");
    }
}

• Select -> Input -> Finish 단계 순으로 캐릭터 생성 기능 작동
• 리소스 매니저로 불러온 캐릭터 설계도 리스트를 하나씩 생성하고 초기화 작업

토글로 이용한 캐릭터 선택

• 불러온 캐릭터 선택 토글을 ToggleGroup에 모아서 관리한다.
• 선택된 캐릭터는 GameManager에 저장하도록 구현, 그리고 캐릭터 선택이 없을 경우, 다음 단계로 못 넘어간다.
  
  

• 선택된 캐릭터는 Input 단계에서 이미지로 저장되서 보여준다.
• 아이디를 입력안하거나 2~10글자 내외로 작성되지 않을 경우, 메인 씬으로 못 넘어간다.
• 정상적으로 단계를 넘겼으면, 저장된 캐릭터 정보가 메인 씬에 반영되어 나타난다.