유니티 텍스트에 html처럼 bold, 부분 색깔 등등 효과 적용하기 등등

<본 글은 TextMeshPro 사용 기준입니다>

 

 

유니티에서 텍스트에 여러 효과를 주고 싶을때가 있습니다. 그리고 유니티의 텍스트는 생각보다 이것저것 적용하기 불편하긴 합니다만, 다행히 TextMeshPro에서는 Rich Text라는 기능을 지원합니다. 사용 방법은 인스펙터상에서 TextMeshPro 컴포넌트의 Text Input란에 알맞은 태그를 사용함으로써 적용이 가능한데요. 이를 사용해서 굵기(bold), color변경, 부분 폰트 변경, 그라데이션, italic, 하이라이트(mark), 밑줄&취소선, 글자 위치 변경 등등 많이많이 구현할 수 있는데요. 유용한것들 몇개만 적어보겠습니다. 아 그리고 TextMeshPro의 Rich Text설정이 켜져있어야 합니다!

Rich Text 체크 필수!

투명도(alpha값) 조절

<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 <alpha=#66>66 <alpha=#44>44 <alpha=#22>22 <alpha=#00>00

이렇게 입력하면 됩니다. 사용하는 태그는 <alpha>이며, 말그대로 투명도 조절이 가능합니다. 위 텍스트를 입력하면 아래와 같이 표시됩니다.

 

Bold & Italic

The <i>quick brown fox</i> jumps over the <b>lazy dog</b>.

i는 이탤릭 태그, b는 볼드 태그입니다. 아래는 적용예입니다

 

색상 변경

<color="red">Red <color=#005500>Dark Green <#0000FF>Blue <color=#FF000088>Semitransparent Red

 

 

그라데이션(Gradient)

<gradient="TEST">그라데이션

그라데이션은 일단 gradient object를 만들어줘야합니다. Assets > Create > TextMesh Pro > Color Gradient로 들가서 하나 만들어주고, 이름과 색상을 마음껏 정해줍니다. 저는 TEST로 했습니다.

그리고 이 gradient object를 사용할 수 있게 위치를 옮겨줘야 하는데요. Project Setting > TextMesh Pro > settings에 가시면 Color Gradient Presets라는 항목이 있는데, 그 폴더 안에 아까 만든 파일을 넣어주시면 됩니다.

참고로 맨 밑의 Korean Language Options의 Use Modern Line Breaking은 한글 입력시 단어 중간에 줄바꿈이 발생하지 않도록 하는 기능입니다. 예를 들면

아 이게 그 밑에 그 트레이. 그게 없으 니까 좋네

이렇게 표시되던걸

 

아 이게 그 밑에 그 트레이. 그게 없으니까 좋네

이렇게 표시되도록 설정해주는 기능입니다.

 

각설하고, 그라데이션 오브젝트의 위치를 잘 설정해주게 되면 아래처럼 적용됩니다.

 

 

Mark(하이라이트)

Text <mark=#ffff00aa>can be marked with</mark> an overlay.

하이라이트(형광펜) 기능입니다. 다른 태그처럼 간단히 적용 가능합니다.

여기서 특기할만한점은, 원래 mark는 텍스트의 아래에 들어갑니다. 근데 bold를 하면 텍스트가 다시 위로 올라옵니다. 하이라이트가 글자 밑에 오는걸 원한다면 활용할 수도 있을거같습니다.

 

Rotate(회전)

Rotate text <rotate="-10">counter-clockwise</rotate> or <rotate="10">clockwise</rotate>

글자가 돌아갑니다!

 

밑줄&취소선

The <s>quick brown</s> fox jumps over <u>the lazy dog</u>.

 

위첨자/아래첨자

We have 1m<sup>3</sup> of H<sub>2</sub>O.

제곱같은거 표현할때 좋습니다.

 

위아래 위치 조정

Up <voffset=1em>up <voffset=2em>UP</voffset> and <voffset=-0.5em>down</voffset> we go again.

한 textMesh 오브젝트 안에서 글자의 위치를 조정할 수 있습니다.

---

 

 

설명한 태그 이외에도 많이 있습니다. 이 페이지를 참고하시면 모든 기능들이 설명되어 있습니다 :)

Rich Text | TextMeshPro | 4.0.0-pre.2