# Texto da UI

Adicione texto à sua UI criando um `Label` entidade engine.CameraEntity

A `Label` entidade tem os seguintes campos que podem ser configurados:

* `valor`: A string a ser exibida
* `fontSize`: O tamanho do texto, como um número.

  > NOTE: The `fontSize` não é afetado pelo tamanho de sua entidade ou entidades pai.
* `color`: A cor do texto, como um [Color4](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/essenciais-de-conteudo-3d/color-types).
* `font`: A fonte a ser usada, tomando um valor do `Font` enum. Valores suportados são:
  * `F_SERIF`
  * `F_SANS_SERIF` *(padrão)*
  * `F_MONOSPACE`
* `textAlign`: Como o texto se alinhará com seu pai. Ele recebe um valor do `TextAlingType` tipo. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Se o texto usa quebras de linha para garantir que caiba na largura máxima permitida. Pode receber as strings `'wrap'` (padrão) ou `'nowrap'`.

{% hint style="warning" %}
**📔 Nota**: O `fontSize` não é afetado pelo tamanho de sua entidade ou entidades pai.
{% endhint %}

A `Label` entidade também pode ter outros componentes comuns encontrados em outros tipos de entidades de UI, como `uiTransform` e `uiBackground`.

***arquivo ui.tsx:***

```ts
import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity uiTransform={{ width: 'auto', height: 'auto' }}>
		<Label
			value="This is a label"
			color={Color4.Red()}
			fontSize={29}
			font="F_SANS_SERIF"
			textAlign="top-left"
		/>
	</UiEntity>
)
```

***arquivo index.ts:***

```ts
import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
import { uiMenu } from './ui'

export function main() {
    ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 })
}
```

{% hint style="warning" %}
**📔 Nota**: Todos os trechos a seguir nesta página presumem que você tem um `.ts` similar ao acima, executando a `ReactEcsRenderer.setUiRenderer()` função.
{% endhint %}

Se uma linha de texto for longa demais para caber na largura atribuída, ou na largura máxima de seu contêiner, o texto continuará na linha seguinte. Você pode desabilitar isso alterando o valor do `textWrap` propriedade para `'nowrap'`.

Você também pode forçar uma quebra de linha adicionando explicitamente `\n` à string.

```ts
import { TextWrap } from "@dcl/sdk/ecs";
import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs'

export const uiMenu = () => (
	<UiEntity uiTransform={{ width: 700, height: 400 }}>
		<Label 
			value="Hello World!\nThis other bit is quite long. It probably won't fit in a single line, so it will include a line break somewhere.\nFourth line"
			textWrap= {`nowrap`} 
		/>
	</UiEntity>
)
```

Se nenhum `height` ou `width` explícito estiver definido no `uiTransform` do contêiner, o contêiner usará o valor `auto`, que se ajusta para caber todo o texto. Você pode definir um `maxWidth` e um `maxHeight` para garantir que não exceda certos limites. Você também pode usar `minWidth` e `minHeight` para garantir que o contêiner não fique pequeno demais, mesmo se o texto for mais curto.

```ts
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity
		uiTransform={{
			minWidth: 100,
			maxWidth: 300,
			height: 'auto',
			alignSelf: 'center',
			padding: 10,
		}}
		uiBackground={{
			color: Color4.Red(),
		}}
		uiText={{
			value: 'Hello world!',
			fontSize: 18,
		}}
	/>
)
```

## Tamanho de texto responsivo

Use o `scaleFontSize()` função para fornecer valores de fonte que se ajustam ao tamanho da tela do jogador. Ao definir a `fontSize` propriedade de uma entidade de UI de texto, passe esta função em vez de um único número.

```ts
import { scaleFontSize } from '@dcl/sdk/react-ecs'
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 'auto',
      height: 'auto',
      alignSelf: 'center',
      padding: 10,
    }}
    uiText={{
      value: 'Hello world!',
      fontSize={scaleFontSize(15)}
    }}
  />
)
```

O `scaleFontSize()` função requer dois parâmetros:

* `fontSize`: O tamanho base da fonte a ser usado.
* `scaleUnit` *(opcional)*: O fator de escala. Isso determina se o texto deve ser ajustado com base na largura ou na altura da tela, e um multiplicador para o quanto adaptar. Padrão: `"0.39vh"`. Valores podem ser:
  * *Number*: Um número simples, neste caso é interpretado como relativo a *width*
  * *String ending in **vw***: Isso torna o número relativo à largura da viewport. Por exemplo `"0.8vw"`
  * *String ending in **vh***: Isso torna o número relativo à altura da viewport. Por exemplo `"0.8vh"`

{% hint style="info" %}
**💡 Tip**: Esta função funciona de forma similar ao CSS `calc()` função.
{% endhint %}

O valor de `scaleUnit` é uma porcentagem da largura ou altura da janela. Então um `scaleUnit` que só tem um `"100vw"` é 100% da largura da tela, um valor de `"0.5vw"` é 0,5% da largura da tela.

A fórmula que `scaleFontSize()` segue é que multiplica a largura ou altura da tela pelo `scaleUnit` e adiciona a isso o `fontSize` passado no primeiro parâmetro.

```ts
fonte final = fontSize + (largura da tela * scaleUnit / 100 )
```

Por exemplo, no snippet abaixo usa um `scaleUnit` valor de 0.8. Se a largura da tela for *1280px* isso resultará em texto de tamanho **26.84**, tendo seguido a equação `15 + (1280 * 0.8 / 100)`.

```ts
import { scaleFontSize } from '@dcl/sdk/react-ecs'
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 'auto',
      height: 'auto',
      alignSelf: 'center',
      padding: 10,
    }}
    uiText={{
      value: 'Hello world!',
      fontSize={scaleFontSize(15, 0.8)}
    }}
  />
)
```

{% hint style="info" %}
**💡 Tip**: Se você não tiver diferentes tamanhos de tela para testar, pode tentar usar o Web Explorer e redimensionar a janela onde executa a pré-visualização. O texto se ajustará instantaneamente cada vez que você alterar a janela.
{% endhint %}

Como alternativa ao uso da `scaleFontSize()` função, você também pode ajustar o tamanho da fonte ao tamanho da tela usando os métodos descritos em [Responsive UI Size](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-positioning#responsive-ui-size).