Godot：如何垂直对齐bbcode

Posted 2023-03-05

【中文标题】Godot：如何垂直对齐bbcode

【英文标题】：Godot: How to vertically align bbcode

【发布时间】：2022-01-21 09:10:39

【问题描述】：

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

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

【参考方案1】：

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

---

默认：底部文字

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

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

---

表格：顶部的文字

如果我们使用表格，我们可以获取顶部的文本，如下所示：

[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 中所说，结果是将图像向上移动了那么多像素。 据推测，您可以计算出将图像向上移动多少才能获得所需的对齐方式（是的，这意味着 ascent 的不同值的 BitmapFont 资源不同）。

---

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

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（这是我们创建的类）添加到custom_effects 属性中。

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

【参考方案2】：

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