Attention: Here be dragons
This is the latest
(unstable) version of this documentation, which may document features
not available in or compatible with released stable versions of Godot.
Checking the stable version of the documentation...
RichTextLabel의 BBC코드
소개
Label 노드는 기본 텍스트를 표시하는 데 적합하지만 제한 사항이 있습니다. 텍스트의 색상이나 정렬을 변경하려는 경우 전체 레이블에 대해서만 변경할 수 있습니다. 텍스트의 일부를 다른 색상으로 만들거나 텍스트의 일부를 중앙에 배치할 수 없습니다. 이러한 제한 사항을 해결하려면 :ref:`class_RichTextLabel`를 사용합니다.
:ref:`class_RichTextLabel`는 마크업 구문이나 내장 API를 사용하여 복잡한 텍스트 형식을 지정할 수 있습니다. 텍스트 일부에 대한 형식 지정 규칙을 지정하는 태그 시스템인 마크업 구문에 BBCode를 사용합니다. 포럼(`bulletin boards`라고도 함, 따라서 "BBCode"의 "BB")을 사용해 본 적이 있다면 익숙할 것입니다.
Label과 달리 RichTextLabel에는 자체 수직 스크롤 막대도 함께 제공됩니다. 이 스크롤바는 텍스트가 컨트롤 크기에 맞지 않으면 자동으로 표시됩니다. RichTextLabel 검사기에서 Scroll Active 속성을 선택 취소하여 스크롤 막대를 비활성화할 수 있습니다.
BBCode 태그는 다른 사용 사례에도 어느 정도 사용될 수 있습니다.
BBCode는 :ref:`클래스 참조의 XML 소스에 주석 형식을 지정합니다. <doc_class_reference_bbcode>`에 사용될 수 있습니다.
BBCode는 :ref:`GDScript 문서 주석 <doc_gdscript_documentation_comments_bbcode_and_class_reference>`에서 사용할 수 있습니다.
:ref:`출력 하단 패널에 서식 있는 텍스트를 인쇄 <doc_output_panel_printing_rich_text>`할 때 BBCode를 사용할 수 있습니다.
더 보기
이 문서 외에 여러가지 Godot 데모 프로젝트들도 살펴보면 좋습니다.
RigidBody2D 사용하기
By default, RichTextLabel functions like a normal Label. It has the text property, which you can edit to have uniformly formatted text. To be able to use BBCode for rich text formatting, you need to turn on the BBCode mode by setting bbcode_enabled. After that, you can edit the text property using available tags. Both properties are located at the top of the inspector after selecting a RichTextLabel node.
예를 들어, ``BBCode [color=green]test[/color]``는 "test"라는 단어를 녹색으로 렌더링합니다.
대부분의 BBCode는 여는 태그, 콘텐츠, 닫는 태그의 세 부분으로 구성됩니다. 여는 태그는 형식이 지정된 부분의 시작을 구분하며 일부 구성 옵션을 전달할 수도 있습니다. 위에 표시된 ``color``와 같은 일부 여는 태그도 작동하려면 값이 필요합니다. 다른 여는 태그는 여러 옵션을 허용할 수 있습니다(여는 태그 내에서 공백으로 구분됨). 닫는 태그는 형식이 지정된 부분의 끝을 구분합니다. 경우에 따라 닫는 태그와 내용을 모두 생략할 수 있습니다.
HTML의 BBCode와 달리 선행/후행 공백은 표시 시 RichTextLabel에 의해 제거되지 않습니다. 중복된 공백도 최종 출력에 있는 그대로 표시됩니다. 즉, RichTextLabel에 코드 블록을 표시할 때 미리 형식이 지정된 텍스트 태그를 사용할 필요가 없습니다.
[tag]content[/tag]
[tag=value]content[/tag]
[tag option1=value1 option2=value2]content[/tag]
[tag][/tag]
[tag]
참고
RichTextLabel은 얽힌 BBCode 태그를 지원하지 않습니다. 예를 들어 다음을 사용하는 대신:
[b]bold[i]bold italic[/b]italic[/i]
사용:
[b]bold[i]bold italic[/i][/b][i]italic[/i]
사용자 입력을 안전하게 처리하기
사용자가 자유롭게 텍스트를 입력할 수 있는 시나리오(예: 멀티플레이어 게임의 채팅)에서는 사용자가 RichTextLabel에서 구문 분석할 임의의 BBCode 태그를 사용할 수 없도록 해야 합니다. 이는 [url] 태그가 RichTextLabel에 의해 처리되는 경우 문제가 될 수 있는 형식의 부적절한 사용을 방지하기 위한 것입니다(플레이어가 피싱 사이트 또는 유사한 사이트에 대한 클릭 가능한 링크를 생성할 수 있기 때문).
RichTextLabel의 [lb] 및/또는 [rb] 태그를 사용하면 메시지에 있는 BBCode 태그의 여는 괄호 및/또는 닫는 괄호를 이스케이프된 태그로 바꿀 수 있습니다. 이렇게 하면 사용자가 태그로 구문 분석되는 BBCode를 사용할 수 없습니다. 대신 BBCode는 텍스트로 표시됩니다.
BBCode 삽입(두 번째 줄) 및 이스케이프된 사용자 입력(세 번째 줄)을 초래하는 이스케이프되지 않은 사용자 입력의 예
적 씬은 다음 노드들을 사용할 것입니다:
extends RichTextLabel
func _ready():
append_chat_line("Player 1", "Hello world!")
append_chat_line("Player 2", "Hello [color=red]BBCode injection[/color] (no escaping)!")
append_chat_line_escaped("Player 2", "Hello [color=red]BBCode injection[/color] (with escaping)!")
# Returns escaped BBCode that won't be parsed by RichTextLabel as tags.
func escape_bbcode(bbcode_text):
# We only need to replace opening brackets to prevent tags from being parsed.
return bbcode_text.replace("[", "[lb]")
# Appends the user's message as-is, without escaping. This is dangerous!
func append_chat_line(username, message):
append_text("%s: [color=green]%s[/color]\n" % [username, message])
# Appends the user's message with escaping.
# Remember to escape both the player name and message contents.
func append_chat_line_escaped(username, message):
append_text("%s: [color=green]%s[/color]\n" % [escape_bbcode(username), escape_bbcode(message)])
성능
대부분의 경우 텍스트 형식 지정이 어려운 작업이 아니기 때문에 BBCode를 있는 그대로 직접 사용할 수 있습니다. 그러나 특히 큰 RichTextLabel(예: 수천 줄에 걸친 콘솔 로그)의 경우 RichTextLabel의 텍스트가 업데이트될 때 게임 플레이 중에 끊김 현상이 발생할 수 있습니다.
이렇게 하고 싶어하는 몇 가지 이유가 있습니다:
text속성에 추가하는 대신append_text()함수를 사용하세요. 이 함수는 전체text속성에서 BBCode를 구문 분석하는 대신 추가된 텍스트에 대해서만 BBCode를 구문 분석합니다.BBCode를 사용하는 대신
push_[tag]()및pop()함수를 사용하여 RichTextLabel에 태그를 추가하세요.RichTextLabel에서 Threading > Threaded 속성을 활성화합니다. 이렇게 하면 처리 속도가 빨라지지는 않지만 메인 스레드가 차단되는 것을 방지하여 게임 플레이 중 끊김 현상을 방지할 수 있습니다. 스레딩에는 약간의 오버헤드가 있으므로 프로젝트에 실제로 필요한 경우에만 스레딩을 활성화하세요.
BBCode 대신 push_[tag]() 및 pop() 함수 사용
성능상의 이유로 BBCode를 사용하지 않으려면 RichTextLabel에서 제공하는 기능을 사용하여 텍스트에 BBCode를 쓰지 않고도 서식 지정 태그를 만들 수 있습니다.
모든 BBCode 태그(효과 포함)에는 push_[tag]() 기능이 있습니다(여기서 [tag]``는 태그 이름입니다). ``push_bold()``와 ``push_italics()``를 하나의 태그로 결합한 ``push_bold_italics()``와 같은 몇 가지 편의 기능도 사용할 수 있습니다. ``push_[tag]() 함수의 전체 목록은 :ref:`RichTextLabel 클래스 참조 <class_RichTextLabel>`을 참조하세요.
pop() 기능은 모든 태그를 종료하는 데 사용됩니다. BBCode는 스택 태그이므로 ``pop()``를 사용하면 가장 최근에 시작된 태그가 먼저 닫힙니다.
다음 스크립트는 ``BBCode [color=green]test [i]example[/i][/color]``를 사용하는 것과 동일한 시각적 출력을 생성합니다.
extends RichTextLabel
func _ready():
append_text("BBCode ") # Trailing space separates words from each other.
push_color(Color.GREEN)
append_text("test ") # Trailing space separates words from each other.
push_italics()
append_text("example")
pop() # Ends the tag opened by `push_italics()`.
pop() # Ends the tag opened by `push_color()`.
경고
서식 지정 기능을 사용할 때 text 속성을 직접 설정하지 마세요. text 속성에 추가하면 append_text(), push_[tag]() 및 pop() 함수를 사용하여 RichTextLabel에 대한 모든 수정 사항이 지워집니다.
참고자료
더 보기
*이 BBCode 태그 중 일부*는 @export 스크립트 변수에 대한 도구 설명과 클래스 참조의 XML 소스에서 사용할 수 있습니다. 자세한 내용은 :ref:`클래스 참조 BBCode <doc_class_reference_bbcode>`를 참조하세요.
태그 |
예제 |
|
|
|
|
유
``{text}``에 밑줄을 표시합니다.
|
|
들
``{text}``를 취소선으로 만듭니다.
|
|
|
|
문자
16진수 UTF-32 ``{codepoint}``를 사용하여 유니코드 문자를 추가합니다.
|
|
[p]{text}[/p][p {options}]{text}[/p] |
|
br
새 단락을 추가하지 않고 텍스트에 줄 바꿈을 추가합니다. 목록 내에서 사용하면 새 목록 항목이 생성되지 않지만 대신 현재 항목 내에 줄 바꿈이 추가됩니다.
|
|
시간
콘텐츠를 구분하기 위해 새로운 수평선을 추가합니다. 구성 옵션을 지원합니다. :ref:`doc_bbcode_in_richtextlabel_hr_options`를 참조하세요.
|
[Editor]연결(Connections)
|
|
|
|
|
|
|
|
|
들여쓰기
{text}``를 한 번 들여씁니다. 들여쓰기 너비는 ``[ul] 또는 ``[ol]``와 동일하지만 글머리 기호가 없습니다. |
|
[url]{link}[/url][url={link}]{text}[/url]연결(Connections)
|
|
[hint="{tooltip text displayed on hover}"]{text}[/hint] |
|
img
``{width}``가 제공되면 이미지는 가로 세로 비율을 유지하면서 해당 너비에 맞추려고 합니다.
{width} 및 ``{height}``가 모두 제공되면 이미지 크기가 해당 크기로 조정됩니다.Add
em to the end of {width} or {height} value to specify it as a ratio of the current font size. For example, height=1em will make the image as tall as the surrounding text.{valign} 구성이 제공되면 이미지가 주변 텍스트에 맞춰 정렬됩니다. :ref:`doc_bbcode_in_richtextlabel_image_and_table_alignment`를 참조하세요.구성 옵션을 지원합니다. :ref:`doc_bbcode_in_richtextlabel_image_options`를 참조하세요.
|
[img]{path}[/img][img={width}]{path}[/img][img={width}x{height}]{path}[/img][img={valign}]{path}[/img][img {options}]{path}[/img] |
[font={path}]{text}[/font][font {options}]{text}[/font] |
|
글꼴_크기
``{text}``에는 사용자 정의 글꼴 크기를 사용하십시오.
|
|
드롭캡
``{text}``에는 다른 글꼴 크기와 색상을 사용하고 태그 내용이 충분히 큰 경우 여러 줄에 걸쳐 표시되도록 합니다.
첫 글자 장식 <https://www.computerhope.com/jargon/d/dropcap.htm>`__은 일반적으로 하나의 대문자이지만 ``[dropcap]``는 여러 문자 포함을 지원합니다. ``margins` 값은 쉼표로 구분되며 양수, 0 또는 음수일 수 있습니다. 값은 공백으로 구분되어서는 안 됩니다. 그렇지 않으면 값이 올바르게 구문 분석되지 않습니다. 음수 상단 및 하단 여백은 단락의 나머지 부분이 첫 글자 장식 아래에 표시되도록 하는 데 특히 유용합니다.
|
|
[opentype_features={list}]{project}[/opentype_features] |
|
|
|
색상
{text}``의 색상을 변경합니다. 색상은 일반 이름(:ref:`doc_bbcode_in_richtextlabel_named_colors` 참조) 또는 HEX 형식(예: ``#ff00ff, 16진수 색상 코드 참조)을 사용하여 제공되어야 합니다. |
|
색깔
{text} 뒤에 색상을 그립니다. 텍스트를 강조 표시하는 데 사용할 수 있습니다. color 태그와 동일한 값을 허용합니다. 기본적으로 RichTextLabel 노드의 text_highlight_h_padding 및 text_highlight_v_padding 테마 항목에 의해 제어되는 약간의 패딩이 있습니다. 인접한 줄/열에 배경색이 있을 때 잠재적인 중복 문제를 방지하려면 패딩을 ``0``로 설정하세요. |
|
색깔
{text} 앞에 색상을 그립니다. 불투명한 전경색을 사용하여 텍스트를 "수정"하는 데 사용할 수 있습니다. color 태그와 동일한 값을 허용합니다. 기본적으로 RichTextLabel 노드의 text_highlight_h_padding 및 text_highlight_v_padding 테마 항목에 의해 제어되는 약간의 패딩이 있습니다. 인접한 줄/열에 전경색이 있을 때 잠재적인 중복 문제를 방지하려면 패딩을 ``0``로 설정하세요. |
|
개요_크기
``{text}``에는 사용자 정의 글꼴 윤곽선 크기를 사용합니다.
|
[outline_size={size}]{project}[/outline_size] |
색깔
{text}``에는 사용자 정의 윤곽선 색상을 사용합니다. ``color 태그와 동일한 값을 허용합니다. |
[outline_color={code/name}]{project}[/outline_color] |
[table={number}]{cells}[/table][table={number},{valign}]{cells}[/table][table={number},{valign},{alignment_row}]{cells}[/table][table={number},{valign},{alignment_row} name={name}]{cells}[/table] |
|
[cell]{text}[/cell][cell={ratio}]{text}[/cell][cell {options}]{text}[/cell] |
|
[ul]{items}[/ul][ul bullet={bullet}]{items}[/ul] |
|
|
|
lb, rb
[ 및 ``]``를 각각 추가합니다. BBCode 마크업 이스케이프를 허용합니다.이는 자체 닫는 태그이므로 닫을 필요가 없습니다(
[/lb] 또는 [/rb] 닫는 태그가 없음). |
|
자체 닫는 태그를 사용하여 여러 유니코드 제어 문자를 추가할 수 있습니다.
이렇게 하면 붙여넣는 것보다 유지 관리가 더 쉬워집니다.
텍스트에서 문자를 직접 제어합니다.
|
``[shy]``(소프트 하이픈)
|
참고
굵게([b]) 및 기울임꼴([i]) 서식 지정을 위한 태그는 RichTextLabelNode의 테마 재정의에 적절한 사용자 정의 글꼴이 설정된 경우 가장 잘 작동합니다. 사용자 정의 볼드체 또는 이탤릭체 글꼴이 정의되지 않은 경우 `faux 볼드체 및 이탤릭체 글꼴 <https://fonts.google.com/knowledge/glossary/faux_fake_pseudo_synthesized>`__이 Godot에 의해 생성됩니다. 이러한 글꼴은 손으로 만든 굵은/기울임꼴 글꼴 변형에 비해 보기에 좋지 않습니다.
고정 폭([code]) 태그는 만 RichTextLabel 노드 테마 재정의에 사용자 정의 글꼴이 설정된 경우에만 작동합니다. 그렇지 않으면 고정 폭 텍스트에 일반 글꼴이 사용됩니다.
텍스트의 수직 중앙 배치를 제어하는 BBCode 태그는 아직 없습니다.
모든 태그에 대해 옵션을 건너뛸 수 있습니다.
단락 옵션
정렬
값
left``(또는 ``l),center``(또는 ``c),right``(또는 ``r),fill``(또는 ``f)Default
length()텍스트 가로 정렬.
bidi_override, st
값
default``(``d중),uri``(또는 ``u),file``(또는 ``f),email``(또는 ``e),list``(또는 ``l),none``(또는 ``n),custom``(또는 ``c)Default
default구조화된 텍스트 재정의.
justification_flags, jst
값
다음 값의 쉼표로 구분된 목록(각 쉼표 뒤에 공백 없음):
kashida``(또는 ``k),word``(또는 ``w),trim``(또는 ``tr),after_last_tab``(또는 ``lt),skip_last``(또는 ``sl),skip_last_with_chars``(또는 ``sv),do_not_skip_single``(또는 ``ns).Default
word,kashida,skip_last,do_not_skip_single양쪽 맞춤(채우기 정렬) 옵션입니다. 자세한 내용은 :ref:`class_TextServer`를 참조하세요.
방향, 방향
값
-h,--help,/?Default
상속
주어진 방향으로 이동.
언어, 언어
값
이미지: doc_import_images 를 참고하세요.
Default
상속
로캘 재정의. 일부 글꼴 파일에는 스크립트 관련 대체 항목이 포함될 수 있으며, 이 경우 해당 대체 항목이 사용됩니다.
스타일
값
부동 소수점 숫자 목록(예:
10.0,30.0Default
글꼴의 공백 문자 너비
각 탭 문자의 수평 오프셋을 재정의합니다. 목록 끝에 도달하면 탭 정지가 반복됩니다. 예를 들어
tab_stops``를 ``10.0,30.0``로 설정하면 첫 번째 탭은 ``10픽셀에 있고 두 번째 탭은10 + 30 = 40픽셀에 있으며 세 번째 탭은 RichTextLabel 원점에서10 + 30 + 10 = 50픽셀에 있습니다.
[url] 태그 클릭 처리
기본적으로 [url] 태그는 클릭해도 아무 작업도 수행되지 않습니다. 이는 웹 브라우저에서 URL을 열도록 제한하는 대신 [url] 태그를 유연하게 사용할 수 있도록 하기 위한 것입니다.
클릭한 [url] 태그를 처리하려면 RichTextLabel 노드의 meta_clicked 시그널를 스크립트 함수에 연결하세요.
예를 들어, 다음 방법을 ``meta_clicked``에 연결하여 사용자의 기본 웹 브라우저를 사용하여 클릭한 URL을 열 수 있습니다.
# This assumes RichTextLabel's `meta_clicked` signal was connected to
# the function below using the signal connection dialog.
func _richtextlabel_on_meta_clicked(meta):
# `meta` is not guaranteed to be a String, so convert it to a String
# to avoid script errors at runtime.
OS.shell_open(str(meta))
고급 사용 사례의 경우 JSON을 [url] 태그의 옵션에 저장하고 meta_clicked 시그널를 처리하는 함수에서 구문 분석하는 것도 가능합니다. 예를 들면:
[url={"example": "value"}]JSON[/url]
가로 센터링
글꼴 옵션
밑줄
값
always,never,hoverDefault
always렌더링 메서드
툴팁
값
String
Default
옵션 가져오기
참조
값
String
Default
URL 대상 주소입니다.
이미지 옵션
색상
값
색상 이름 또는 HEX 형식의 색상
Default
상속
이미지의 색상 색조(변조)입니다.
키
값
Floating-point number
Default
상속
Target height of the image in pixels.
Alternative units to pixels can be specified:
Add
%to the end of the value to specify it as a percentage of the control width instead of pixels. For example,height=50%will make the image half as tall as the control is wide.Add
emto the end of the value to specify it as a ratio of the surrounding font size instead of pixels. For example,height=1emwill make the image as tall as the surrounding text.
너비
값
Floating-point number
Default
상속
Target width of the image in pixels.
Alternative units to pixels can be specified:
Add
%to the end of the value to specify it as a percentage of the control width instead of pixels. For example,width=50%will make the image take up half of the control width.Add
emto the end of the value to specify it as a ratio of the surrounding font size instead of pixels. For example,width=1emwill make the image as wide as the surrounding text is tall.
버전
값
x,y,너비,높이(픽셀)
Default
상속
이미지의 영역 직사각형입니다. 이는 스프라이트시트의 단일 이미지를 표시하는 데 사용할 수 있습니다.
나쁨:
값
false,trueDefault
if x elsetrue``로 설정하고 이미지가 ``width및 ``height``에 지정된 크기보다 작은 경우 업스케일링 대신 크기에 맞게 이미지 패딩이 추가됩니다.툴팁
값
String
Default
옵션 가져오기
정렬
값
Default
<<>>주변 텍스트에 대한 이미지 정렬입니다.
결과
값
String
Default
보조 앱(스크린 리더)에 대한 이미지 설명입니다.
이미지 및 표 수직 정렬
[img] 또는 [table] 태그와 함께 수직 정렬 값이 제공되면 이미지/테이블은 주변 텍스트에 맞춰 정렬하려고 시도합니다. 이미지의 수직점과 텍스트의 수직점을 이용하여 정렬이 이루어집니다. 이미지에는 3개의 가능한 포인트(top, center 및 bottom)가 있고 텍스트와 테이블에는 4개의 가능한 포인트(top, center, baseline 및 bottom)가 있으며 어떤 조합으로도 사용할 수 있습니다.
두 지점을 모두 지정하려면 이미지/테이블 태그의 값으로 전체 이름이나 짧은 이름을 사용하세요.
text [img=top,bottom]...[/img] text
text [img=center,center]...[/img] text
text [table=3,center]...[/table] text # Center to center.
text [table=3,top,bottom]...[/table] text # Top of the table to the bottom of text.
text [table=3,baseline,baseline,1]...[/table] text # Baseline of the second row (rows use zero-based indexing) to the baseline of text.
또한 하나의 값(top, center 또는 bottom)을 지정하여 해당 사전 설정(각각 top-top, center-center 및 bottom-bottom)을 사용할 수도 있습니다.
값의 짧은 이름은 t``(``top), c``(``center), l``(``baseline) 및 b``(``bottom)입니다.
글꼴 옵션
이름, n
값
리소스 경로(Resource path)
Default
상속
리소스 경로(Resource path)
사이즈, s
값
픽셀 단위의 숫자입니다.
Default
상속
커스텀 씬 전환기
glyph_spacing, gl
값
픽셀 단위의 숫자입니다.
Default
상속
각 문자 모양에 대한 추가 간격입니다.
space_spacing, sp
값
픽셀 단위의 숫자입니다.
Default
상속
공백 문자에 대한 추가 간격입니다.
상단_간격, 상단
값
픽셀 단위의 숫자입니다.
Default
상속
줄의 맨 끝에 있지 않는 쉼표 뒤에.
하단_간격, bt
값
픽셀 단위의 숫자입니다.
Default
상속
줄 하단에 추가 간격이 있습니다.
대담하게, 배려
값
부동 소수점 숫자 (실수)
Default
0.0글꼴 강조 강도가 0이 아닌 경우 글꼴 윤곽선을 강조합니다. 음수 값은 윤곽선 두께를 줄입니다.
얼굴_색인, fi
값
정수 숫자.
Default
0TrueType/OpenType 컬렉션의 활성 얼굴 색인입니다.
기울어짐, sln
값
부동 소수점 숫자 (실수)
Default
0.0글꼴 기울기 강도, 양수 값은 문자 모양을 오른쪽으로 기울입니다. 왼쪽에는 음수 값이 있습니다.
개방형_변형, otv
값
쉼표로 구분된 OpenType 변형 태그 목록입니다(각 쉼표 뒤에 공백 없음).
Default
Font OpenType 변형 좌표입니다. `OpenType 변형 태그 <https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg>`__을 참조하세요.
[font otv="wght=200,wdth=400"] # Sets variable font weight and width.
기능:
값
쉼표로 구분된 OpenType 기능 태그 목록입니다(각 쉼표 뒤에 공백 없음).
Default
글꼴 오픈타입 기능. `OpenType 기능 태그 <https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags>`__을 참조하세요.
[font otf="calt=0,zero=1"] # Disable contextual alternates, enable slashed zero.
명명된 타입
이름으로 색상을 지정할 수 있는 태그의 경우 내장된 Color 클래스의 상수 이름을 사용할 수 있습니다. 명명된 클래스는 다양한 대소문자를 사용하여 다양한 스타일로 지정할 수 있습니다. DARK_RED, DarkRed 및 ``darkred``는 동일한 정확한 결과를 제공합니다.
색상 상수 목록은 다음 이미지를 참조하세요.
16진수 색상 코드
불투명한 RGB 색상의 경우 유효한 6자리 16진수 코드가 지원됩니다. [color=#ffffff]white[/color]. ``#6f2``(``#66ff22``와 동일)와 같은 단축형 RGB 색상 코드도 지원됩니다.
투명한 RGB 색상의 경우 RGBA 8자리 16진수 코드를 사용할 수 있습니다. [color=#ffffff88]translucent white[/color]. 알파 채널은 색상 코드의 첫 번째 구성 요소가 아니라 마지막 구성 요소라는 점에 유의하세요. ``#6f28``(``#66ff2288``와 동일)와 같은 짧은 RGBA 색상 코드도 지원됩니다.
셀 옵션
shrink
값
false,trueDefault
'값'
true이면 셀은 내용물에 맞춰 수축될 수 있습니다.expand
값
정수 숫자
Default
1
세포 확장 비율. 이는 다른 셀과 해당 확장 비율에 비례하여 확장을 시도할 셀을 정의합니다.
Server
값
색상 이름 또는 HEX 형식의 색상
Default
상속
셀 테두리 색상입니다.
bg
값
색상 이름 또는 HEX 형식의 색상
Default
상속
셀 배경색입니다. 홀수/짝수 행 배경을 교대로 사용하려면 ``bg=odd_color,even_color``를 사용할 수 있습니다.
패딩
값
부동 소수점 숫자 (실수)
Default
0,0,0,0왼쪽, 위쪽, 오른쪽, 아래쪽 셀 패딩입니다.
또는 순서가 없는 집합(unordered set)이 될 수도 있습니다:
기본적으로 [ul] 태그는 U+2022 "Bullet" 유니코드 문자 모양을 글머리 기호 문자로 사용합니다. 이 동작은 웹 브라우저와 유사합니다. 글머리 기호 문자는 [ul bullet={bullet}]``를 사용하여 사용자 정의할 수 있습니다. 제공된 경우 이 ``{bullet} 매개변수는 묶는 따옴표가 없는 문자열이어야 합니다(예: [bullet=*]). 글머리 기호 문자 뒤에 후행 공백을 추가하여 글머리 기호와 목록 항목 텍스트 사이의 간격을 늘릴 수 있습니다.
bullet 매개변수에 직접 붙여넣을 수 있는 일반적인 글머리 기호 목록은 `Wikipedia의 글머리 기호(타이포그래피) <https://en.wikipedia.org/wiki/Bullet_(typography)>`__를 참조하세요.
선언된 타입
순서가 지정된 목록을 사용하면 항목에 숫자나 문자를 오름차순으로 자동 표시할 수 있습니다. 이 태그는 다음 유형 옵션을 지원합니다.
1- 숫자, 가능한 경우 언어별 번호 매기기 시스템을 사용합니다.a,A- 라틴 문자 소문자 및 대문자입니다.i,I- 소문자와 대문자 로마 숫자.
고급 단계
BBCode를 사용하면 선택적으로 애니메이션을 적용할 수 있는 다양한 텍스트 효과를 만들 수도 있습니다. 여러 가지 사용자 정의 가능한 효과가 기본적으로 제공되며 쉽게 자신만의 효과를 만들 수 있습니다. 기본적으로 애니메이션 효과는 :ref:`SceneTree가 일시 중지된 경우 <doc_pausing_games>`를 일시중지합니다. RichTextLabel의 Process > Mode 속성을 조정하여 이 동작을 변경할 수 있습니다.
아래의 모든 예에서는 나열된 태그 형식의 옵션에 대한 기본값을 언급합니다.
참고
문자 위치를 이동하는 텍스트 효과로 인해 RichTextLabel 노드 경계에 의해 문자가 잘릴 수 있습니다.
RichTextLabel 노드를 선택한 후 검사기에서 **컨트롤 > 레이아웃 > 내용 클립**을 비활성화하거나 효과를 사용하여 줄 위와 아래에 줄 바꿈을 사용하여 텍스트 주위에 충분한 여백이 추가되었는지 확인하여 이 문제를 해결할 수 있습니다.
펄스
Pulse는 각 캐릭터의 불투명도와 색상을 배가시키는 애니메이션 펄스 효과를 만듭니다. 특정 텍스트에 주의를 집중시키는 데 사용할 수 있습니다. 태그 형식은 ``[pulse freq=1.0 color=#ffffff40 ease=-2.0]{text}[/pulse]``입니다.
``freq``는 하프 펄스 주기의 주파수를 제어합니다(높을수록 빠릅니다). 전체 펄스 주기에는 ``2 * (1.0 / freq)``초가 걸립니다. ``color``는 깜박임에 대한 목표 색상 승수입니다. 기본값은 대부분 텍스트를 페이드 아웃하지만 완전히는 아닙니다. ``ease``는 사용할 여유 함수 지수입니다. 음수 값은 인아웃 완화를 제공하므로 기본값은 ``-2.0``입니다.
웨이브
Wave는 텍스트를 위아래로 움직입니다. 태그 형식은 ``[wave amp=50.0 freq=5.0 connected=1]{text}[/wave]``입니다.
amp``는 효과의 높낮이를 제어하고, ``freq``는 텍스트가 위아래로 움직이는 속도를 제어합니다. ``0``의 ``freq 값은 가시파를 생성하지 않으며, 음수 freq 값은 어떠한 파동도 표시하지 않습니다. ``connected``가 ``1``(기본값)인 경우 합자가 포함된 글리프가 함께 이동됩니다. ``connected``가 ``0``인 경우 각 글리프는 합자로 연결되어 있어도 개별적으로 이동됩니다. 이는 글꼴 합자와 관련된 특정 렌더링 문제를 해결할 수 있습니다.
토네이도
토네이도는 텍스트를 원 모양으로 움직입니다. 태그 형식은 ``[tornado radius=10.0 freq=1.0 connected=1]{text}[/tornado]``입니다.
radius``는 오프셋을 제어하는 원의 반경이고, ``freq``는 원에서 텍스트가 움직이는 속도입니다. ``0``의 ``freq 값은 애니메이션을 일시 중지하고, 음수 ``freq``는 애니메이션을 뒤로 재생합니다. ``connected``가 ``1``(기본값)인 경우 합자가 포함된 글리프가 함께 이동됩니다. ``connected``가 ``0``인 경우 각 글리프는 합자로 연결되어 있어도 개별적으로 이동됩니다. 이는 글꼴 합자와 관련된 특정 렌더링 문제를 해결할 수 있습니다.
흔들어
흔들면 텍스트가 흔들립니다. 태그 형식은 ``[shake rate=20.0 level=5 connected=1]{text}[/shake]``입니다.
``rate``는 텍스트가 흔들리는 속도를 제어하고, ``level``는 텍스트가 원점에서 오프셋되는 정도를 제어합니다. ``connected``가 ``1``(기본값)인 경우 합자가 포함된 글리프가 함께 이동됩니다. ``connected``가 ``0``인 경우 각 글리프는 합자로 결합된 경우에도 개별적으로 이동됩니다. 이는 글꼴 합자와 관련된 특정 렌더링 문제를 해결할 수 있습니다.
페이드
페이드는 각 문자의 불투명도를 배가시키는 정적 페이드 효과를 만듭니다. 태그 형식은 ``[fade start=4 length=14]{text}[/fade]``입니다.
``start``는 페이드 명령이 삽입된 위치를 기준으로 폴오프의 시작 위치를 제어하고, ``length``는 페이드 아웃이 발생해야 하는 문자 수를 제어합니다.
무지개
Rainbow는 텍스트에 시간이 지남에 따라 변하는 무지개 색상을 제공합니다. 태그 형식은 ``[rainbow freq=1.0 sat=0.8 val=0.8 speed=1.0]{text}[/rainbow]``입니다.
freq``는 무지개가 반복되기 전에 확장되는 문자 수를 결정하고, ``sat``는 무지개의 채도, ``val``는 무지개의 값입니다. ``speed``는 초당 완전한 무지개 주기 수입니다. 양수 ``speed 값은 애니메이션을 앞으로 재생하고, 0 값은 애니메이션을 일시 중지하며, 음수 speed 값은 애니메이션을 뒤로 재생합니다.
글꼴 윤곽선은 무지개 효과의 영향을 받지 않습니다*(원래 색상을 유지함). 기존 글꼴 색상은 무지개 효과로 재정의됩니다. 그러나 CanvasItem의 **Modulate* 및 Self Modulate 속성은 변조가 최종 색상을 곱하므로 무지개 효과의 모양에 영향을 미칩니다.
맞춤형 BBCode 태그 및 텍스트 효과
RichTextEffect 리소스 유형을 확장하여 사용자 정의 BBCode 태그를 생성할 수 있습니다. 만들기는 RichTextEffect 리소스 유형을 확장하고 검사기에서 효과를 선택할 수 있도록 스크립트에 class_name``를 제공하는 새로운 스크립트 파일입니다. 편집기 자체 내에서 이러한 사용자 정의 효과를 실행하려면 GDScript 파일에 ``@tool 주석을 추가하십시오. RichTextLabel은 스크립트를 연결할 필요가 없으며 tool 모드에서 실행될 필요도 없습니다. 새로운 효과는 Markup > Custom Effects 배열에 추가하여 인스펙터에 등록하거나 install_ effect() 메서드를 사용하여 코드에 등록할 수 있습니다.
``class_name``로 RichTextEffect를 확장하는 스크립트를 저장한 후 사용자 정의 RichTextEffect 선택
경고
RichTextLabel의 마크업 > 사용자 정의 효과 속성에 사용자 정의 효과가 등록되지 않은 경우 효과가 표시되지 않으며 원본 태그는 그대로 유지됩니다.
확장해야 하는 함수는 _process_custom_fx(char_fx) 단 하나뿐입니다. 선택적으로 멤버 이름 bbcode``를 추가하여 사용자 정의 BBCode 식별자를 제공할 수도 있습니다. 코드는 ``bbcode 속성을 자동으로 확인하거나 파일 이름을 사용하여 BBCode 태그가 무엇인지 결정합니다.
_process_custom_fx
여기에서 각 효과의 논리가 발생하고 텍스트 렌더링의 그리기 단계 중 글리프당 한 번씩 호출됩니다. 이는 연관된 문자 모양이 렌더링되는 방식을 제어하는 몇 가지 변수를 보유하는 CharFXTransform 개체를 전달합니다.
``range``는 사용자가 특정 사용자 정의 효과 블록에 얼마나 멀리 있는지를 인덱스로 알려줍니다.
``elapsed_time``는 텍스트 효과가 실행된 총 시간입니다.
``visible``는 글리프가 표시되는지 여부를 알려주고 텍스트의 특정 부분을 숨길 수도 있습니다.
``offset``는 일반적인 상황에서 주어진 글리프가 렌더링되어야 하는 위치를 기준으로 한 오프셋 위치입니다.
``color``는 주어진 글리프의 색상입니다.
glyph_index및 ``font``는 그려지는 글리프와 이를 그리는 데 사용되는 글꼴 데이터 리소스입니다.마지막으로
env``는 지정된 사용자 정의 효과에 할당된 매개변수의 :ref:`class_Dictionary`입니다. 사용자가 지정한 경우 선택적 기본값과 함께 :ref:`get() <class_Dictionary_method_get>`을 사용하여 각 매개 변수를 검색할 수 있습니다. 예를 들어 ``[custom_fx spread=0.5 color=#FFFF00]test[/custom_fx]``는 ``env사전에 부동spread및 색상color매개변수를 갖습니다. 더 많은 사용 예를 보려면 아래를 참조하세요.
이 함수에 대해 마지막으로 주의할 점은 효과가 올바르게 처리되었는지 확인하려면 부울 true 값을 반환해야 한다는 것입니다. 이렇게 하면 특정 글리프를 렌더링하는 데 문제가 있는 경우 사용자가 사용자 지정 효과 논리에서 발생한 오류를 수정할 때까지 사용자 지정 효과 렌더링을 완전히 중단합니다.
어떻게 작동하는 지의 예제입니다:
유령
@tool
extends RichTextEffect
class_name RichTextGhost
# Syntax: [ghost freq=5.0 span=10.0][/ghost]
# Define the tag name.
var bbcode = "ghost"
func _process_custom_fx(char_fx):
# Get parameters, or use the provided default value if missing.
var speed = char_fx.env.get("freq", 5.0)
var span = char_fx.env.get("span", 10.0)
var alpha = sin(char_fx.elapsed_time * speed + (char_fx.range.x / span)) * 0.5 + 0.5
char_fx.color.a = alpha
return true
행렬 팁
@tool
extends RichTextEffect
class_name RichTextMatrix
# Syntax: [matrix clean=2.0 dirty=1.0 span=50][/matrix]
# Define the tag name.
var bbcode = "matrix"
# Gets TextServer for retrieving font information.
func get_text_server():
return TextServerManager.get_primary_interface()
func _process_custom_fx(char_fx):
# Get parameters, or use the provided default value if missing.
var clear_time = char_fx.env.get("clean", 2.0)
var dirty_time = char_fx.env.get("dirty", 1.0)
var text_span = char_fx.env.get("span", 50)
var value = get_text_server().font_get_char_from_glyph_index(char_fx.font, 1, char_fx.glyph_index)
var matrix_time = fmod(char_fx.elapsed_time + (char_fx.range.x / float(text_span)), \
clear_time + dirty_time)
matrix_time = 0.0 if matrix_time < clear_time else \
(matrix_time - clear_time) / dirty_time
if matrix_time > 0.0:
value = int(1 * matrix_time * (126 - 65))
value %= (126 - 65)
value += 65
char_fx.glyph_index = get_text_server().font_get_glyph_index(char_fx.font, 1, value, 0)
return true
이름을 더블 클릭하여 이름을 바꿀 수 있는 새 함수가 추가됩니다:
[center][ghost]This is a custom [matrix]effect[/matrix][/ghost] made in
[pulse freq=5.0 height=2.0][pulse color=#00FFAA freq=2.0]GDScript[/pulse][/pulse].[/center]