고정 헤더 영역
상세 컨텐츠
본문
✅ 유니티에서 TMP를 사용하는 방법에 대한 가이드입니다.
가이드에서 담고있는 내용
- TMP 만드는 법
- TMP 필수 설정
- 다국어 폰트 지원
- 특정 폰트만 지원, 어떤 폰트를 지원하는지 확인
- Character Set (아스키코드, 유니코드)
- 문자 수정 (자간, 간격, 밑줄, 위치 등)
- 그라디언트 프리셋 (Color Gradient)
- 폰트 머테리얼 프리셋
- 텍스트로 이미지 제어하기 (Sprite Asset)
- 텍스트로 TMP 설정 제어하기
1️⃣ 폰트 파일을 준비합니다.
눈누 : https://noonnu.cc/
구글 폰트 : https://fonts.google.com/
다폰트 : https://www.dafont.com/
위의 사이트는 제가 자주 쓰는 사이트입니다. 사용 시 저작권 등 상업용 라이센스를 확인해야 합니다.
TTF 와 OTF의 차이는? 폰트 다운로드 전 확인해보세요
https://blog.naver.com/data_flow/221788740880
2️⃣ 유니티에 폰트를 넣어줍니다.
만약 다국어 로컬을 지원한다면, 각 국가에 맞는 폰트도 함께 준비해 줍니다.
3️⃣ TMP를 만들어줍니다.
폰트 우클릭 → Create → TextMeshPro → Font Asset
파란색의 F 라고 적혀있는 TMP가 만들어졌다면 성공
캔버스에 Text - TextMeshPro 로 되어있는 텍스트를 만들어주셔야 합니다
Font Asset 부분에 만들어준 TMP를 넣어줍니다. 폰트가 변화 했다면 성공입니다.
✅ 만약 TMP를 만들었을때 기본으로 전부 세팅이 되어있기를 원한다면
Project Settings 에서 해당 부분들에 만든 리소스들을 넣어주면 된다.
다만, Path의 기본 위치가 고정되어 있어 주의해주어야 한다.
( Assets → TextMesh Pro → Resources → 자유폴더 )
만약 텍스트, 폰트가 나오지 않거나 이상하게 나온다면 아래 4를 참고해주세요.
4️⃣ TMP 필수 설정하기
(1) Atlas Population Mode
TMP Asset에서 Generation Settings 부분을 보면
Atlas Population Mode가 있고 Static 과 Dynamic 중 고르게 되는데
상황에 맞게 적절히 설정 해 주시면 됩니다.
Static : 내가 문자를 Character Set에서 추가한 것만 적용
(Ex, 특정 문자만 나오게 하고 싶을 경우)
Dynamic : 폰트에 있는 문자를 자동으로 Atlas에 추가해 적용
(Ex, 중국어와 같이 모든 문자를 추가할 수 없을 경우)
Character Set에 대한 자세한 정보를 알고 싶다면 C를 참고해주세요
(2) Sampling Point Size + Padding
두 세팅의 경우 Font Asset Creator 에서도 제어할 수 있으며, 보기에 좀 더 편합니다.
Sampling Point Size 는 폰트 Atlas 사이즈에 어떤 사이즈로 들어가는지를 설정하는데
숫자가 클수록 더욱 선명하게 보이지만 아틀라스를 많이 차지하기 때문에
적절히 잘 보이면서 공간 낭비를 하지 않도록 설정해 주어야 합니다.
Padding 은 각 문자간의 간격을 뜻하는데 작으면 작을수록 간격이 좁아진다.
간격이 크면 각 문자가 서로 침범하지 않지만 아틀라스를 많이 차지할 수 있어
Point Size와 마찬가지로 적절히 설정 해주어야 합니다.
Auto Sizing → 추가한 문자가 아틀라스에 전부 들어가도록 자동으로 크기를 정해준다.
(아틀라스 크기가 작은데 들어갈 글자 수가 많은 경우 크기가 매우 작아질 수 있으니,
최대한 직접 설정하는 것이 좋다.)
(3) Atlas Width + Height + Multi Atlas Textures
다른 설정을 잘 해주었는데 문자가 나오지 않는 경우는 아틀라스 크기가 작아 입력해둔 문자들이
잘려서 나오지 않아 TMP가 인식하지 못하는 경우가 있습니다.
Generate Font Atlas(미리보기) 를 보고 꽉 찬 경우 아틀라스의 사이즈를 키워주면 됩니다.
중국어 폰트의 경우 너무 많은 한자가 들어가 있을 뿐만 아니라
일부 디바이스의 경우 4096 4096의 아틀라스를 인식 못한다는 이야기가 있어
2048 2048로 맞추어 주고 Multi Atlas Textures 를 체크해줍니다.
Multi Atlas Textures → 설정한 사이즈 보다 더 많은 문자가 생성되는 경우
같은 사이즈로 아틀라스를 만들어준다.
5️⃣ TMP 세부 설정하기
A. 다국어 폰트를 지원하게 하고 싶어요.
4개국어를 입력했지만 중간의 중국어가 나오지 않습니다.
이 경우는 폰트에 중국어가 존재하지 않는 경우입니다.
메인으로 사용할 폰트(= 지금 TMP에 적용되어 있는 폰트)의 TMP Asset 하단에 보면
Fallback Font Assets 부분이 있습니다.
이와 같이 다른 국가의 폰트를 넣어줍니다.
Fallback은 해당 폰트에 그 문자가 없을 경우 추가한 Font Assets에서 폰트를 사용한다는 의미입니다.
그리고 모든 폰트의 Sampling Point Size와 Padding 값을 같게 해주세요.
만약 추가를 했음에도 다른 언어의 폰트가 나오지 않는다면 B, C번을 참고해주세요
B. 폰트가 특정 문자만 지원하게 하고 싶어요, 어떤 문자를 지원하는지 알고 싶어요.
특정 폰트의 경우 다른 언어까지 포함되어 있는 경우가 있습니다.
해당 폰트의 TMP Asset 에 가서 하단의 Character Table 을 보면
어떤 문자를 지원하고 있는지 알 수 있습니다.
(만약 검색했을 때 문자가 없다면 Character Set에 추가해주어야 합니다)
원하는 문자만 해당 폰트가 적용되게 하고 싶다면 아래와 같이 설정해야 합니다.
바꾸고 싶은 폰트 TMP Asset에서 Update Atlas Texture
Character Set → Custom Characters
Custom Characters 는 리스트에 직접 문자를 추가할 수 있는 방식입니다.
리스트에 입력되어 있는 문자만이 TEXT를 입력했을 때 보이게 합니다.
지원하게 하고 싶은 문자만 입력하고 Generate Font Atlas → 잘 나오는지 확인 → Save
테스트, Test 문자만 해당 폰트로 나오고 나머지 문자는 해당 폰트로 나오지 않게 되었습니다.
마지막으로 TMP Asset 에서 Mode를 Static으로 바꿔 주세요.
C. Character Set 에 대해서 알고 싶어요. 아스키코드, 유니코드란?
주로 쓰는 Character Set의 경우는 3가지인데
Custom Range → 아스키코드 범위
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=min4150&logNo=220736760061 (Ex. 가 : 44032)
한글 아스키 코드표 참고하세요.
44032 가 44033 각 44034 갂 44035 갃 44036 간 44037 갅 44038 갆 44039 갇 44040 갈 44041 갉 44042 갊 4...
blog.naver.com
|
영어
|
한글/한글자모
|
특수문자
|
|
32-126
|
44032-55203/12593-12643
|
8200-9900
|
Unicode Range → 유니코드 범위
https://m.blog.naver.com/arkrix/220902368603 (EX. 가 : AC00)
각 언어별 유니코드 범위
> 유니코드 범위 보기 └ 접기
blog.naver.com
|
영어 대문자/소문자
|
한글
|
특수문자/숫자
|
|
0041-005A/0061-007A
|
1100-11FF,3130-318F,A960-A97F,
AC00-D7A3,D7B0-D7FF |
0020-002F,003A-0040,005B-0060,
007B-007E/0030-0039 |
Custom Characters → 문자 입력
가장 쉽고 직관적인 Set이지만 일일히 추가하는 것이 어렵다.
💾 상용문자 2350자/11172자 + 영문 및 특수문자 txt
필요한 언어를 설정하고 싶다면 위와 같이 추가하여 사용하면 된다.
만약 너무 용량이 크다면 쓰지 않는 글자들은 지워주는 것이 좋다.
지원하게 하고 싶은 문자만 입력하고 Generate Font Atlas → 잘 나오는지 확인 → Save
D. 문자를 수정하고 싶어요. (자간, 간격, 밑줄, 위치 등)
우선 모든 폰트의 Sampling Point Size와 Padding 값을 같게 해준다.
각 폰트별로 세부 조정하기 위해서는 모든 폰트의 TMP Asset을 Scale을 제외하고 0으로 만들어준다.
이후 메인 폰트(=Text에 설정된 TMP Asset)의 TMP Asset 입맛대로 만져준다.
(1) Character Set
Line Height으로 줄 간격을 잡아줍니다.
하단에 보면 버튼에 넣어둔 text가 중앙을 벗어난 모습을 보이는데 (모든 마진이 0임에도)
(2) Base Line
이것은 Base Line으로 수정하면 됩니다.
하지만 한글 폰트만 수정했기 때문에 일본어와 중국어는 그대로입니다.
마찬가지로 다른 국가 폰트도 비슷하게 중앙에 오도록 값을 수정해줍니다.
(3) UnderLine Offset + Thickness
밑줄의 위치와 굵기를 조절할 수 있습니다.
(4) 그 외
직접 만져보기
(5) 문자 하나만 수정하기
문자 하나의 위치 또는 높이를 수정하고 싶을 경우
Font Asset → Character Table → 원하는 문구 검색 → Edit Glyph
BX 는 좌우, BY는 높이다.
6️⃣ 그라디언트 프리셋 추가하기
컬러 그라디언트 추가
이름변경
그라디언트 종류 선택
색상추가
텍스트에 적용
7️⃣ 머테리얼 프리셋 추가하기
새로운 머테리얼을 만들고 싶은 폰트의 TMP Asset의 안에 있는 머테리얼을 ctrl+D 해서 복사
구분 되도록 이름 변경
(주의! 맨 앞의 단어가 같아야 인식 하는 것 같음)
text의 Material Preset 에서 설정
(보면서 수치를 맞추기 위해 미리 설정)
입맛에 맞게 조절 및 적용
8️⃣ 텍스트로 스프라이트 제어하기 (Sprite Asset)
pot 사이즈의 리소스에 필요한 리소스를 pot 크기로 배치한 이미지를 한 장 준비한다
해당 이미지를 우클릭 하여 Sprite Asset 을 만들어준다
제일 하단에 이미지가 뜨는 것을 확인한다.
Sprite Glyph Table 을 사용하여 각 이미지로 나눠주고
Atlas Index를 지정해준다.
Sprite Character Table 에서 분리한 이미지들의 이름을 정해주고
Glyph ID는 위에서 작업한 Glyph Table 에서 정해준 인덱스와 같은 번호로 정해준다.
다음 스프라이트 에셋을 적용할 text의 Extra settings 옵션에서 Sprite Asset에 방금 만든 것을 넣어준다.
<sprite=#번호#> 또는 <sprite name=”이름”> 을 적어주면 잘 나오게 된다.
만약 특정 스프라이트의 위치가 마음에 들지 않거나, 다른 스프라이트와의 간섭이 있을 경우
요 부분을 조절하여 해결하면 된다.
9️⃣ 텍스트로 TMP 설정 제어하기
Text 하나로 다양한 설정을 Rich Text를 통해 작업할 수 있다.
디스크립션 작업을 할 때 특히 더 편하게 응용이 가능하다.
<size=60%>크큭..</size><color=red>이녀석 </color><size=80%>말인가...</size><align=center>?</align><br><color=#ffff><mspace=2.4em>모두파괴한다</mspace>
🔎 그 간지나는 효과 뭐야? - 유니티 TMP(Text Mesh Pro) 사용 가이드
