Texto

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 soporta 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 2D HUD del jugador.

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

Para añadir texto como etiqueta en una entidad existente, creas una segunda entidad que tenga el TextShape componente y la estableces 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 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 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 comprima.

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

📔 Nota: TextShape deben importarse vía

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

Ver Imports para ver 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 campo text campo.

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

const mutableText = TextShape.getMutable(myEntity)

mutableText.text = 'new string'

Propiedades básicas de texto

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

• font: Valor del enum Font.

• fontSize: número. 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 Text shapes 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 utiliza 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.

💡 Tip: 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: número. El ancho del cuadro de texto.

• height: número. La altura del cuadro de texto.

• paddingTop: número. Espacio entre el texto y el contorno del cuadro de texto.

• paddingRight: número. Espacio entre el texto y el contorno del cuadro de texto.

• paddingBottom: número. Espacio entre el texto y el contorno del cuadro de texto.

• paddingLeft: número. Espacio entre el texto y el contorno del cuadro de texto.

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

💡 Tip: Si un texto está pensado para flotar 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 similar a sombra.

• shadowBlur: número

• shadowOffsetX: número

• shadowOffsetY: número

• 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 en el texto también pueden tener un contorno de un color diferente alrededor de su perímetro.

• outlineWidth: número. Qué ancho tendrá 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: número. 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 hay entre cada línea, expresado como una cadena. Por ejemplo "30px".