내일배움캠프 35일차 TIL "TextMeshPro에서의 색 변경"

 

TextMeshPro에서는 기본적으로 Vertex Color에서 색을 변경할 수 있다.

 

 

 

만약 그 텍스트를 조건에 따라 다른 색상의 텍스트를 표시해야 한다면 selectedItemName.colot = Color.black 같은 식으로 직접 값을 변경해주는 것도 가능하다.

 

그러나 만약 텍스트 내의 일부만 색이 달라야한다면 어떻게 해야할까? 만약 전혀 방법을 모른다면, 여러 텍스트 오브젝트들을 이용한 원시적인 방식으로 구현할지도 모른다.

그러나 TextMeshPro에서는 간단한 방식으로 구현할 수 있다. TextMeshPro의 Text 값은 HTML 태그로 색을 조정할 수 있다.

다음과 같은 식이다.

 

// 붉은 텍스트 표시
string itemNameStr = $"아이템 이름: <color=#FF0000>{itemName}</color>";
// 초록 텍스트 표시
string itemLevelStr = $"아이템 레벨: <color=#00FF00>{itemLevel}</color>";

itemNameText.text = itemNameStr;
itemLevelText.text = itemLevelStr;

 

위 코드로 하면 '아이템 xx' 같은 부분은 기존에 설정한 색으로 출력되고, itemName과 ItemLevel은 <color=#xxxxxx></color>로 설정한 색이 나온다.

대표적인 색상 코드는 다음과 같다.

 

빨간색: #FF0000
초록색: #00FF00
파란색: #0000FF
검은색: #000000
흰색: #FFFFFF
노란색: #FFFF00
청록색: #00FFFF
마젠타색: #FF00FF