[Unity] 유니티 UI 텍스트 관련

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: https://docs.unity3d.com/kr/530/Manual/StyledText.html

서식 있는 텍스트(Rich Text)

GUI 요소의 텍스트 및 텍스트 메쉬는 여러 글꼴 스타일 및 크기를 포함할 수 있습니다. Rich text는 UI 시스템과 레거시 GUI 시스템 둘다 지원됩니다. Text, GUIStyle, GUIText 및 TextMesh 클래스는 Rich Text 설정이 있으며, Unity 텍스트 중 마크 업 태그를 찾도록 지시합니다. Debug.Log 함수에서도 이 마크 업 태그를 사용하여 코드에서의 오류 보고서를 업데이트 할 수 있습니다. 이 태그는 표시되지 않지만, 스타일 변화를 의미하여 텍스트에 반영됩니다.

마크업 포맷(Markup format)

마크업 시스템은 HTML에서 힌트를 얻었지만, 엄격하게 표준 HTML에 따르는 것은 의도하지 않습니다. 기본적인 아이디어는, 텍스트의 일부는 일치하는 태그의 페어에 의해 닫힌다는 것입니다 : -

   We are <b>not</b> amused

예에서 알 수 있듯이, 태그는 “괄호”기호, < 와 >에 포함된 텍스트입니다. 태그 안의 텍스트는 이름을 나타냅니다(이 경우는 단순히 b). 섹션 끝의 태그는 처음과 동일한 이름을 가지고 있지만, 슬래시(/) 기호를 더해 사용되는 것에 유의하십시오. 태그는 사용자에게 직접 표시되지 않지만 숨겨진 텍스트 스타일 지시로 해석됩니다. 위의 예에서 나타나는 b 태그는 굵은 글씨체를 “not”이라는 단어 적용하기 때문에, 텍스트는 화면에서 다음과 같이 나타납니다 : -

   We are not amused

텍스트 마크업 섹션(둘러싼 태그를 포함하여)은 요소 로 참조됩니다.

네스트 요소(Nested elements)

하나의 요소를 다른 요소에 “네스팅”하여, 하나보다 많은 요소를 텍스트에 적용할 수 있습니다.

   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설명ExampleNotes

b	텍스트를 굵게 렌더링.	We are <b>not</b> amused.
i	텍스트를 기울임 꼴로 렌더링.	We are <i>usually</i> not amused.
size	텍스트 크기를 파라미터 값에 기초하여 픽셀 단위로 설정합니다.	We are <size=50>largely</size> unaffected.	이 태그는 Debug.Log에서도 유효하지만, 크기를 너무 크게 하면 창 표시줄과 콘솔의 행간이 이상해질 것입니다.
색상 이름	파라미터 값에 따른 텍스트의 색상을 설정합니다. 색상은 전형적인 HTML형식으로 설명할 수 있습니다.    #rrggbbaa… 여기서 문자열은 16진수의 자리수에 대응하여 색상의 빨강, 녹색, 파랑 및 알파(투명)값을 나타냅니다. 예를 들어, 완전히 불투명한 cyan은 다음과 같이 지정합니다	<color=#00ffffff>…	다른 옵션은 색상 이름을 사용하는 것입니다. 이해하려면 이쪽이 간단하지만, 색상의 범위가 한정되어 있고, 항상 완전 불투명입니다.    <color=cyan>… 이용할 수 있는 색상 이름은 아래 테이블에 있습니다.

색상 이름16진수색상 견본

aqua (cyan과 동일)	#00ffffff
black	#000000ff
blue	#0000ffff
brown	#a52a2aff
cyan (apua와 동일)	#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

이것은 텍스트 메쉬에만 유용하고, 이미지를 텍스트와 함께 인라인으로 렌더링합니다. 이미지에 사용하는 메테리얼, 픽셀 단위로 이미지의 높이, 그리고 네 개 정도 이미지를 표시하는 사각형 영역을 나타내는 숫자를 인수로 사용합니다. 다른 태그와 달리 quad는 텍스트를 감싸지 않고, 종료 태그가 없습니다 - 슬래시는 첫 번째 태그의 끝에 두어, “셀프클로징”을 표시합니다.

   <quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5 />

이에 따라, 렌더러의 메테리얼 배열 위치의 메테리얼을 선택하고, 이미지의 높이를 20픽셀로 설정합니다. 이미지의 사각형 영역은 x, y, 폭 및 높이 값에서 시작되어, 확대 축소되지 않은 텍스처의 폭과 높이에 대한 비율로 지정됩니다.

Editor GUI

리치 텍스트는 에디터 GUI 시스템에서는 기본적으로 비활성화되어 있지만, 사용자 지정 GUIStyle를 사용하여 명시적으로 활성화할 수 있습니다. richText 프로퍼티를 true로 하여 관련 GUI 함수에 style을 전달합니다 :

GUIStyle style = new GUIStyle (); style.richText = true; GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);

자동 레이아웃

 

 

 

 

반응형

 

 

 

728x90

 

 

=================================

=================================

=================================

 

 

 

 

출처: https://m.blog.naver.com/PostView.nhn?blogId=verge1379&logNo=150164127765&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

 

한글 폰트를 Dynamic 으로 설정 할 수 있다는 것이 우선 유니티 v4.0에서 가장 편리해진 점이라고 생각됩니다.

 

일일이 크기를 지정해야 했던 3 버전 대를 생각하면 끔찍하네요.

 

그리고 여기에서 추가로, GUIStyle 에 "Rich Text" 라는 플래그가 추가되었습니다.

 

GUI의 Label 메소드를 통해 화면에 텍스트를 뿌려줄 때, 이 Rich Text 플래그를 true로 잡은 GUIStyle을 사용할 때

 

텍스트의 다음과 같은 marking 에 따라서 특정한 속성을 설정하여 뿌릴 수 있습니다.

 

1. <color="#ffffffff> 텍스트 </color>  

 - #뒤의 RGBA 색상코드에 따라 텍스트의 글자색을 변경합니다.

 

2. <b> 텍스트 </b>

 - 글자체에 bold 를 적용합니다. 대체로 영문폰트에 적합합니다.

 

3. <i> 텍스트 </i>

 - 글자체에 italic을 적용합니다. 이것도 영문폰트에 적합.

 

4. <size=24> 텍스트 </size>

 - 글자의 사이즈를 int형 숫자만큼으로 지정합니다.

 

...

 

 

 위와 같이, HTML이나 XML같은 Marked up language 와 같이 동작합니다. 

 

기존 v3.x 버전대에서는 글자색을 다르게 설정하려면 아예 다른 GUIStyle을 통해서 글자 길이 계산을 하여 그려줘야 했는데,

 

rich text 기능이 추가되면서 text 자체에서 marking을 통해서 글자색 설정을 할 수 있어, 

 

문단 내의 글자 색 일부만 다른 색으로 그리고 싶을 경우를 처리하기가 훨씬 편해졌습니다.

 

=================================

=================================

=================================

 

 

 

기타관련링크:

- https://undercode.tistory.com/22

 

 

=================================

=================================

=================================