# Texto 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. {% hint style="warning" %} **📔 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. {% endhint %} O `TextShape` componente é mutuamente exclusivo com outros componentes de shape como formas primitivas e modelos 3D glTF, veja [Shape components](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/shape-components.md) 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](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/interactivity/smart-items.md) visualmente no Scene Editor. Você pode então definir todos os campos disponíveis na UI do Scene Editor. ![](https://2402076176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e555db49c09743be8685fc9f249cfd2ab00480f0%2Ftext-smart-item.png?alt=media) ## Crie um componente de texto O exemplo a seguir mostra como criar um `TextShape` componente e adicioná-lo a uma entidade via código. ```ts const sign = engine.addEntity() Transform.create(sign, { position: Vector3.create(8, 1, 8), }) TextShape.create(sign, { text: 'Hello World', }) ``` {% hint style="warning" %} **📔 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. {% endhint %} {% hint style="warning" %} **📔 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. {% endhint %} {% hint style="warning" %} **📔 Nota**: `TextShape` devem ser importados via > `import { TextShape } from "@dcl/sdk/ecs"` Veja [Imports](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/getting-started/coding-scenes.md#imports) para como lidar com estes facilmente. {% endhint %} ## 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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/programming-patterns/mutable-data.md) do componente. ```ts 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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) para mais detalhes. ```ts 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`. ```ts TextShape.create(sign, { text: 'Hello World', textColor: { r: 1, g: 0, b: 0 }, fontSize: 5, font: Font.F_SANS_SERIF, }) ``` {% hint style="warning" %} **📔 Nota**: Atualmente, todas as fontes são renderizadas como Sans Serif. Este é um problema conhecido a ser corrigido no futuro. {% endhint %} {% hint style="info" %} **💡 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. {% endhint %} ## 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. {% hint style="info" %} **💡 Tip**: Se um texto deve flutuar no espaço, é uma boa ideia adicionar um [`Billboard` componente](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/entity-positioning.md#face-the-user) para que o texto gire para sempre encarar o jogador e ser legível. {% endhint %} ## 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. ```ts 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: ```ts 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".