Texto

Cómo añadir texto a tu escena

Añade 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 en el mundo y UIs que existen en el espacio 3D de la escena, no para la UI HUD 2D del jugador.

Para añadir texto como una etiqueta en una entidad existente, una buena práctica es crear una segunda entidad que tenga el TextShape componente y establecerla como hija de la otra entidad.

Usa 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 Scene Editor. Luego puedes configurar todos los campos disponibles en la UI de 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 su eje, esto hará 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 mediante

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

Consulta Imports para saber cómo manejarlos 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 texto campo.

Si quieres cambiar la cadena mostrada por el componente, puedes hacerlo en cualquier momento cambiando el texto 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 se muestran algunas de las más comunes:

• font: Valor del enum Font.

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

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

• Font.F_SERIF

• Font.F_MONOSPACE

Por defecto se usa Font.F_SANS_SERIF.

TextShape.create(sign, {
	text: 'Hello World',
	textColor: { r: 1, g: 0, b: 0, a: 1 },
	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 del texto y relleno

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

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

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

• alto: 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.

💡 Consejo: Si un texto está pensado para flotar en el espacio, es una buena idea añadir un Billboard componente para que el texto gire y siempre mire al jugador y sea legible.

Propiedades de sombra y contorno del texto

El texto no tiene sombra por defecto, pero puedes configurar los siguientes valores para darle un efecto similar a una sombra.

• shadowBlur: number

• shadowOffsetX: number

• shadowOffsetY: number

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

TextShape.create(sign, {
	text: 'Texto con sombra',
	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 objetos almacenan un RBG color como tres números de 0 a 1.

Varias líneas

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

TextShape.create(sign, {
	text: 'Esta es una línea. \nEsta es otra línea',
})

También puedes configurar las siguientes propiedades relacionadas con textos con varias líneas:

• lineCount: number. Cuántas líneas de texto caben como máximo en el cuadro de texto. Si no se configura, no hay límite en el número de líneas. La textWrapping debe estar true habilitada para usar más de una línea.

• lineSpacing: number. Cuánto espacio hay entre cada línea.