유니티 (Unity) TextmeshProGui 뒤에 배경색 넣기

유니티 (Unity) 자동 줄바꿈 flowlayout extention
안드로이드 스튜디오 Firebase - Login(auth) / Push [푸쉬코드적용] (2019.06.03)
유니티 (Unity) UI 삼각형 그리기
유니티(Unity) Firebase Analytics 사용시 Null Error
유니티(Unity) Firebase 추가시 Firebase.Editor.dll not loaded error
유니티(Unity) 빌드시 Firebase 오류

텍스트 배경

텍스트를 강조하고 싶은 연출이 필요할 때 텍스트 뒤에 색을 넣는 방법을 사용합니다. 오늘은 텍스트 뒤에 색을 넣는 방법을 알아보겠습니다.

----

----

가장 간단한 방법

배경 이미지('Image')를 만들고 자식으로 텍스트 오브젝트('Text (TMP)')를 넣어 배치하면 간단하게 배경을 넣을 수 있습니다. 이런 경우는 텍스트 문구와 폰트 크기 등이 고정일 때 사용가능한 방법입니다. 이때 텍스트('Text (TMP)')의 Anchor Presets는 가로세로 모두 Stretch로 설정해 주면 이미지의 크기에 맞게 텍스트 영역이 변경되며 Font size를 Auto size로 설정하면 폰트의 크기도 자동으로 변경됩니다.

동적으로 텍스트가 변경될 때

UI를 작업할 때 일반적으로 텍스트가 고정되어 있는 경우가 많겠지만 간혹 서버에서 받은 텍스트를 표시할 때 배경을 넣어줘야 하는 상황이 발생할 수 있습니다. 이럴 때는 위의 상황에 몇 가지 Component를 추가해 주면 됩니다. 
우선 뒤의 배경이 되는 이미지에 Horizontal Layout Group과 Content Size fitter를 추가해 줍니다. Horizontal Layout Group 에는 모든 체크 사항을 제거합니다.

그리고 텍스트에도 Content Size fitter 를 추가해 주면 됩니다.

두 오브젝트에 공통으로 들어간 Content Size fitter 의 세팅에는 Horizontal Fit, Vertical Fit 모두 Preferred Size로 변경해 주면 됩니다.

여기서 주의할 점은 동적으로 텍스트를 변경해주다보면 영역이 제대로 표시되지 않을 경우가 발생합니다. 
이런 현상은 텍스트가 변경되었음에도 텍스트가 표시된 메쉬의 크기가 UI에 제대로 갱신되지 않았기 때문에 발생하는 현상인데요

이럴 때는 텍스트의 UI를 다시 갱신해줘야 하는 코드가 필요합니다. 다양한 방법들이 있겠지만 저는 간단하게 Update 함수 안에서 갱신해 주는 코드를 넣어줍니다.

LayoutRebuilder.ForceRebuildLayoutImmediate(textMeshRect);

해당 코드는 텍스트 UI의 영역을 갱신해주는 코드입니다. 
Update 함수 안에서 사용하는 것이 비효율적일 수 있기 때문에 적절한 타이밍을 찾아서 사용하시기 바랍니다.
그리고 텍스트를 감싸고 있는 부모의 영역도 함께 갱신해주어야 합니다.

그러면 이와같이 표현할 수 있습니다.

텍스트 라인별로 배경색 넣기

위에서 설명한 내용으로도 텍스트의 배경을 넣기 충분하지만 조금 더 디테일하게 배경색을 넣고 싶을 때가 있습니다. 예를 들면 위의 스샷에서와 같이 'Hellow', 'world'가 줄 바꿈을 하고 텍스트가 표시되지 않은 부분에는 배경색을 넣고 싶지 않을 때, 라인별로 색을 넣는 방법입니다. 위의 방법들을 응용해 본다면 쉽게 목표를 달성할 수 있습니다. 

두 번째 방법으로 만들어낸 오브젝트('Image')의 부모('Body')를 만들어 주고 그 안에 오브젝트들을 추가해 주면 됩니다. 

'Body' 오브젝트에는 Vertical Layout Group 컴포넌트와 Content Size fitter를 넣어줍니다.

동적으로 만들것이기 때문에 오브젝트는 Instantiate로 만들어서 추가해 주면 됩니다. 

Instantiate(Image, Body);

동적으로 'Hellow world', 'Hellow', 'world'를 각각 Instantiate로 만들어주는 것입니다.

UI 갱신해주는 코드를 잊지 말아 줍시다.

그리고 더 디테일한 정보로 배경을 넣고 싶을 때

TMP_TextInfo의 TMP_LineInfo [] 사용하기

텍스트 메쉬 프로는 말 그대로 메쉬를 이용해서 텍스트를 표시해 주기 때문에 메쉬의 정보를 가져올 수 있습니다. 그렇기 때문에 메쉬의 크기를 알면 텍스트가 표시된 넓이를 알 수 있습니다. 이를 이용하여 배경 이미지를 넣어주면 됩니다. 

text.textInfo.lineInfo

위와 같이 TMP_LineInfo[] 정보를 가져와서 표시된 텍스트의 라인 개수(배열의 길이가 라인의 수)와 

float lineWidth = lineInfo.lineExtents.max.x - lineInfo.lineExtents.min.x;

각 라인의 넓이를 알 수 있습니다.

이런 정보들을 토대로 배경이미지의 영역을 텍스트의 넓이에 따라서 그려주면 됩니다.

TMP_LineInfo을 이용하여 스크롤 영역에 배경색을 넣는 것은 다음 시간에 다루도록 하겠습니다.