报名参加即将到来的黑客马拉松大赛!奖金为总额超过 25 万美元的 MANA 和 LAND 。
X
你好,请选择
语言:
关闭

场景中的文本组件

可以使用 TextShape 组件在场景某个位置上添加文本。

Decentraland 中的文本支持所有 utf8 字符,包括东方和特殊字符。

注意:此组件对于场景三维空间内的标签和 UI 非常有用,但不适用于用户的 2D HUD UI。

TextShape 组件与其他形状组件如基本形状、glTF 3D模型等形状组件互相排斥,更多细节请参阅形状组件

要在现有实体上添加文本作为标签,可以创建第二个具有 TextShape 组件的实体,并将其设置为另一个实体的子实体。

创建一个文本组件

以下示例显示如何创建 TextShape 组件并将其添加到实体。

const myEntity = new Entity()
const myText = new TextShape("Hello World!")
myEntity.addComponent(myText)

注意:如果具有文本组件的实体是另一个实体的子实体,那么它将受到父项 scale 缩放比例的影响。 如果父实体不均匀缩放,则会导致文本被拉伸或压缩。

更改文本值

在创建新文本组件时,设置的用于显示的字符串存储在 value 字段中。

如果要更改组件显示的字符串,可以随时更改 value 字段。

myText.getComponent(TextShape).value = "new string"

基本文本属性

TextShape 组件有几个属性可以用来设置文本的样式。 下面是一些最常见的几个属性:

  • fontSizenumber
  • colorColor3 object。 Color3 对象将_RBG_颜色存储为 0 到 1 之间的三个数字。
  • fontFamilystring。 可以是特定字体(如 Arial)或某种字体(serif/sans-serif)。 如果列出几种不同的字体,它将尝试使用第一种字体,没有的话再使用下一种字体。 如果您使用的是不常见的字体,则始终建议您在此设置更通用的字体,以防用户无法访问字体。
  • fontWeightstring。 可以是 normalboldbolderlighter
  • opacitynumber。 不透明度,设置值小于 1 会使文本半透明。
const myText = new TextShape("Hello World!")
myText.fontSize = 30
myText.color = Color3.Blue()
myText.fontFamily = "Arial, Helvetica, sans-serif"

文本的对齐和 padding 属性

TextShape组件创建一个具有大小,padding 等的文本框。

  • hTextAlign字符串leftrightcenter(默认)。
  • vTextAlign:字符串。 topbottomcenter(默认)。
  • width数字。 文本框的宽度。
  • height数字。 文本框的高度。
  • resizeToFit:_ boolean_。 如果_true_,则调整字体大小以尽可能大的显示在文本框内。
  • paddingTop数字。 文本框与文本框轮廓之间的空格。
  • paddingRight数字。 文本框与文本框轮廓之间的空格。
  • paddingBottom数字。 文本框与文本框轮廓之间的空格。
  • paddingLeft数字。 文本框与文本框轮廓之间的空格。
  • zIndex数字。 当有多个 flat 实体占据相同的空间时,用于确定哪个实体显示在前面。

提示:如果文本浮现在空间中,添加一个Billboard 组件是个好主意,能让文本始终旋转面向用户,方便阅读。

文本阴影和轮廓属性

默认情况下,文本没有阴影,但您可以设置以下值以使其具有类似阴影的效果。

  • shadowBlur: number
  • shadowOffsetX: number
  • shadowOffsetY: number
  • shadowColor: Color3 对象. Color3 Color3 对象将 RBG 颜色存储为 0 到 1 之间的三个数字.
myText.addComponent(new TextShape("Text with shadow"))
myText.getComponent(TextShape).shadowColor = Color3.Gray()
myText.getComponent(TextShape).shadowOffsetY = 1
myText.getComponent(TextShape).shadowOffsetX = -1

文字还可以围绕有一个不同颜色的轮廓。

  • outlineWidth数字。 在所有方向上,文本轮廓具有的像素宽度。 默认为 0,这使其不可见。
  • outlineColorColor3 对象。 Color3 对象将 RBG 颜色存储为 0 到 1 之间的三个数字。

多行文本

如果希望文本跨越多行,请使用 \n 作为字符串的一部分。 以下示例具有两行的文本:

myText.addComponent(new TextShape("This is one line. \nThis is another line"))

您还可以设置与多行文本相关的以下属性:

  • lineCountnumber。 最多可以在文本框中放入多少行文本。 默认为 1textWrapping 属性必须 true 才能使用多行。
  • lineSpacingstring。 行间距。

单击文本

默认情况下,TextShape 组件不可单击。

如果在按钮上放置文本标签,则文本将阻止您单击其后面的按钮。 在这种情况下,您可以将 TextShapeisPickable 字段设置为 false

 myText.addComponent(new TextShape("Text"))
 myText.getComponent(TextShape).isPickable = false