2주차, 사용자 데이터를 보여주는 UI 만들기(InputField - TextMeshPro)

1. InputField - TextMeshProp 하나씩 뜯어보기.
2. UI 제작
3. 스크립트 작성

 

1. InputField - TextMeshProp 하나씩 뜯어보기.

InputField - TextMeshProp 를 생성후 열어 보면 Text Area 와 그 안에 Place holder 와 Text가 있습니다.

Place holder는 사용자가 어떤 텍스트를 입력해야 하는지 설명해주는 텍스트를 입력하는 곳이고

Text가 사용자가 텍스트를 입력 하는 곳 입니다.

 

Transition

• None: 이 옵션을 선택하면 Input Field가 상태 변화 없이 그대로 유지됩니다. 즉, 아무런 시각적 변화가 일어나지 않습니다.
• Color Tint: 이 옵션을 선택하면 Input Field의 색상이 변화합니다. 일반적으로 상태 변화에 따라 Input Field의 배경색이 변경됩니다. 예를 들어, 포커스가 되었을 때와 되지 않았을 때의 배경색을 다르게 표시할 수 있습니다.
• Sprite Swap: 이 옵션을 선택하면 Input Field의 이미지 스프라이트가 변화합니다. 상태에 따라 다른 이미지를 사용하여 Input Field의 모양을 변경할 수 있습니다. 예를 들어, 포커스가 되었을 때와 되지 않았을 때의 스프라이트를 다르게 설정할 수 있습니다.
• Animation: 이 옵션을 선택하면 Input Field에 애니메이션을 적용할 수 있습니다. 상태 변화에 따라 애니메이션 효과를 주어 Input Field를 부드럽게 전환할 수 있습니다. 이 옵션을 선택하면 애니메이션 컨트롤러를 연결하여 애니메이션을 정의할 수 있습니다.

1. Target Graphic: 주로 이미지를 사용하며, 해당 이미지는 Input Field의 배경 또는 텍스트를 나타내는 데 사용됩니다.
2. Normal Color: 사용자와의 상호작용이 없는 기본 상태에서의 색상입니다.
3. Highlighted Color: 커서가 올라가면 해당 색상으로 변화합니다.
4. Pressed Color: 사용자가 Input Field를 누르고 있는 동안 해당 색상으로 변화합니다.
5. Selected Color: 텍스트를 선택하거나 포커스가 있는 경우에 해당하는 색상입니다.
6. Disabled Color: 비활성화된 Input Field는 사용자와의 상호작용이 불가능하며, 해당 색상으로 표시됩니다.
7. Color Multiply: 이 속성은 Input Field의 색상에 대한 추가적인 조정을 위해 사용됩니다. 이 값을 조정하면 Normal, Highlighted, Pressed, Selected, Disabled 색상에 대한 효과를 더욱 세밀하게 제어할 수 있습니다.
8. Fade Duration: 이 속성은 상태 변화에 대한 전환 효과(fade effect)의 지속 시간을 지정합니다. 색상이 서서히 변화하거나 애니메이션 효과를 주기 위해 사용됩니다. 값은 시간(초)으로 지정됩니다.

 

콜백 함수

1. On Value Changed (string): 사용자가 텍스트를 입력하거나 수정할 때마다 실행되며, 매개변수로 현재의 텍스트 값(string)을 전달합니다. 이를 통해 텍스트 값의 변화에 반응하여 원하는 동작을 수행할 수 있습니다. 예를 들어, 입력한 텍스트를 실시간으로 검증하거나 특정 로직을 실행할 수 있습니다.
2. On End Edit (string):  사용자의 입력이 끝난 후 실행되며, 매개변수로 최종적인 텍스트 값(string)을 전달합니다. 이를 통해 입력 완료 시 특정 동작을 수행하거나 입력 값을 처리할 수 있습니다. 예를 들어, 엔터 키를 누르면 입력된 텍스트를 제출하거나 다음 동작으로 이동하는 등의 기능을 구현할 수 있습니다.
3. On Select (string): 사용자가 Input Field에 포커스를 주거나 클릭하여 선택할 때 실행됩니다. 매개변수로는 현재의 텍스트 값(string)이 전달됩니다. 이를 활용하여 Input Field 선택 시 특정 동작을 수행하거나 시각적인 변화를 줄 수 있습니다. 예를 들어, 선택된 Input Field의 배경색을 변경하거나 관련 UI 요소를 활성화하는 등의 기능을 구현할 수 있습니다.
4. On Deselect (string): 사용자가 다른 요소를 선택하거나 다른 곳을 클릭하여 Input Field의 선택을 해제할 때 실행됩니다. 매개변수로는 직전에 선택되었던 텍스트 값(string)이 전달됩니다. 이를 활용하여 Input Field 선택 해제 시 특정 동작을 수행하거나 시각적인 변화를 줄 수 있습니다. 예를 들어, 선택 해제 시 해당 Input Field의 상태를 초기화하거나 관련 UI 요소를 비활성화하는 등의 기능을 구현할 수 있습니다.

 

2. UI 제작

1. UI 를 모아놀 캔버스 생성

 

2. InputField UI 와 playerData 정보를 보여줄 UI 생성

inputField로 사용자의 player Name을 받아와 로컬저장소의 데이터를 가지고와 playerDataUI 에 보여줄 것 입니다.

inputField에 On End Edit() 콜백함수와 버튼을 사용해 플레이어 이름을 입력하고 엔터를 치거나, 아이디 확인 버튼을 누르면 데이터를 확인할 것 입니다.

 

 

playerDataUI에는 두가지 영역과 게임 시작 버튼을 만들어 줬습니다.

playerName에는 사용자의 이름이 들어가고,

PlayerDataArea에는 각 점수에 해당하는 라벨 과 난이도별 점수들이 있습니다.

점수를 확인한 후에는 게임 스타트를 눌러 게임을 시작할 것 입니다.

3. 스크립트 작성

모든 UI 는 최상위에 있는 PlayerDataUi 에서 관리 할 것 입니다.

데이터는 PlayerData 라는 클래스를 사용해 json 으로 변환 시킨후 저장해 두었습니다.

1. InputField 에서 받은 사용자의 이름을 사용해 로컬저장소에 데이터가 있는지 확인합니다. 데이터가  있다면 새로운 PlayerData 변수에 넣어 줍니다.  그 후에 InputFieldUI 영역이 맨 위로가고 아랫 부분에 PlayerDataUI가 나타나게 만듭니다.

2. PlayerDataUi에는 PlayerDataArea의 텍스트들을 관리해 줄 것입니다. 각 easy,normal,hardText에는 PlayerDataText라는 스크립트를 만들어 넣어 주었습니다. 

 

InputField에 플레이어 이름 입력 -> 로컬 저장소 확인 -> PlayerDataUi에 플레이어의 데이터를 전달 -> PlayerDataArea에 텍스트에 점수 기입

 

완성