[Unity] TMPro를 이용해 Text에서 Icon을 사용해보자

게임을 하다보면 툴팁 등에서 글 중간에 Icon이 사용된 모습을 심심찮게 볼 수 있다.

오늘 우리는 TMPro를 이용해 Text 중간중간에 Icon을 사용하는 방법을 알아볼 것이다.

크루세이더 킹즈3의 툴팁

TMPro가 무엇인지, 어떻게 쓰는지는 모두가 알 것이라고 생각한다.

최신 Unity에서 TMPro가 기본으로 사용되니 모른다면 알아두자.

 

먼저 우리는 Slice 된 아이콘이 필요하다.

아이콘 샘플과 Slice 방법은 내 블로그 이전 글에 있으니, Sample이 필요하거나 Slice 방법을 모른다면 아래 링크를 들어가라.

[Unity] 아틀라스(Atlas) 된 이미지를 Slice하는 방법

 

이제 Slice된 아이콘이 있다는 가정하에 진행하겠다.

먼저 사용할 아이콘 Sprite의 원본파일을 오른쪽 클릭하고 Create > TextMeshPro > Sprite Asset을 눌러주자.

그렇다면 아래와 같은 파일이 생성되었을 것이다.

생성된 Sprite Asset

이게 우리가 오늘 만들고자 했던 핵심인 아이콘 파일이다.

클릭해서 인스펙터창을 확인해보면 0~15번째까지 아이콘이 잘 들어간 것을 확인할 수 있다.

잘 들어간 Sample 아이콘들

이제 Text에 다음과 같이 적어주면 된다.

이때 <sprite=1>에 대소문자나 띄어쓰기가 있을 경우 적용이 안될수 있으니 주의하자.

자, 이제 Scene을 확인해보면...

Scene을 확인해보니

아이콘이 나오긴 했는데 엉뚱한 놈이 나왔다.

이는 TMPro의 기본 설정 때문이다. Projects창에서 TMP Settings를 검색하자.

인스펙터창을 확인하면, 기본 아이콘이 EmojiOne으로 되어있다.

해당 아이콘은 어차피 저작권으로 출시할 게임에 사용하지 못하니 쿨하게 우리가 만든 Sample로 변경해주자.

괘씸한 EmojiOne을 Sample로 변경하자.

변경해주고 나니 다음과 같이 잘 적용되어있다.

1로 바뀌었다!

삐딱하게 들어간 뽄새가 마음에 들지 않는다면

우리가 만든 Sprite Asset의 Global Offsets & Scale을 조절해주자.

 

예뻐졌다!

이렇게 예쁘고 바른 아이콘을 사용할 수 있다.

그럼 오늘은 이만 마친다.