- [官方文档]
什么是BBCode?
- 轻量级标记语言,类似于Markdown语法,可以轻松实现粗体、斜体、
删除线等效果
开启BBCode
- 在组件RichTextLabel里勾选BBCode Enabled
常用效果
- 标记内文本空格不会像Html输入多个空格最后合并成一个,文本内有多少空格就会显示多少空格
BBCode
# 标记以什么开始就以什么结束
[b]粗体[/b]
[i]斜体[/i]
[b][i]加粗斜体[/i][/b]
[u]下弧线[/u]
[s]删除线[/s]
# 通用颜色
[color=red]红色[/color]
# 16进制颜色表示
[color=#ffffff]白色[/color]
# 在文字前方显示
[fgcolor=red]红色前景色[/fgcolor]
# 在文字后方显示
[bgcolor=white]白色背景色[/bgcolor]
# 代码块 文本里会等距展示 mono font
[code]var a: int = 0[/code]
# 插入图片 路径或者链接
[img]res://...png[/img]
# 还可以添加位置、大小
[img=top,center,30x30]https://...[/img]
# 文字大小
[font_size=20]修改文字大小[/font_size]
# 超链接
[url=https://godotengine.org/zh-cn/]打开官网[/url]
# 悬浮窗提示
[hint=悬浮内容]悬停展示内容[/hint]
# 对齐模式
[left]左对齐[/left]
[right]右对齐[/right]
[center]居中[/center]常用进阶效果
- 渐隐效果
BBCode
# start 起始位置
# length 字符长度
[fade start=0 length=4]渐隐效果[/fade]
- 脉冲/呼吸效果
BBCode
# freq 频率 值越大频率越快
# color 目标颜色 #ffff0050 透明度为50%的黄色
# ease 变化缓动 默认为-2
[pulse freq=1 color=#ffff0050 ease=-2.0]脉冲/呼吸效果[/pulse]
- 霓虹效果
BBCode
# freq 频率 值越大频率越快
# sat 饱和度 0~1 值越大颜色越鲜艳
# val 亮度 0~1 0黑色 1白色
# speed 速度 0暂停 正数向右变化 负数向左变化
[rainbow freq=2 sat=0.5 val=1 speed=1]霓虹效果[/rainbow]
- 波浪效果
BBCode
# amp 幅度 值越大波浪幅度越大
# freq 频率
# connected 字符一起运动 默认值为1 0表示单独运动 ->0单独运动可以解决连字的渲染问题
[wave amp=50 freq=10 connected=0]波浪效果[/wave]
- 龙卷风效果
- 字符被截取请把富文本的Layout->Clip Content取消勾选
BBCode
# radius 半径
# freq 频率
# connected 字符一起运动
[tornado radius=50 freq=2 connected=1]龙卷风效果[/tornado]
- 抖动效果
BBCode
# rate 抖动速度
# level 抖动强度
[shake rate=20 level=10 connected=1]抖动效果[/shake]
高阶自定义BBCode
- 工具注解@tool
- 继承RichTextEffect
- 定义类名称
GDScript
@tool
extends RichTextEffect
class_name RichTextGhost
# 标签名
var bbcode = "ghost"
func _process_custom_fx(char_fx):
# 标签内获取的数据 名称和默认值
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- 在富文本的Markup添加RichTextGhost效果(如果没有就关闭这个节点和脚本重新打开加载一下)
- 然后在文本内输入就能使用
BBCode
[ghost speed=20 span=1 ]自定义效果[/ghost]