Text

Cómo agregar text a tu scene

Agregar texto a una escena usando el TextShape componente. Este texto se coloca 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 dentro del mundo y UIs que existen en el espacio 3D de la escena, no para la UI HUD 2D del jugador.

El TextShape componente es mutuamente excluyente con otros componentes de forma como las formas primitivas y los modelos 3D glTF, ver Shape components para más detalles.

Para agregar texto como una etiqueta en una entity existente, creas una segunda entity que tenga el TextShape componente y lo estableces como hijo de la otra entity.

Usa el Scene Editor en Creator Hub

La forma más fácil de colocar texto dentro del mundo es agregar 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 agregarlo a una entity 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 entity con el componente de texto es hija de otra entity, entonces se verá afectada por la escala del padre. Si el padre está escalado de forma desigual a lo largo de su eje, esto hará que el texto también se estire o comprima.

📔 Nota: TextShape los components no son clicables. PointerEvents los comopnents no se activan cuando se usan en entites que tienen un TextShape componente.

📔 Nota: TextShape deben importarse mediante

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

Consulta Imports para ver cómo manejar esto 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 text campo.

Si quieres cambiar la cadena mostrada por el componente, puedes hacerlo en cualquier momento cambiando el text campo en una versión mutable del componente.

const mutableText = TextShape.getMutable(myEntity)

mutableText.text = 'new string'

Propiedades básicas del texto

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

• font: Valor del enum Font.

• fontSize: number. Una entiy con font 10 mide 1 metro de alto.

• textColor: Color4 objeto. Color4 los objetos almacenan un RBG color como tres números de 0 a 1, más alpha para 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,
})

Fonts

Las formas de texto pueden usar fuentes del enum Font. Actualmente, este enum incluye las siguientes fuentes:

• Font.F_SANS_SERIF

• Font.F_SERIF

• Font.F_MONOSPACE

Por defecto usa Font.F_SANS_SERIF.

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

📔 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 o algún 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 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 alineación vertical (top, bottom, center) y horizontal (left, right, center).

• 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 entities planas ocupan el mismo espacio; determina cuál se muestra al frente.

💡 Consejo: Si un texto debe flotar en el espacio, es una buena idea agregar un Billboard component 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 similar a una 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 de un color diferente alrededor de 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.

Varias líneas

Si quieres que tu texto ocupe varias 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 varias líneas:

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

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