Unity 로그인 창 만들기 - Tab으로 Input field 이동

디아블로2 레저렉션을 하고싶은 마음으로 만든 로그인창

유니티는 에디터 컨트롤 위주이다 보니 뭔가 블로그 포스팅하기가 까다롭네...

 

먼저 이렇게 UI들을 만들어 둔다. 

Mail과 Password는 Input field - TMP 이다.

Password를 입력하면 **** 이렇게 별표처럼 표시하게 하기 위해서 아래와 같이 세팅해준다.

TextMeshPro -  Input Field  > Input Field Settings > Content Type: Password

 

 

Scene Hierarchy

 

이렇게 만들어뒀지만 막상 로그인 해보려고 하면 불편하다. 웹사이트에서 로그인할때는 form들간에 Tab키나 Left Shift + Tab으로 위,아래 이동이 가능한데, 이 기능을 추가해보려고 한다.

 

Input field 하나를 선택하고 

TextMeshPro - Input Field > Navigation > Visualize를 클릭하면 노란색 화살표들이 나온다.

저 연결 순서대로 Navigate를 할 수 있다는 말인데, 제대로 설정되었으면 건드리지 않아도 된다.

 

TextMeshPro - Input Field > Navigation > Visualize

 

MainMenu에 ChangeInput.cs 이라는 Script를 생성한다. 

public 필드의 firstInput에는 Mail 게임 오브젝트를, submitButton에는 Login Button 게임 오브젝트를 각각 할당 해주면 된다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using UnityEngine;

public class ChangeInput : MonoBehaviour
{
    EventSystem system;
    public Selectable firstInput;
    public Button submitButton;

    
    void Start()
    {
        system = EventSystem.current;
        // 처음은 이메일 Input Field를 선택하도록 한다.
        firstInput.Select();
    }

    
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Tab) && Input.GetKey(KeyCode.LeftShift))
        {
            // Tab + LeftShift는 위의 Selectable 객체를 선택
            Selectable next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp();
            if (next != null)
            {
                next.Select();
            }
        }
        else if (Input.GetKeyDown(KeyCode.Tab))
        {
            // Tab은 아래의 Selectable 객체를 선택
            Selectable next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
            if (next != null)
            {
                next.Select();
            }
        }
        else if (Input.GetKeyDown(KeyCode.Return))
        {
            // 엔터키를 치면 로그인 (제출) 버튼을 클릭
            submitButton.onClick.Invoke();
            Debug.Log("Button pressed!");
        }
    }
}