Texto

Como adicionar texto à sua cena

Adicione texto a uma cena usando o TextShape componente. Este texto fica em uma posição

Texto no Decentraland suporta todos os utf8 caracteres, isso inclui caracteres orientais e especiais.

📔 Nota: Este componente é útil para rótulos no mundo e UIs que existem no espaço 3D da cena, não para a HUD 2D do jogador.

O TextShape componente é mutuamente exclusivo com outros componentes de shape como formas primitivas e modelos 3D glTF, veja Shape components para mais detalhes.

Para adicionar texto como um rótulo em uma entidade existente, você cria uma segunda entidade que tenha o TextShape componente e a define como filha da outra entidade.

Use o Scene Editor no Creator Hub

A maneira mais fácil de colocar texto no mundo é adicionar um Text Smart item visualmente no Scene Editor. Você pode então definir todos os campos disponíveis na UI do Scene Editor.

Crie um componente de texto

O exemplo a seguir mostra como criar um TextShape componente e adicioná-lo a uma entidade via código.

const sign = engine.addEntity()

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

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

📔 Nota: Se a entidade com o componente de texto for filha de outra entidade, então será afetada pela escala do pai. Se o pai for escalado de forma desigual ao longo de seus eixos, isso fará com que o texto também seja esticado ou comprimido.

📔 Nota: TextShape componentes não são clicáveis. PointerEvents componentes não são ativados quando usados em entidades que têm um TextShape component.

📔 Nota: TextShape devem ser importados via

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

Veja Imports para como lidar com estes facilmente.

Altere o valor do texto

Ao criar um novo componente de texto, você atribui a ele uma string para exibir. Essa string é armazenada em texto campo.

Se você quiser alterar a string exibida pelo componente, pode fazê-lo a qualquer momento alterando o texto campo em um versão mutável do componente.

const mutableText = TextShape.getMutable(myEntity)

mutableText.text = 'new string'

Propriedades básicas do texto

O TextShape o componente tem várias propriedades que podem ser definidas para estilizar o texto. Abaixo estão algumas das mais comuns:

• font: Valor do enum Font.

• fontSize: maxDistance. Uma entidade com fonte 10 tem 1 metro de altura.

• textColor: Color4 objeto. Color4 objetos armazenam um RBG cor como três números de 0 a 1, mais alpha para transparência. Veja tipos de cor para mais detalhes.

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

Fonts

Text shapes podem usar fontes do enum Font. Este enum atualmente inclui as seguintes fontes:

• Font.F_SANS_SERIF

• Font.F_SERIF

• Font.F_MONOSPACE

Por padrão usa ele 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: Atualmente, todas as fontes são renderizadas como Sans Serif. Este é um problema conhecido a ser corrigido no futuro.

💡 Tip: Se estiver usando VS studio ou outro IDE, digite Font. e você deverá ver uma lista de sugestões com todas as fontes disponíveis.

Propriedades de alinhamento e padding do texto

O TextShape o componente cria uma caixa de texto que tem um tamanho, padding, etc.

• textAlign: Selecione um valor do TextAlignMode enum. Valores possíveis incluem todas as combinações entre vertical (top, bottom, center) e horizontal (left, right, center) alinhamento.

• width: maxDistance. A largura da caixa de texto.

• height: maxDistance. A altura da caixa de texto.

• paddingTop: maxDistance. Espaço entre o texto e o contorno da caixa de texto.

• paddingRight: maxDistance. Espaço entre o texto e o contorno da caixa de texto.

• paddingBottom: maxDistance. Espaço entre o texto e o contorno da caixa de texto.

• paddingLeft: maxDistance. Espaço entre o texto e o contorno da caixa de texto.

• zIndex: maxDistance. Útil quando múltiplas entidades planas ocupam o mesmo espaço, determina qual mostrar na frente.

💡 Tip: Se um texto deve flutuar no espaço, é uma boa ideia adicionar um Billboard componente para que o texto gire para sempre encarar o jogador e ser legível.

Propriedades de sombra e contorno do texto

O texto não tem sombra por padrão, mas você pode definir os seguintes valores para dar um efeito semelhante a sombra.

• shadowBlur: maxDistance

• shadowOffsetX: maxDistance

• shadowOffsetY: maxDistance

• shadowColor: Color3 objeto. Color3 objetos armazenam um RBG cor como três números de 0 a 1.

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

As letras no texto também podem ter um contorno em uma cor diferente envolvendo seu perímetro.

• outlineWidth: maxDistance. Quão larga será a borda do texto, em todas as direções, como um número de 0 a 1. Por padrão 0, o que a torna invisível.

• outlineColor: Color3 objeto. Color3 objetos armazenam um RBG cor como três números de 0 a 1.

Múltiplas linhas

Se você quiser que seu texto ocupe múltiplas linhas, use \n como parte da string. O exemplo a seguir tem duas linhas separadas de texto:

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

Você também pode definir as seguintes propriedades relacionadas a textos com múltiplas linhas:

• lineCount: maxDistance. Quantas linhas de texto cabem na caixa de texto como máximo. Por padrão 1. O textWrapping propriedade deve ser true para usar mais de uma linha.

• lineSpacing: string. Quanto espaço entre cada linha, expresso como uma string. Por exemplo "30px".