UI 컴포넌트
텍스트를 실행해 보자
hierachy 에서 우클릭 -> UI -> Text - TextMeshpro 클릭
클릭하면 이러한 화면이 나온다.
상당히 큰걸 볼 수 있다.
ui도 똗같이 트랜스폼이 있다. Rect Transform은 우리가 알던 Transform이고, pos x, pos y, pos z, 각각 좌표고 회전인 Rotation도 있고, 크기인 Scale도 있다.
Screen Space - Overlay는 카메라 위에 덧그린다 라는 뜻이다. 구보다 항상 앞에 있다 라는 뜻이다.
다음은 텍스트박스를 카메라에 맞게 하는 방법이다.
Render Mode를 Screen Space - Camera로 바꾸고, 저 화살표에 있는 Render Camera에 메인 카메라를 끌어오면 딱 맞게 텍스트박스가 카메라에 들어가있는걸 볼 수 있다.
그래도 대부분 Overlay를 많이 쓴다. 플레이 화면으로 보면 텍스트가 잘 보일것이다.
Scale With Screen Size는 무슨뜻이냐면, 사이즈가 바뀌어도 글씨 크기는 안바뀐다는 뜻이다. 바로 밑에
Referance Resoulution x y 가 있는데 x축 y축 크기를 정하는 것이다.
Screen Match Mode에서 Expand를 설정하자. 동일하게 만든다는 뜻이다.
보면 이벤트 시스템이 생겼을 것이다. 이게 자동으로 생겼다고 해서 지워버리면 UI의 클릭 자체가 안먹힌다. 웬만해선 냅두자.
텍스트를 누르면 오른쪽에 이렇게 나오는데, Text Input에 자기가 적고싶은 글을 적으면 유니티에서 그대로 출력하게 된다. T를 눌러서 크기를 조절 할 수 있다.
파란색이나 흰색 점을 늘리고 줄이면 된다. 그리고 텍스트는 캔버스 밖에 존재할 수 없다. 꼭 캔버스 안에서 텍스트를 하자.
Font Style: 폰트 변경
Material Preset: 메테리얼 넣는 거인듯
Font Style: 폰트에 밑줄을 긋는다거나 기울인다거나 하는것들
Font Size: 글자 크기
Vertex Color, COlor Gradient, Override Tages: 잘 모르겠다
Spacing Options (em): 글자 간격 같은거 조정해주는거
Alignment: 한글에 있는 중앙정렬 왼쪽정렬 같은거다.
Wrapping: 텍스트 박스 안에 다 하는지, 밖까지 나가는지
Overflow: 안에 있는걸 직접 해보는게 낫다.
Horizontal Mapping, Vertical Mapping: 잘 모르겠다.
이미지
우클릭 -> UI -> Image 클릭 하면 이미지가 생성된다. 아무 이미지나 넣어서 확인해보자.
사진을 막 넣으면 안되고, .jpg .png 같은걸로 해야 사진이 들어간다. 자기가 넣고싶은 사진을 캡처를 해서 넣도록 하자.
나는 내 프사를 넣었다. 자기가 넣은 사진을 클릭하면 오른쪽에 이러한 화면이 나온다.
다음에 Sprite (2D and UI)를 클릭하면 밑에 Apply가 켜지는데 누르면 된다.
누르면 자기 사진 밑에 ▷이러한 표시가 뜨는데 잘 됐다는 뜻이다.
그럼 사진을 넣어보자.
자기가 넣은 사진을 저기다 Scene에 끌어다 넣으면 된다. 아마 Canvas와 위치가 다를텐데 text랑 좌표를 똗같이 맞춰두면 사진도 똗같이 간다.
버튼
우클릭 -> UI -> Button - TextMeshPro 클릭 그럼 버튼이 나온다. 전체적인건 비슷하다. 텍스트도 있고 버튼 상호작용도 가능하고, 색도 변경 가능하다.
트랜스폼은 이렇게 생겼다.
토글
우클릭 UI -> Toggle을 누르면 체크박스가 나온다.
다음은 스크립트다