비밀번호 입력시 asterisk표시

Unity에서 비밀번호 입력 시 실제 비밀번호 대신 '*'를 표시하도록 개발하였다.

1. UI 구성

1. Canvas 생성: Hierarchy에서 우클릭하고 UI > Canvas를 선택하여 캔버스를 생성한다.
2. Input Field(TMP) 추가: Hierarchy에서 Canvas를 우클릭하고 UI > TextMeshPro - Input Field를 선택하여 Input Field를 추가한다. 이를 통해 사용자로부터 비밀번호를 입력받는다.
3. Text(TMP) 추가: Hierarchy에서 Canvas를 우클릭하고 UI > TextMeshPro - Text를 선택하여 TextMeshPro 텍스트를 추가합니다. 이는 '*'를 표시하기 위해 사용된다.

2. 스크립트 작성

PasswordField라는 이름의 스크립트를 생성하고 아래 코드를 추가한다.

 

using TMPro;
using UnityEngine;

public class PasswordField : MonoBehaviour
{
    public TMP_InputField inputField; // 비밀번호를 입력받을 Input Field
    public TMP_Text asteriskText; // '*'를 표시할 TextMeshPro 텍스트

    private string password = ""; // 실제 비밀번호를 저장할 변수

    void Start()
    {
        inputField.onValueChanged.AddListener(OnPasswordValueChanged);
        inputField.contentType = TMP_InputField.ContentType.Password; // 입력 필드를 비밀번호 모드로 설정
    }

    void OnPasswordValueChanged(string input)
    {
        password = inputField.text; // 실제 비밀번호 저장
        asteriskText.text = new string('*', password.Length); // '*'로 대체하여 표시
    }
}

 

3. 스크립트 연결

1. 스크립트 추가: Hierarchy에서 Canvas를 선택하고 Add Component 버튼을 클릭하여 PasswordField 스크립트를 한다.
2. 참조 설정: PasswordField 스크립트의 InputField와 AsteriskText 변수에 각각 Input Field(TMP)와 TextMeshPro Text를 드래그하여 연결한다.

이 과정을 따라 개발해서 Unity에서 TextMeshPro를 사용하여 비밀번호 입력 시 '*'를 표시할 수 있었다.

 

비밀번호가 * 로 표시되는 모습