TMP 효과 오작동과 Sampling Point Size 및 Padding의 관계

요약

TMP 폰트의 Underlay, Outline 등의 효과를 사용할 때 시각적 오류가 발생한다면, 폰트의 Padding을 Sampling Point Size의 10% 정도로 맞추자.

문제

유니티에서 현지화 관련 작업을 하면서 다른 언어를 지원하는 폰트를 추가하고 적용한 뒤 테스트를 하고 있는데 귀찮은 일이 생겼다.

텍스트는 문제없이 나오는데 뒷부분에 검은 상자가 생겼다.
TMP 텍스트에 Underlay를 통해서 아웃라인을 구현한 상태인데 이걸 비활성화하면 문제가 사라지는 걸로 봐서 이게 어떤 식으로든 관여하고 있다는 것까지는 알겠는데, 일단 정확한 원인을 알기 위해 더 조사해보기로 했다.

원인

문제의 근원은 TTF 폰트 파일을 Font Asset Creator를 이용해서 TMP 폰트로 변환하는 과정이었다.
여기서 Sampling Point Size와 Padding 그리고 SP/PD Ratio에 대해 간단히 짚고 가겠다.

Sampling Point Size는 각 글자가 아틀라스에서 어느 정도의 공간을 차지할지를 결정한다. 값이 크면 더 많은 공간을 사용하게 되고 더 또렷한 글자를 표현할 수 있게 된다.
Padding은 각 글자 사이의 빈 공간을 결정한다. 이 공간은 Outline 같은 효과가 렌더링될 때 사용하는 여유 영역이기도 하다.
SP/PD Ratio는 단순히 이 두 값의 비율이다. 이름만 보면 SP / PD처럼 보이지만, 실제로는 PD / SP로 계산된다.
이 값의 비율을 적절하게 유지해야 하는데 너무 커지면 Padding이 너무 많은 공간을 차지하고 있다는 것이고 글자가 사용할 수 있는 공간이 줄어들게 된다.
반대로 값이 작아지면 글자 간의 여유 공간이 적어지는데 이런 경우에는 다른 글자가 섞여서 표현될 수 있다.

필자의 경우에는 Underlay를 통해서 아웃라인 효과를 구현하던 것과 Padding이 너무 작은 것이 문제였다.
Underlay는 아틀라스의 UV를 오프셋만큼 이동시킨 위치의 값을 읽고 사용하는데, 패딩이 글자 크기에 비해 너무 작으면 다른 글자 부분의 데이터를 읽게 되고 오작동하는 것이다.

해결

Font Asset Creator에서 TMP 폰트를 만들 때 Sampling Point Size와 Padding의 비율을 적절하게 조절하자.
Sampling Point는 기본적으로 Auto Sizing 모드이지만 값을 설정할 수 있게 바꿀 수 있고, Padding은 값을 직접 수정할 수 있다.
일반적으로 10% 정도가 적절하다고 여겨지는 것 같고, 필자의 경우에도 그 정도로 조절하니 문제가 해결됐다.