UI에 대한 고찰
이전에 UI에 대해서는 이미 이전 포스팅에 적어뒀다 추가적으로 알아두어야할 것을 기술하면
피봇은 UI 요소의 왼쪽 하단을 (0, 0) 오른쪽 상단을 (1, 1)로 하여 피봇의 위치를 정할 수 있고
피봇은 UI 위치의 기준이 된다.
캔버스 내에서의 UI는 앵커까지의 거리가 고정이 된다는 사실을 잘 이용하면 좋다.
UI Scale Mode를 Scale With Screen Size로 하여 1920 x 1080으로 하면
FHD, QHD, 4K에 대응하여 UI 요소가 알맞게 위치를 잡고 있다
허나 위에 서 말했듯이 기본 적으론 앵커가 중앙에 있기 때문에 폰과 같은 해상도에선 UI위치가 달라질 수가 있어
각 UI마다 앵커를 다루게 두어 어떠한 해상도에서도 나름의 형태를 유지할 수 있도록 조치를 취할 수가 있다.
즉 피봇은 (0, 0) ~ (1 ,1) 사이서 UI 위치의 기준을 정하는 것이고
앵커는 기준점으로써 앵커를 기준점으로써 거리를 정하고 앵커로부터의 거리는 계속 유지되게 된다.
만일 입력을 할 수 있는 UI를 만들 때는 Input Field - TMP를 쓰면된다.
TMP를 쓰는 이유는 성능상의 이유로 생각하면 좋다.
Input Field의 Text Area에는 Placeholder와 Text가 있는데
Placeholder는 입력하기 전에 안내 문구 같은 것을 적을 수 있는 요소고 Text가 실제 입력시에 값이 들어가는 요소이다.
입력을 했으면 버튼을 눌러 입력값을 받을 수 있도록 해줘야한다.
일단 버튼을 UI - Button - TMP 를 만들어 주고 스크립트를 하나 만들어 클릭 시에 수행될 수 있는 함수(예) OnClickBtn)을 만든다.
함수를 만든 후엔 인스팩터 내의 On Click() 부분에 함수를 등록하여 클릭 시 함수를 수행할 수 있도록 해줄 수 있다.
만일 입력값의 길이를 2~10글자로 제한하고 싶다면 아래와 같이
if(inputField.text.Length < 2 || inputField.text.Length > 10) return;
OnClickBtn 함수에 넣어주면 그만이다.
그리고 만일 케릭터 위에 해당 입력한 데이터를 출력하고 싶다면
게임 매니저마냥 데이터 매니저를 싱글톤으로 생성하여 변수로 userName을 가지고 있게하여 접근할 수 있도록한다.
DataManager의 instance의 userName에 접근하면 입력한 값을 알 수 있게 된다.
Input Field에 입력값을 입력하고 버튼을 누른다면 OnClickBtn 함수가 수행될 것이고 그 함수는 아래와 같다.
위에서 언급한대로 입력된 값의 길이를 검사하여 조건에 맞지 않으면 리턴시키는 모습이고
조건에 맞는다면 싱글톤으로 선언한 instance의 userName에 inputField에 입력된 text 값을 넣어주는 모습이다.
또한 확인 버튼을 누르면 씬도 넘어가야하니 씬 매니저의 LoadScene을 통해 이동하는 모습이다. 1을 넣어준 이유는
씬 마다 가지고 있는 고유 번호를 넣어준 것이다.
이제 게임씬에서 이 싱글톤으로 만들어 넣어준 데이터를 활용해주면 되는 것이다. 이를 위해 PlayerName 클래스를 하나 만들었고
TMP_Text 변수를 선언하고 GetComponent로 TMP_Text 컴포넌트를 가져오고 여기에 싱글톤으로 넣어준 데이터를 가져오면 되는 것이다.
물론 해당 스크립트는 케릭터 내에 있는 TMP Text 오브젝트에 붙여줘야한다.
참고로 케릭터에 UI를 붙여줄 때는 월드 스페이스 상의 케릭터에 UI가 달려야하는 것이기에
render mode를 world space로 바꾸고 캔버스 위치와 크기를 잘 조절해줘야한다.
Rect Transform을 Reset하고 하는 것을 추천한다.
또한 만일 이미지를 버튼으로 만들고 싶다면
일단 UI - Button 을 만들고 자식으로 달려있는 Text 는 삭제 후에
Button의 Image 컴포넌트에 원하는 이미지를 넣어주면 이미지를 버튼처럼 이용할 수 있게 된다.