리치 텍스트(Rich Text)
UI 요소 및 텍스트 메시에 들어가는 텍스트는 여러 개의 폰트 스타일 및 크기를 포함할 수 있습니다. 리치 텍스트는 UI 시스템 및 레거시 GUI 시스템 모두에서 지원됩니다. Text, GUIStyle, GUIText, TextMesh 클래스에는 Unity가 텍스트의 마크업 태그를 찾을 수 있도록 알려주는 Rich Text 설정이 있습니다. 또한 Debug.Log 함수 역시 이 마크업 태그를 코드에서 사용하여 오류 보고를 향상시킬 수 있습니다. 이 태그들이 디스플레이되는 것은 아니며, 텍스트에 스타일 변화를 적용시키도록 알려주는 역할을 합니다.
마크업 포맷
마크업 시스템은 HTML에서 힌트를 얻어 만들어졌으나 보통 HTML과 엄격히 호환되게 하려는 의도로 만들어지지는 않았습니다. 기본 아이디어는 텍스트의 일부분을 서로 매치되는 태그 쌍 안에 넣을 수 있다는 것입니다.
We are <b>not</b> amused
이 예에서 볼 수 있듯이, 태그는 “꺾쇠 괄호” 문자 <와 > 사이에 들어가 있는 텍스트일 뿐입니다. 태그 안에 있는 텍스트가 그 태그의 이름을 나타냅니다(이 경우에는 이름이 b입니다). 주의할 점은 해당 섹션의 끝에 오는 태그는 이 섹션의 시작 지점에 붙은 태그와 동일한 이름이되 슬래시/문자가 추가되어야 한다는 점입니다. 태그는 사용자에게 직접 보이지 않으며 태그로 둘러싸인 텍스트의 스타일링 지시문으로 해석됩니다. 위 예에서 사용한 b 태그는 “not”라는 단어를 굵게 만들며, 따라서 이 텍스트는 화면에서 다음과 같이 나타나게 됩니다.
We are not amused
텍스트에서 마크업된 부분(이 부분을 둘러싼 태그 포함)은 요소라 부릅니다.
중첩 요소
어떤 요소를 다른 요소의 내부에 “중첩”하여 하나 이상의 스타일을 이 텍스트 섹션에 적용할 수 있습니다.
We are <b><i>definitely not</i></b> amused
i 태그는 기울임꼴을 나타내며 따라서 이 텍스트는 화면에서 다음과 같이 나타납니다.
We are **definitely not** amused
여기서 주의할 점은 종료 태그의 순서가 시작 태그의 순서와는 반대라는 점입니다. 그 이유는 안쪽 태그들이 바깥쪽 태그가 감싸는 텍스트 전체를 다 포함해야 할 필요는 없다는 점을 생각해 보면 더 분명해집니다.
We are <b>absolutely <i>definitely</i> not</b> amused
결과는 다음과 같습니다.
We are absolutely definitely not amused
태그 파라미터
일부 태그는 단순히 텍스트에 어떤 효과를 주거나 주지 않는 역할을 하지만 태그 중에는 다른 변화를 줄 수 있는 것들도 있습니다. 예를 들어, color 태그에는 어떤 컬러를 적용할지 지정해야 합니다. 이러한 정보는 파라미터를 사용하여 태그에 추가합니다.-
We are <color=green>green</color> with envy
주의할 점은 종료 태그에는 파라미터 값이 포함되지 않는다는 점입니다. 옵션으로 파라미터 값은 따옴표로 묶을 수 있지만 반드시 묶어야 하는 것은 아닙니다.
지원 태그
다음 리스트는 Unity에서 지원하는 모든 태그를 나타냅니다.
| Tag | Description | Example | Notes |
|---|---|---|---|
| b | Renders the text in boldface. | We are <b>not</b> amused. | |
| i | Renders the text in italics. | We are <i>usually</i> not amused. | |
| size | Sets the size of the text according to the parameter value, given in pixels. | We are <size=50>largely</size> unaffected. | Although this tag is available for Debug.Log, you will find that the line spacing in the window bar and Console looks strange if the size is set too large. |
| color | Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format. #rrggbbaa …where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (transparency) values for the color. For example, cyan at full opacity would be specified by | <color=#00ffffff>… | Another option is to use the name of the color. This is easier to understand but naturally, the range of colors is limited and full opacity is always assumed. <color=cyan>… The available color names are given in the table below. |
|Color name |Hex value |Swatch |
|:—|:—|
|aqua (same as cyan)|#00ffffff|
|
|black|#000000ff|
|
|blue|#0000ffff|
|
|brown|#a52a2aff|
|
|cyan (same as aqua)|#00ffffff||
|darkblue|#0000a0ff|
|
|fuchsia (same as magenta)|#ff00ffff|
|
|green|#008000ff|
|
|grey|#808080ff|
|
|lightblue|#add8e6ff|
|
|lime|#00ff00ff|
|
|magenta (same as fuchsia)|#ff00ffff||
|maroon|#800000ff|
|
|navy|#000080ff|
|
|olive|#808000ff|
|
|orange|#ffa500ff|
|
|purple|#800080ff|
|
|red|#ff0000ff|
|
|silver|#c0c0c0ff|
|
|teal|#008080ff|
|
|white|#ffffffff|
|
|yellow|#ffff00ff|
|
material
이 태그는 텍스트 메시용으로만 유용하며 파라미터에서 지정한 머티리얼이 있는 텍스트 섹션을 렌더링합니다. 이 값은 텍스트 메시의 머티리얼 배열의 인덱스로, 인스펙터가 보여주는 값입니다.
We are <material=2>texturally</material> amused
quad
이 태그는 텍스트 메시 용으로만 유용하며 텍스트에 들어가 있는 이미지를 렌더링합니다. 파라미터로 이미지에 사용할 머티리얼 지정 값, 이미지 높이(픽셀 단위), 그리고 표시할 이미지의 사각형 영역을 나타내는 네 개의 값을 받습니다. 다른 태그와는 달리 사각형은 텍스트 일부를 둘러싸지 않으며 따라서 종료 태그가 없습니다. 슬래시 문자는 시작 태그의 끝에 놓이며 이를 통해 “자체 종료”를 나타냅니다.
<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5 />
이렇게 하면 렌더러의 머티리얼 배열에서 해당 포지션에 있는 머티리얼을 선택하고 이미지의 높이를 20픽셀로 설정합니다. 이미지의 사각 영역은 주어진 x, y에서 시작하여 폭, 높이 값 만큼의 크기를 가지며, 이 값은 텍스처의 스케일되지 않은 폭과 높이의 일부로서 주어집니다.
에디터 GUI
리치 텍스트는 에디터 GUI 시스템에서는 디폴트로 비활성화되어 있지만 커스텀 GUIStyle을 사용하여 명시적으로 활성화할 수 있습니다. richText 프로퍼티를 true로 설정해야 해당 GUI 함수에 스타일이 전달됩니다.
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);