가끔 웹툰에서 보면 대사들 중간중간 멋진 그라데이션 효과가 들어가 있는 Text들을 볼 수 있다.
이런 방식으로 유니티에서 특정 단어들에 그라데이션 효과를 주고 싶을 때, 따라 해 보자.
1. 그라데이션 프리셋을 만들어 주기 전 프리셋을 저장해 줄 폴더를 추가해 주자.
< 프리셋을 만들어 주기 전 그라데이션 프리셋은 TextMesh Pro가 찾을 수 있는 특정 폴더에 저장해야 한다. > - 기본적으로 "TextMeshPro/Resources/Color Gradient Presets" 경로를 사용. **** 그라데이션 프리셋은 반드시 "TextMesh Pro/Resources/Color Gradient Presets" 폴더에 저장해야 한다. 폴더 구조를 다르게 하면 태그가 제대로 작동하지 않을 수 있다.(태그가 일반 텍스트로 표시될 수 있음)
>> 그렇기에 저 경로에 맞게 "Color Gradient Presets" 폴더를 우선 만들어주자.
2. 그라데이션 프리셋 생성하기
< 그라데이션 프리셋 생성하기. > - 만들어 준 폴더 내에서 Unity 메뉴 >> Assets >> Create >> TextMeshPro >> Color Gradient 클릭.
3. 새로 생성된 Color Gradient에셋에 원하는 타입과 색상 설정
< 새로 생성된 Color Gradient 에셋의 이름을 정해주고, Color Mode와 Colors를 선택해 주면 된다. >
< Color Mode는 총 4가지. > - Single : 단일 색상 적용. 텍스트 오브젝트의 버텍스 색상과 곱해짐. - Horizontal Gradient : 두 가지 색상을 사용하여 좌우로 그라데이션 적용. 각 문자에 대해 왼쪽에서 오른쪽으로 색상 변화. - Vertical Gradient : 두 가지 색상을 사용하여 위아래로 그라데이션 적용. 각 문자에 대해 위에서 아래로 색상 변화. - Four Corners Gradient : 네 가지 색상을 사용하여 가장 다양한 그라데이션 효과를 만들어 냄. 각 색상이 문자의 네 모서리에서 시작하여 퍼져나감. 다양한 조합으로 여러 종류의 그라데이션 만들 수 있음. (대각선, 3색, 복합적인 그라데이션)
4. 리치 텍스트 태그 사용(Rich Text)
< 원하는 특정 단어에 그라데이션을 적용하기 위해 리치 텍스트 태그를 사용. > 1. TextMesh Pro 텍스트 컴포넌트에서 텍스트를 입력할 때, 아래 형식으로 태그 사용해 주면 됨. : <gradient="그라데이션 프리셋 이름">적용하고 싶은 단어</gradient>
ex) "하늘에서는"을 그라데이션 해주고 싶음. 프리셋이름은 "RedToBlue"로 만들어 둠. >> 아주 먼 옛날 <gradient="RedToBlue">하늘에서는</gradient> 물고기를 잡고 있었다.
이렇게 하면 텍스트 특정 부분에만 그라데이션을 적용할 수 있으며, 나머지 텍스트에는 영향을 주지 않는다.
그라데이션 프리셋을 사용하게 되면 여러 텍스트 객체에서 동일한 그라데이션을 쉽게 재사용 할 수 있다.
하지만여러 그라데이션을 연속해서 사용할 때는 각각의 태그를 올바르게 열고 닫아야 하고, 과도하게 사용하면 렌더링 성능에 영향을 줄 수 있기에, 필요한 부분에만 제한적으로 사용하는 것이 좋을 듯하다.
++
추가로 어디서는, Text에 색깔이 존재한다면 원하는 그라데이션 효과를 보기에 한 가지 작업을 더 해줘야 된다 했다.
위에서 말해준 것처럼 TextMesh Pro에서 그라데이션은 기존 텍스트 색상에 곱셈으로 적용되기 때문에 기존 텍스트 색상이 흰색이 아니라면 기본 색상과 혼합이 된다는 말인데,
테스트해 보니 아래처럼 결과가 나온다. 아마도 업데이트가 된 거 같다.
- Text1 기본 색깔 : 분홍색.
- Text2 기본 색깔 : 흰색.
이전에는 텍스트 기본 색상이 빨간색이고, 그라데이션이 흰색이서 검은색으로 설정된 경우, 결과값이 그라데이션의 흰색부분은 원래의 빨간색으로 보이고 검은색 부분은 검은색으로 나왔나보다. 그래서 순수하게 내가 원하는 그라데이션 색을 나타내게 하고 싶으면 "<color>"태그를 사용해서 흰색으로 만들어 주고 </color>태그를 달아 준 것 같다.
그라데이션 태그 적용 전에 텍스트 색상을 흰색으로 리셋하는 건데 바로 아래 예시처럼 말이다.(#FFFFFF == 흰색)
ex ) <color=#FFFFFF><gradient="MyGradient">그라데이션 텍스트</gradient></color>
