자동 레이아웃

UI 레퍼런스

리치 텍스트

UI 요소와 텍스트 메시의 텍스트에는 여러 폰트 스타일 및 크기가 사용될 수 있습니다. 리치 텍스트는 UI 시스템과 레거시 GUI 시스템에서 모두 지원됩니다. Text, GUIStyle, GUIText, TextMesh 클래스에는 Unity 에디터가 텍스트 안에서 마크업 태그를 찾도록 설정하는 Rich Text 설정이 있습니다. Debug.Log 함수도 이 마크업 태그를 사용하여 코드에서 오류 보고를 향상시킬 수 있습니다. 태그는 눈으로 볼 수 있게 표시되지는 않지만, 텍스트에 적용할 스타일 변경을 나타냅니다.

마크업 포맷

마크업 시스템은 HTML에서 힌트를 얻어 만들어졌으나 보통 HTML과 완벽하게 호환되게 하려는 의도로 만들어지지는 않았습니다. 기본 아이디어는 텍스트의 일부분을 서로 매치되는 태그 쌍 안에 넣어 원하는 시각 효과를 부여할 수 있다는 것입니다.

We are not amused

이 예에서 볼 수 있듯이, 태그는 “꺾쇠 괄호” 문자인 <와 > 안에 있는 텍스트 조각일 뿐입니다. 태그 안에 있는 텍스트가 태그의 이름(이 경우에는 b)을 나타냅니다. 태그 이름은 섹션의 시작과 끝에서 동일하지만, 끝에 있는 태그에는 슬래시(/) 문자가 추가됩니다. 태그는 사용자에게 직접 표시되지 않고 태그로 둘러싸인 텍스트의 시각 효과에 대한 명령으로 해석됩니다. 위 예에 사용된 b 태그는 “not”이라는 단어에 굵은 글씨를 적용하므로 텍스트가 화면에 다음과 같이 표시됩니다.

We are not amused

텍스트의 마크업된 부분(이 부분을 둘러싸는 태그 포함)을 요소라고 합니다.

중첩 요소

요소를 다른 요소의 내부에 “중첩”하여 하나 이상의 스타일을 텍스트에 적용할 수 있습니다.

We are definitely not amused

i 태그는 기울임꼴을 나타내므로 이 텍스트는 화면에 다음과 같이 표시됩니다.

We are definitely not amused

여기에서 주의할 점은 종료 태그의 순서는 시작 태그의 순서와 반대라는 점입니다. 그 이유는 바깥쪽 태그가 안쪽 태그를 감싸도록 배치되어야 텍스트를 원하는 스타일대로 표시할 수 있기 때문입니다.

We are absolutely definitely not 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.

*컬러 이름*	*16진수 값*	견본
aqua (cyan과 동일)	`#00ffffff`
검은색	`#000000ff`
blue	`#0000ffff`
brown	`#a52a2aff`
cyan (aqua와 동일)	`#00ffffff`
darkblue	`#0000a0ff`
fuchsia (magenta와 동일)	`#ff00ffff`
green	`#008000ff`
grey	`#808080ff`
lightblue	`#add8e6ff`
lime	`#00ff00ff`
magenta (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

이 태그는 텍스트 메시에만 유용하고 텍스트에 맞는 이미지를 렌더링합니다. 이미지에 사용할 머티리얼과 픽셀 단위의 이미지 높이를 지정하는 파라미터와 표시할 이미지의 사각형 영역을 나타내는 추가 파라미터 네 개를 사용합니다. 다른 태그와는 달리 이 태그는 텍스트 일부를 둘러싸지 않으므로 종료 태그가 없습니다. 슬래시 문자가 시작 태그의 끝에 추가되어 “자체 종료” 태그임을 나타냅니다.

렌더러의 머티리얼 배열에서 해당 포지션에 있는 머티리얼을 선택하고 이미지의 높이를 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);