Text

Cómo añadir texto a tu escena

Agrega texto a una escena usando el TextShape componente. Este texto se sitúa en una posición

El texto en Decentraland admite todos los utf8 caracteres, esto incluye caracteres orientales y especiales.

📔 Nota: Este componente es útil para etiquetas y UIs dentro del mundo que existen en el espacio 3D de la escena, no para la UI 2D HUD del jugador.

El TextShape el componente es mutuamente exclusivo con otros componentes shape como las formas primitivas y modelos 3D glTF, ver Shape components para más detalles.

Para agregar texto como etiqueta en una entidad existente, creas una segunda entidad que tenga el TextShape componente y la configuras como hija de la otra entidad.

Usa el Scene Editor en Creator Hub

La forma más fácil de colocar texto en el mundo es añadir un Text Smart item visualmente en el Scene Editor. Luego puedes configurar todos los campos disponibles en la UI del Scene Editor.

Crear un componente de texto

El siguiente ejemplo muestra cómo crear un TextShape componente y añadirlo a una entidad mediante código.

const sign = engine.addEntity()

Transform.create(sign, {
	position: Vector3.create(8, 1, 8),
})

TextShape.create(sign, {
	text: 'Hello World',
})

📔 Nota: Si la entidad con el componente de texto es hija de otra entidad, entonces se verá afectada por la escala del padre. Si el padre está escalado de forma desigual a lo largo de sus ejes, esto resultará en que el texto también se estire o se comprima.

📔 Nota: TextShape los componentes no son clicables. PointerEvents los componentes no se activan cuando se usan en entidades que tienen un TextShape componente.

📔 Nota: TextShape deben importarse vía

import { TextShape } from "@dcl/sdk/ecs"

Vea Imports para ver cómo manejar estos fácilmente.

Cambiar el valor del texto

Al crear un nuevo componente de texto, le asignas una cadena para mostrar. Esta cadena se almacena en el campo text campo.

Si deseas cambiar la cadena que muestra el componente, puedes hacerlo en cualquier momento cambiando el campo text campo en un mutable version del componente.

const mutableText = TextShape.getMutable(myEntity)

mutableText.text = 'new string'

Propiedades básicas del texto

El TextShape el componente tiene varias propiedades que se pueden configurar para estilizar el texto. A continuación hay algunas de las más comunes:

• font: Valor del enum Font.

• fontSize: number. Una entidad con font 10 tiene 1 metro de altura.

• textColor: Color4 objeto. Color4 los objetos almacenan un RBG color como tres números de 0 a 1, más alpha para la transparencia. Ver tipos de color para más detalles.

TextShape.create(sign, {
	text: 'Hello World',
	textColor: { r: 1, g: 0, b: 0, a: 1 },
	fontSize: 5,
	font: Font.F_SANS_SERIF,
})

Fuentes

Las formas de texto pueden usar fuentes del enum Font. Este enum actualmente incluye las siguientes fuentes:

• Font.FSansSerif

• Font.FSerif

• Font.FMonospace

Por defecto usa Font.FSansSerif.

TextShape.create(sign, {
	text: 'Hello World',
	textColor: { r: 1, g: 0, b: 0 },
	fontSize: 5,
	font: Font.FSansSerif,
})

📔 Nota: Actualmente, todas las fuentes se renderizan como Sans Serif. Este es un problema conocido que se corregirá en el futuro.

💡 Consejo: Si usas VS studio u otro IDE, escribe Font. y deberías ver una lista de sugerencias con todas las fuentes disponibles.

Propiedades de alineación y padding del texto

El TextShape el componente crea un cuadro de texto que tiene un tamaño, padding, etc.

• textAlign: Selecciona un valor del TextAlignMode enum. Los valores posibles incluyen todas las combinaciones entre vertical (top, bottom, center) y horizontal (left, right, center) alineación.

• width: number. El ancho del cuadro de texto.

• height: number. La altura del cuadro de texto.

• paddingTop: number. Espacio entre el texto y el contorno del cuadro de texto.

• paddingRight: number. Espacio entre el texto y el contorno del cuadro de texto.

• paddingBottom: number. Espacio entre el texto y el contorno del cuadro de texto.

• paddingLeft: number. Espacio entre el texto y el contorno del cuadro de texto.

• zIndex: number. Útil cuando múltiples entidades planas ocupan el mismo espacio, determina cuál mostrar al frente.

💡 Consejo: Si se pretende que un texto flote en el espacio, es buena idea añadir un Billboard componente para que el texto rote y siempre mire al jugador y sea legible.

Propiedades de sombra y contorno del texto

El texto no tiene sombra por defecto, pero puedes establecer los siguientes valores para darle un efecto parecido a sombra.

• shadowBlur: number

• shadowOffsetX: number

• shadowOffsetY: number

• shadowColor: Color3 objeto. Color3 los objetos almacenan un RBG color como tres números de 0 a 1.

TextShape.create(sign, {
	text: 'Text with shadow',
	shadowColor: { r: 1, g: 0, b: 0 },
	shadowOffsetY: 1,
	shadowOffsetX: -1,
})

Las letras del texto también pueden tener un contorno en un color diferente que rodee su perímetro.

• outlineWidth: number. Qué tan ancho será el contorno del texto, en todas las direcciones, como un número de 0 a 1. Por defecto 0, lo que lo hace invisible.

• outlineColor: Color3 objeto. Color3 los objetos almacenan un RBG color como tres números de 0 a 1.

Múltiples líneas

Si quieres que tu texto abarque múltiples líneas, usa \n como parte de la cadena. El siguiente ejemplo tiene dos líneas de texto separadas:

TextShape.create(sign, {
	text: 'This is one line. \nThis is another line',
})

También puedes configurar las siguientes propiedades relacionadas con textos de múltiples líneas:

• lineCount: number. Cuántas líneas de texto encajar como máximo en el cuadro de texto. Por defecto 1. El textWrapping propiedad debe ser true para usar más de una línea.

• lineSpacing: string. Cuánto espacio entre cada línea, expresado como una cadena. Por ejemplo "30px".