BBCode en RichTextLabel¶
Introducción¶
Los nodos de la etiqueta son geniales para mostrar el texto básico, pero tienen límites. Si quieres cambiar el color del texto, o su alineación, ese cambio afecta a todo el texto del nodo Label. No puedes hacer que sólo una parte del texto sea de un color, o que sólo una parte del texto esté centrada. Para sortear esta limitación usarías un RichTextLabel.
RichTextLabel permite la visualización de marcas de texto complejas en un Control. Tiene una API incorporada para generar el marcado, pero también puede analizar un BBCode.
Nótese que las etiquetas de BBCode también pueden ser usadas, hasta cierto punto, en el XML source of the class reference.
Usando BBCode¶
Para un texto con formato uniforme se puede escribir en la propiedad "Text", pero si se desea utilizar el marcado BBCode se debe utilizar la propiedad "Text" en la sección "Bb Code" (bbcode_text
). Al escribir en esta propiedad se activará el análisis sintáctico de su marcado para dar formato al texto según lo solicitado. Antes de que esto ocurra, necesita activar la casilla de verificación "Enabled" en la sección "Bb Code" (bbcode_enabled
).

Por ejemplo, "BBCode [color=blue]blue[/color]`` haría que la palabra "blue" tuviera un color azul.

Notarán que después de escribir en la propiedad "Texto" del BBCode, la propiedad "Texto" normal ahora tiene el texto sin el BBCode. Mientras que la propiedad "Text" será actualizada por la propiedad BBCode, no puedes editar la propiedad texto o perderás el marcado BBCode. Todos los cambios en el texto deben hacerse en el parámetro BBCode.
Nota
Para que las etiquetas BBCode como [b]
(negrita), [i]
(cursiva) o [código]
funcionen, debes configurar primero las fuentes personalizadas para el nodo RichTextLabel.
Todavía no hay etiquetas BBCode para controlar el centrado vertical del texto.
Referencia¶
Comando |
Etiqueta |
Descripción |
negrita |
|
Hace {text} más oscuro. |
cursiva |
|
Hace {text) cursiva. |
Subrayado |
|
Subraya el {text}. |
tachado |
|
Tachar el {text). |
codigo |
|
Hace que {text} utilice la fuente del código (que es típicamente monoespacio). |
centrado |
|
Centra horizontalmente el {text}. |
derecho |
|
Centra horizontalmente al {text} a la derecha. |
llenar |
|
Hace que el {text} se expanda a lo ancho del RchTextLabel. |
indentar |
|
Aumentar el nivel de indentación del {text}. |
url |
|
Show {url} as such, underline it and make it clickable. Must be handled with the "meta_clicked" signal to have an effect. See Handling [url] tag clicks. |
url (ref) |
|
Makes {text} reference <url> (underlined and clickable). Must be handled with the "meta_clicked" signal to have an effect. See Handling [url] tag clicks. |
imagen |
|
Inserte la imagen en el recurso {path}. |
imagen redimensionada |
|
Insertar la imagen en el recurso {path} usando <width> (mantiene la proporción). |
imagen redimensionada |
|
Insertar la imagen en el recurso {path} usando <ancho>×<alto>. |
fuente |
|
Usa la fuente personalizada en <path> para {text}. |
color |
|
Cambia el color del {text}; usa el nombre o el formato #, como |
tabla |
|
Crea una tabla con un <number> de columnas. |
celda |
|
Añade celdas con el {texto} a la tabla. |
Nombres de colores incorporados¶
Lista de nombres de colores válidos para la etiqueta [color=<nombre>]:
agua
negro
azul
fucsia
gris
verde
lima
granate
azul marino
violeta
red
plata
verde azulado
Blanco
Amarillo
Códigos Hexadecimales de color¶
For opaque RGB colors, any valid 6-digit hexadecimal code is supported, e.g. [color=#ffffff]white[/color]
.
Short RGB color codes such as #6f2
(equivalent to #66ff22
) are also supported.
For transparent RGB colors, any 8-digit hexadecimal code can be used, e.g. [color=#88ffffff]translucent white[/color]
.
In this case, note that the alpha channel is the first component of the color code, not the last one.
Short RGBA color codes such as #86f2
(equivalent to #8866ff22
) are also supported.
Handling [url]
tag clicks¶
By default, [url]
tags do nothing when clicked. This is to allow flexible use
of [url]
tags rather than limiting them to opening URLs in a web browser.
To handle clicked [url]
tags, connect the RichTextLabel node's
meta_clicked signal to a script function.
For example, the following method can be connected to meta_clicked
to open
clicked URLs using the user's default web browser:
# 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 run-time.
OS.shell_open(str(meta))
For more advanced use cases, it's also possible to store JSON in an [url]
tag's option and parse it in the function that handles the meta_clicked
signal.
For example: [url={"example": "value"}]JSON[/url]
Desplazamiento vertical de la imagen¶
Utilizas una fuente personalizada para tu imagen para alinearla verticalmente.
Crear un recurso
BitmapFont
Ponga esta fuente de mapa de bits con un valor positivo para la propiedad
ascent
, que es su desplazamiento de alturaPonga la etiqueta BBCode de esta manera:
[font=<font-path>][img]{image-path}[/img][/font]
Efectos de animación¶
BBCode también puede ser usado para crear diferentes efectos de animación de texto. Se proporcionan cinco efectos personalizables fuera de la caja, y puedes crear fácilmente los tuyos propios.
Ola¶

La onda hace que el texto suba y baje. Su formato de etiqueta es [wave amp=50 freq=2][/wave]
. amp
controla cuán alto y bajo va el efecto, y freq
controla cuán rápido el texto sube y baja.
Tornado¶

El tornado hace que el texto se mueva en un círculo. Su formato de etiqueta es [tornado radius=5 freq=2][/tornado]
. radius
es el radio del círculo que controla el desplazamiento, freq
es la velocidad con la que el texto se mueve en un círculo.
Agitado¶

Agitar hace que el texto tiemble. Su formato de etiqueta es [Shake rate=5 level=10][/shake]
. rate
controla la rapidez con que el texto se agita, level
controla la distancia del texto desde el origen.
Desaparecer¶

El fundido crea un efecto de desvanecimiento sobre el texto que no está animado. Su formato de etiqueta es [fade start=4 length=14][/fade]
. start
controla la posición inicial de la caída relativa a donde se inserta el comando fade, length
controla sobre cuántos caracteres debe tener lugar el desvanecimiento.
Arcoiris¶

El arcoiris le da al texto un color de arco iris que cambia con el tiempo. Su formato de etiqueta es [rainbow freq=0.2 sat=10 val=20][/rainbow]
. "freq" es el número de ciclos completos del arcoiris por segundo, "sat" es la saturación del arcoiris, "val" es el valor del arcoiris.