[UGUI]_2. TextMeshPro-Text

유니티 UI

목록 보기
2/9

해당 포스트는 고박사의 유니티 노트를 참고했습니다.

개요

화면에 텍스트를 표현할 수 있도록 제공하는
TextMeshPro-Text에 대해 배워보도록 하겠습니다.

유니티에서 제공하는 UGUI를 화면에 출력하려면
캔버스에 오브젝트의 자식으로 UI를 배치해야 합니다.

화면에 보여지는 역할을 담당하는 비주얼 컴포넌트는
텍스트를 출력하는 TextMeshPro-Text와
이미지를 출력하는 Image,RawImage가 있습니다.

텍스트를 스크립트에서 설정할때 타입은 TextMeshProUGUI입니다.

TextMeshPro-Text

TextMeshPro-Text는 화면에 텍스트를 표시하는 UI 컴포넌트로
Button,Dropdown,InputFiled와 같이 화면에 텍스트를 표시하는
모든 UI가 TextMeshPro-Text 컴포넌트가 포함된 게임 오브젝트를 가지고 있습니다.

현재 프로젝트에서 처음 생성할 때는 TextMeshPro-Text를 임포트 하라는 창이 나오면
Import TMP Essentials를 눌러서 임포트 해주어야 합니다.

Text Input 박스에 원하는 텍스트를 작성하고,
Main Settings를 통해 폰트, 텍스트 스타일, 폰트 크기등의 옵션을 제공합니다.

Extra Settings

Margins : 문자 영역 간격
Rich Text : 서식 있는 텍스트 사용 여부 (서식 있는 텍스트 = Html을 이용한 텍스트 꾸미기)
Raycast Target : 상호작용 여부
Sprite Asset : 특정 텍스트 명령을 입력하면 텍스트 대신 이미지 출력
Style Sheet Asset : 여러 스타일을 미리 지정해서 등록해두고 서식 있는 텍스트처럼
<style="Test">[텍스트 내용]</ style>과 같이 사용 가능

참고
텍스트의 경우 대부분 Raycasting을 통해 직접적으로 상호작용하지는 않습니다.
따라서 Raycast Target를 체크 해제하여 예상치 못한 오류를 발생시키지 않도록 합니다.

Rich Text

한국어 폰트 에셋 생성하기

폰트에 따라 한국어를 인식하지 못해서 깨져서 보입니다.
이때는 한국어를 지원하는 폰트에셋을 생성하고 등록해야합니다.

사용해야하는 폰트를 프로젝트 폴더로 불러옵니다.
프로젝트 폴더로 불러왔다면 폰트 에셋을 생성해야합니다.
유니티에서 Window - TextMeshPro - FontAssetCreator에 들어갑니다.

Source Font File에 프로젝트 폴더로 불러온 폰트를 드래그 드롭해줍니다.

다음과 같이 Atlas Resolution을 2048로 맞춰주고
Character Set을 Coustom Characters로 바꿔주면 Coustom Characters List가 나옵니다.
이곳에 특수문자와 한글 문자를 복사 붙여넣기 합니다.
한글 텍스트 다운로드 링크
이후 Generate Font Atlas 버튼을 눌러주고 문제가 없다면 Save 버튼으로 저장해줍니다.

저장된 폰트 에셋을 사용하고자 UI Text(TMP) 오브젝트의 TextMeshPro 컴포넌트에 넣어줍니다.

결과

TextMeshPro 쉐이더

TextMeshPro는 SDF 렌더링을 활용하도록 설계되었으며 이를 위해 여러 쉐이더를 제공합니다.
또한 SDF 렌더링을 사용하지 않는 경우를 대비해 비트맵 전용 쉐이더도 제공합니다.
(기본 옵션 : SDFAA)

(이 옵션은 폰트 에셋을 제작할 때 렌더 모드에서 선택할 수 있습니다.)

모든 쉐이더는 PC와 모바일 버전이 있습니다.
모바일 버전은 최적화가 되어 있는대신 사용할 수 있는 효과가 PC에 비해 제한됩니다.

PC는 TextMeshPro 메뉴에서 선택할 수 있고,(Shader > TextMeshPro)
모바일은 TextMeshPro 아래의 Mobile 메뉴에서 선택할 수 있습니다.(Shader > TextMeshPro > Monile)
(기본 옵션 : Shader > TextMeshPro > Distance Field)

텍스트 메시 프로에서 제공하는 Distance Field 쉐이더는 비트맵 폰트의 경우 스케일을 했을 때
흐려지거나 안티앨리어싱 문제가 발생할 수 있는데
이를 해결하고 거리 또는 해상도에 따라 폰트가 깨지지 않도록 제작된 쉐이더입니다.

또한 TextMeshPro의 쉐이더는 Face, Outline, Underlay, Lighting, Glow 등을
설정할 수 있는 속성을 제공하기 때문에 텍스트의 다양한 효과를 적용할 수 있습니다.

각각의 텍스트에 다른 쉐이더 입히기

우리가 만든 Font Asset에는 생성할때 만들어진 기본 Meterial이 있습니다.

그리고 TextMeshPro-Text 컴포넌트에 폰트에셋을 등록하면 기본 Meterial로 설정됩니다.
이 상태에서 기본 Meterial의 쉐이더 설정을 바꾼다면
이 폰트 에셋을 사용하고 있는 모든 텍스트의 설정이 바뀝니다.

따라서 각각의 쉐이더 설정을 달리 하고 싶다면 새로운 Meterial Preset을 만들어야 합니다.

Meterial Preset 생성하기

쉐이더를 바꾸고자 하는 글자의 TextMeshPro-Text 컴포넌트로 이동합니다.
그리고 TextMeshPro의 쉐이더를 이용해서 Meterial Preset을 만들어줍니다.
(오른쪽 위 점선 클릭 > Create Meterial Preset)

만들어진 Meterial Preset은 폰트 에셋에 포함되어있지 않습니다.

하지만 Create Meterial Preset을 통해 프리셋을 만든 순간
해당 텍스트에 프리셋이 적용되기 때문에 프리셋을 따로 설정해 주지않아도 됩니다.

그리고 설정된 Meterial Preset을
Face, Outline, Underlay, Lighting, Glow 등을 활용하여
원하는 형태로 다듬어 줍니다.

결과

텍스트 마다 쉐이더 설정을 다르게하면 같은 폰트지만 다른 느낌을 줄 수 있습니다.

0개의 댓글