유니티 인풋 필드(Input Field)

인풋필드란?

Input Field 는 키보드나 터치패드를 이용하여 문자열을 입력할 때 상호작용을 목적으로 쓰이는

유니티 오브젝트입니다. 주로 아이디나 패스워드를 입력하거나 채팅창등을 구현하기 위해 사용됩니다.

 

생성하는 방법

 

인풋필드를 생성하는 방법은 유니티의 Hierarchy 창에서 우클릭을 하여 생성할 수 있습니다.

인풋필드를 생성할 때 TextMeshPro 와 일반 인풋필드를 볼수 있는데

여기서 TextMeshPro는 포인트 크기가 변하거나 해상도가 변해도 글자가 깨지지 않는다는 특징이 있습니다. 

또한 최적화가 잘되어있어 TMP가 유료였던 시절에도 기존의 텍스트 오브젝트보다 사용자들이 많이 찾았다고 합니다.

 

그래서 저도 한번 InputField - TMP 를 활용하여 과제를 해보자 마음 먹고 글을 정리해보려합니다. TMP 와 관련된 내용은 나중에 해보기로 하고 일단 구성요소를 살펴봅니다.

 

 

처음으로 Input Field를 생성하였을 때의 모습입니다.  Canvas 안에 생성한 인풋필드가 담겨있고

인풋필드 안에 여러가지 요소가 담겨있습니다.

 

InputField 오브젝트

 

배경색과 텍스트 이미지를 넣을 수 있는 Image 컴포넌트와 TextMeshPro - InputField 컴포넌트가 있습니다.

TMP - Input Field 컴포넌트 주요기능을 먼저 살펴보겠습니다.

 

Text Viewport : 입력된 문자열이 표시되어야할 영역. 기본값으로 TextArea가 설정.

Text Component : 사용자가 입력한 문자열이 표시되는 텍스트 UI.  기본값으로  Text 오브젝트가 연결됨

Text : 사용자가 입력한 문자열의 내용. Text 컴포넌트에 동일한 내용이 입력됨

Font Asset : Input Field 에 적용이 가능한 폰트 에셋을 설정

Point Size : 폰트의 크기를 조절

Character Limit : 입력할 수 있는 문자의 개수의 제한.   (0을 넣으면 무제한)

Content Type : 설정에 따라 모바일 가상 키보드 종류와 입력할 수 있는 문자 종류 등을 제한할 수 있고 기본값은 Standard

Placeholder : 텍스트에 입력된 내용이 없을 때 출력되는 텍스트. 기본값으로 Placeholder 컴포넌트가 연결됨.

Caret Blink Rate : 1초동안 입력 필드에 표시되는 커서가 점멸하는 횟수. (Hide Mobile Input이 true일 때 작동)

Selection Color : Input Field 에 작성된 문자열을 드래그 했을 때 배경색.

Hide Mobile Input : true 로 설정되었을 때 모바일에서 제공하는 보조 인풋 필드가 표시되지 않음

 

Line Type : 행 타입을 설정하는 옵션

Single Line : 줄바꿈이 없고 엔터키를 누르면 입력을 마침

Multi Line Submit  : 가로 끝까지 문자열을 입력하면 줄바꿈이 되고 엔터키를 누르면 입력을 마침

Multi Line Newline : 가로 끝까지 문자열을 입력하면 줄바꿈이 되고 엔터키를 눌러도 줄바꿈이 됨.

 

On Value Changed (string) : Input Field 데이터에 변화가 있을 때 실행

On End Edit (string): 데이터를 입력하고 엔터를 눌렀을 때 실행 ( LineType이 Single Line 일때)

On Select (string) : 마이스 커서로 클릭하여 활성화 했을 때 실행

On Deselect (string) : 다른곳을 클릭하여 비활성화 되었을 때 실행

 

 

 

Text Area 오브젝트

 

텍스트 범위를 조절할 수 있습니다.

 

Text Area 에 담겨있는 구성요소로

Placeholder와 Text 오브젝트가 있는데 

이둘은 각각  입력받지 않은 상태에서 나오는 텍스트와 입력받은 텍스트를 나타내는 역할입니다.

 

 

일반 Input Field 를 사용할 땐 UnityEngine.UI.InputField

TMP Input Field 를 사용할 땐 TMPro.TMP_InputField 를 사용합니다. 

따라서 using_TMPro; 를 선언해주고 TMP_InputField 를 생성해주어야 합니다.