Godot：如何垂直对齐 bbcode

Question

有没有办法像这样使用 bbcode 垂直对齐文本？

[img=16]res://icon.png[/img] Hello World

Answer 1

在图像和文本之间添加一个带有 /n 的回车 return。

Answer 2

遗憾的是 Godot 没有任何垂直对齐的 BBCode tags。因此，没有直接的垂直居中方法。但是有些事情我们可以做...

默认：文字在底部

如您所见，默认情况下，您会在图像底部获取文本：

[img=16]res://icon.png[/img]Hello World

Table: 文本在顶部

如果我们使用 table，我们可以获得顶部的文本，如下所示：

[table=2][cell][img=16]res://icon.png[/img][/cell][cell]Hello World[/cell][/table]

然后你可以使用新行将它向下移动（或者你可以将它与下面的自定义标签结合起来）。我认为这是更通用的解决方案。

垂直移动图像的技巧

文档建议这个技巧：我们可以创建一个空的 BitmapFont 资源，并给它一些积极的 ascent。然后用该字体显示图像。

在我的例子中，我创建了一个名为 v.tres 的字体，所以我的 BBCode 如下：

[font=v.tres][img=16]res://icon.png[/img][/font]Hello World

结果是将图像向上移动了我们在 ascent 中所说的像素数。 并且大概您可以算出将图像向上移动多少以获得您想要的对齐方式（是的，这意味着不同的 BitmapFont 资源用于不同的 ascent 值）。

垂直移动文本的自定义标签

Godot 允许定义自定义 BBCode 标签，所以让我们使用它来垂直移动文本。

我将展示如何完成这项工作：

[img=16]icon.png[/img][valign px=8]Hello World[/valign]

首先使用以下代码创建一个 valign.gd 脚本：

tool class_name RichTextVAlign extends RichTextEffect

var bbcode := "valign"

func _process_custom_fx(char_fx:CharFXTransform) -> bool:
    char_fx.offset = Vector2.UP * char_fx.env.get("px", 0.0)
    return true

看到我们正在读取 px 属性，默认值为 0.0 和 char_fx.env.get("px", 0.0)，我们使用该值通过设置 char_fx.offset 来替换文本.

然后在RichTextLabel中添加一个新的RichTextVAlign（也就是我们创建的class）到custom_effects属性.

请记住，我们正在移动文本的基线（如果您在前面描述的 table 方法中执行此操作，您可以将其视为移动文本的顶部. 是的，使用底片将其向下移动）。我们无法获取文本块的高度。

Godot：如何垂直对齐 bbcode

Godot: How to vertically align bbcode

bbcode

vertical-alignment

godot