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 |
|
Mostrar {url} como tal, subrayarlo y hacerlo clickable. Debe ser manejado con la señal "meta_clicked" para tener efecto. Ver El manejo de clics de la etiqueta [url]. |
url (ref) |
|
Hace que {texto} haga referencia a <url> (subrayado y clickeable). Debe ser manejado con la señal "meta_clicked" para tener efecto. Ver El manejo de clics de la etiqueta [url]. |
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¶
Para colores RGB opacos, se admiten códigos hexadecimales válidos de 6 dígitos, por ejemplo, [color=#ffffff]blanco[/color]
. También se admiten códigos de color RGB cortos como #6f2
(equivalente a #66ff22
).
Para colores RGB transparentes, se puede usar cualquier código hexadecimal de 8 dígitos, por ejemplo, [color=#88ffffff]blanco translúcido[/color]
. En este caso, debes tener en cuenta que el canal alfa es el primero componente del código de color, no el último. También se admiten códigos de color RGBA cortos como #86f2
(equivalente a #8866ff22
).
El manejo de clics de la etiqueta [url]
¶
Por defecto, las etiquetas [url]
no hacen nada cuando se hace clic en ellas. Esto permite un uso flexible de las etiquetas [url]
en lugar de limitarlas a la apertura de URL en un navegador web.
Para manejar las etiquetas [url]
cuando se hace clic en ellas, conecta la señal meta_clicked del nodo RichTextLabel a una función de script.
Por ejemplo, el siguiente método puede ser conectado a meta_clicked
para abrir las URLs clickeadas utilizando el navegador web predeterminado del usuario:
# 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))
Para casos de uso más avanzados, también es posible almacenar JSON en la opción de una etiqueta [url]
y analizarlo en la función que maneja la señal meta_clicked
. Por ejemplo: [url={"ejemplo": "valor"}]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.