[Unity] 로그인 UI

로그인 UI

로그인 화면을 구현하기 위해서 직접 UI를 그리는 것도 좋지만 이미 구현되어 있는 디자인을 유니티 에셋 스토어를 사용하는 것도 하나의 방법이다. 이번 포스팅에서 사용할 에셋은 스토어에 있는 Login Module을 사용할 예정이다.

1. UI 작업

[Unity] UI에서 UI를 만드는데 필요한 작업들을 자동화 했었는데 간략하게 설명하면 아래와 같은 기능을 만들었다.

1. Bind
   Component와 Canvas UI를 연동시키는 작업으로 Bind<T>(typeof(enums)) 형식으로 사용할 수 있다. enum 형식으로 Bind할 Component를 가지고 있는 GameObject의 이름을 동일하게 정의해놓아야 한다.

2. Get
   Bind된 Component에 접근할 수 있게 해주는 Getter함수로 Get<T>(enumNumber) 형식으로 사용할 수 있다.

3. Event
   클릭이나 드래그같은 사용자의 입력에 따른 발생시킬 이벤트를 등록시키는 함수로 C#의 Extension을 사용해 Component.gameObject.BindEvnet(function) 형식으로 사용할 수 있다.

2. Canvas

Login Module에서 사용할 Login화면은 아래와 같다. 기본적인 아이디봐 비밀번호를 입력할 수 있는 창과 입력한 정보를 바탕으로 회원가입(Register)할지 로그인(Login)할지 정하는 버튼이 있다.

Canvas의 GameObject 구조는 아래 사진과 같다. 각 Text, Label, Button의 이름을 서로 다르게해서 Bind함수에 영향이 없도록 한다.

3. TextField

Script에서 입력값의 text를 가져올 때는 Text Component가 아닌 TextField Component에 접근해야 한다. Text Component로 접근한다면 비밀번호를 가져올 때 실제 값이 아닌 **** 같은 화면에 보이는 값을 가져오게 된다.

---

Script Component

로그인 UI에 붙는 Script Component에는 초기 설정, 이벤트 설정을 하는 과정을 코드로 구현해야 한다.

1. GameObject Bind

    enum GameObjects
    {
        Account,
        Password
    }

    enum Buttons
    {
        CreateBtn,
        LoginBtn
    }

    Animator _animator;

    public override void Init()
    {
        base.Init();

        Bind<GameObject>(typeof(GameObjects));
        Bind<Button>(typeof(Buttons));

        GetButton((int)Buttons.CreateBtn).gameObject.BindEvent(OnClickCreateButton);
        GetButton((int)Buttons.LoginBtn).gameObject.BindEvent(OnClickLoginButton);

        _animator = Util.FindChild<Animator>(GetButton((int)Buttons.LoginBtn).gameObject, "LoginBtnLoading", true);
        _animator.gameObject.SetActive(false);
    }

하위 GameObject를 enum에 정의해주고 각 Type마다 Bind를 해준다. 여기서 Bind는 GameObject를 생성하는 것이 아니라 메모리상에 저장하기 위한 과정이다.

Bind과정 후에는 각 버튼마다 ClickEvent를 설정해주고 Login Button에 같이 달려있는 Animator Component를 가져오고 초기 비활성화 설정을 해준다.

2. Click Event

로그인 UI에서 Click Event는 웹서버의 응답에 따라 반응해야 한다. 이를 위해 [Unity] 웹 서버 요청에서 구현한 Web Manager에게 POST요청을 보내는 방식으로 Click Event를 구현한다.

Register 버튼의 ClickEvent는 입력한 데이터를 웹서버에 보내면 웹서버는 회원가입 여부를 응답으로 보낸다. 클라이언트는 회원가입 성공 여부에 대한 창을 띄우면 되지만 밑의 코드는 출력만 하도록 하였다.

    public void OnClickCreateButton(PointerEventData evt)
    {
        string account = Get<GameObject>((int)GameObjects.Account).GetComponent<InputField>().text;
        string password = Get<GameObject>((int)GameObjects.Password).GetComponent<InputField>().text;

        CreateAccountPacketReq packet = new CreateAccountPacketReq()
        {
            AccountName = account,
            Password = password
        };

        Managers.Web.SendPostRequest<CreateAccountPacketRes>("account/create", packet, (res) =>
        {
            Debug.Log(res.CreateOk);

            Get<GameObject>((int)GameObjects.Account).GetComponent<InputField>().text = "";
            Get<GameObject>((int)GameObjects.Password).GetComponent<InputField>().text = "";
        });
    }
    

로그인 버튼은 회원가입 버튼과 다르게 로그인에 성공했다면 게임서버에 연결을 요청하고 게임 Scene으로 화면을 전환해야한다.

서버로부터 응답이 올때까지 로그인 버튼의 로딩바 애니메이션의 상태를 True로 변경해 로그인 처리중이라는 것을 나타낸다.

    public void OnClickLoginButton(PointerEventData evt)
    {
        string account = Get<GameObject>((int)GameObjects.Account).GetComponent<InputField>().text;
        string password = Get<GameObject>((int)GameObjects.Password).GetComponent<InputField>().text;

        LoginAccountPacketReq packet = new LoginAccountPacketReq()
        {
            AccountName = account,
            Password = password
        };

        _animator.gameObject.SetActive(true);
        Managers.Web.SendPostRequest<LoginAccountPacketRes>("account/login", packet, (res) =>
        {
            Debug.Log(res.LoginOk);
            Get<GameObject>((int)GameObjects.Account).GetComponent<InputField>().text = "";
            Get<GameObject>((int)GameObjects.Password).GetComponent<InputField>().text = "";
            _animator.gameObject.SetActive(false);

            if (res.LoginOk)
            {
                Managers.Network.ConnectToGame();
                Managers.Scene.LoadScene(Define.Scene.Game);
            }
        });
    }