BBCode em RichTextLabel¶
Introdução¶
Os nós de rótulo são ótimos para exibir texto básico, mas têm limites. Se você quiser alterar a cor do texto ou seu alinhamento, essa alteração afetará todo o texto no nó Label. Você não pode ter apenas uma parte do texto com uma cor ou apenas uma parte do texto centralizada. Para contornar essa limitação, você usaria um RichTextLabel.
RichTextLabel permite a exibição de marcações de texto complexas em um Control. Ele possui uma API embutida para gerar a marcação, mas também pode analisar um BBCode.
Observe que as tags BBCode também podem ser usadas, até certo ponto, na fonte XML da referência de classe.
Usando BBCode¶
Para texto formatado uniformemente, você pode escrever na propriedade "Texto", mas se quiser usar a marcação BBCode, deve usar a propriedade "Texto" na seção "Bb Code" (bbcode_text
). Gravar nessa propriedade acionará a análise de sua marcação para formatar o texto conforme solicitado. Antes que isso aconteça, você precisa alternar a caixa de seleção "Enabled" na seção "Bb Code" (bbcode_enabled
).
Por exemplo, BBCode [color=blue]azul[/color]
renderizaria a palavra "azul" com uma cor azul.
Você notará que depois de escrever na propriedade "Texto" do BBCode, a propriedade "Texto" normal agora tem o texto sem o BBCode. Embora a propriedade text seja atualizada pela propriedade BBCode, você não pode editar a propriedade text ou perderá a marcação BBCode. Todas as alterações no texto devem ser feitas no parâmetro BBCode.
Nota
Para que tags BBCode como [b]
(negrito), [i]
(itálico) ou [code]
funcionem, primeiro você deve configurar fontes personalizadas para o nó RichTextLabel.
Ainda não há tags BBCode para controlar a centralização vertical do texto.
Referência¶
Comando |
Etiqueta |
Descrição |
negrito |
|
Torna {text} negrito. |
itálico |
|
Coloca {text} em itálico. |
sublinhado |
|
Torna {texto} sublinhado. |
riscado |
|
Torna {text} riscado. |
código |
|
Faz com que {text} use a fonte do código (que normalmente é monoespaçada). |
centralizado |
|
Faz com que {text} seja centralizado horizontalmente. |
direita |
|
Faz com que {text} seja alinhado horizontalmente à direita. |
preencher |
|
Faz com que {text} preencha a largura do RichTextLabel. |
recuo |
|
Aumenta o nível de recuo de {text}. |
url |
|
Mostre {url} como tal, sublinhe-o e torne-o clicável. Deve ser tratado com o sinal "meta_clicked" para ter efeito. Veja Lidando com cliques de tags [url]. |
url (ref) |
|
Faz {text} ser um link para <url> (sublinhado e clicável). Deve ser tratado com o sinal "meta_clicked" para ter efeito. Veja Lidando com cliques de tags [url]. |
imagem |
|
Insira a imagem no recurso {caminho}. |
imagem redimensionada |
|
Insira a imagem no recurso {caminho} usando <width> (mantém a proporção). |
imagem redimensionada |
|
Insira a imagem no recurso {caminho} usando <largura>×<height>. |
fonte |
|
Use fonte personalizada em <caminho> para {text}. |
cor |
|
Mude a cor do {texto}; use o nome ou o formato #, como |
tabela |
|
Cria uma tabela com <number> colunas. |
célula |
|
Adiciona células com o {texto} à tabela. |
Nomes de cores embutidas¶
Lista de nomes de cores válidos para a tag [color=<name>]:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
purple
red
silver
teal
white
yellow
Códigos de cores hexadecimais¶
Para cores RGB opacas, qualquer código hexadecimal válido de 6 dígitos é suportado, por ex. [color=#ffffff]branco[/color]
. Códigos de cores RGB curtos como #6f2
(equivalente a #66ff22
) também são suportados.
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.
Lidando com cliques de tags [url]
¶
Por padrão, as tags [url]
não fazem nada quando clicadas. Isso é para permitir o uso flexível de tags [url]
em vez de limitá-los a abrir URLs em um navegador da web.
Para lidar com tags [url]
clicadas, conecte o sinal meta_clicked do nó RichTextLabel a uma função de script.
Por exemplo, o seguinte método pode ser conectado a meta_clicked
para abrir URLs clicados usando o navegador padrão do usuário:
# 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 mais avançados, também é possível armazenar JSON em uma opção de tag [url]
e analisá-lo na função que trata o sinal meta_clicked
. Por exemplo: [url={"exemplo": "valor"}]JSON[/url]
Deslocamento vertical da imagem¶
Use uma fonte personalizada para sua imagem para alinhá-la verticalmente.
Criar um recurso ``BitmapFont`
Defina esta fonte de bitmap com um valor positivo para a propriedade
ascent
, esse é o seu deslocamento de alturaDefina a tag BBCode desta forma:
[font=<caminho-da-fonte>][img]{caminho-da-imagem}[/img][/font]
Efeitos de animação¶
BBCode também pode ser usado para criar diferentes efeitos de animação de texto. Cinco efeitos personalizáveis são fornecidos por padrão, e você pode facilmente criar o seu próprio.
Onda¶
A Onda faz o texto subir e descer. Seu formato de tag é [wave amp=50 freq=2][/wave]
. amp
controla quão alto e baixo o efeito vai, e freq
controla quão rápido o texto sobe e desce.
Tornado¶
Tornao faz o texto se mover em um círculo. Seu formato de tag é [tornado radius=5 freq=2][/tornado]
. radius
é o raio do círculo que controla o deslocamento, freq
é a velocidade com que o texto se move em um círculo.
Tremendo¶
Shake faz o texto tremer. Seu formato de tag é [shake rate=5 level=10][/shake]
. rate
controla a rapidez com que o texto treme, level
controla o quanto o texto é deslocado da origem.
Desaparecer¶
Fade cria um efeito de fade sobre o texto que não é animado. Seu formato de tag é [fade start=4 length=14][/fade]
. start
controla a posição inicial do falloff em relação a onde o comando fade é inserido, length
controla em quantos caracteres o desaparecer gradualmente deve ocorrer.
Arco-íris¶
Arco-íris dá ao texto uma cor de arco-íris que muda com o tempo. Seu formato de tag é [rainbow freq=0.2 sat=10 val=20][/rainbow]
. freq
é o número de ciclos de arco-íris completos por segundo, sat
é a saturação do arco-íris, val
é o valor do arco-íris.