# Texto de UI

Agrega texto a tu UI creando un `Label` entity.

A `Label` entity tiene los siguientes campos que se pueden configurar:

* `valor`: La cadena a mostrar
* `fontSize`: El tamaño del texto, como un número.

  > NOTA: El `fontSize` no se ve afectado por el tamaño de su entidad o entidades padre.
* `color`: El color del texto, como un [Color4](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/conceptos-esenciales-de-contenido-3d/color-types).
* `font`: La fuente a usar, tomando un valor del `Font` enum. Los valores compatibles son:
  * `F_SERIF`
  * `F_SANS_SERIF` *(por defecto)*
  * `F_MONOSPACE`
* `textAlign`: Cómo se alineará el texto con su padre. Toma un valor del `TextAlingType` type. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Si el texto usa saltos de línea para asegurarse de que quepa en el ancho máximo permitido. Puede tomar las cadenas `'wrap'` (por defecto) o `'nowrap'`.

{% hint style="warning" %}
**📔 Nota**: El `fontSize` no se ve afectado por el tamaño de su entidad o entidades padre.
{% endhint %}

A `Label` entity también puede tener otros componentes comunes que se encuentran en otros tipos de entidades UI, como `uiTransform` y `uiBackground`.

***archivo 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>
)
```

***archivo 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 los fragmentos siguientes en esta página asumen que tienes un `.ts` similar al anterior, ejecutando la `ReactEcsRenderer.setUiRenderer()` función.
{% endhint %}

Si una línea de texto es demasiado larga para caber en el ancho asignado, o en el ancho máximo de su contenedor, el texto continuará en la siguiente línea. Puedes desactivar esto cambiando el valor de la `textWrap` propiedad a `'nowrap'`.

También puedes forzar un salto de línea agregando explícitamente `\n` a la cadena.

```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>
)
```

Si no se establece explícitamente `height` o `width` se establece en el `uiTransform` del contenedor, el contenedor usará el valor `auto`, que se ajusta para encajar todo el texto. Puedes establecer un `maxWidth` y un `maxHeight` para asegurarte de que no exceda ciertos límites. También puedes usar `minWidth` y `minHeight` para asegurar que el contenedor no se haga demasiado pequeño, incluso si el texto es más corto.

```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,
		}}
	/>
)
```

## Tamaño de texto responsive

Usa la `scaleFontSize()` función para proporcionar valores de fuente que se ajusten al tamaño de pantalla del jugador. Al establecer la `fontSize` propiedad de una entidad UI de texto, pasa esta función en lugar de un solo 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)}
    }}
  />
)
```

El `scaleFontSize()` la función requiere dos parámetros:

* `fontSize`: El tamaño de fuente base a utilizar.
* `scaleUnit` *(opcional)*: El factor de escala. Esto determina si el texto debe ajustarse en función del ancho o la altura de la pantalla, y un multiplicador de cuánto adaptar. Predeterminado: `"0.39vh"`. Los valores pueden ser:
  * *Number*: Un número simple; en este caso se interpreta como relativo a *width*
  * *String ending in **vw***: Esto hace que el número sea relativo al ancho de la vista. Por ejemplo `"0.8vw"`
  * *String ending in **vh***: Esto hace que el número sea relativo a la altura de la vista. Por ejemplo `"0.8vh"`

{% hint style="info" %}
**💡 Tip**: Esta función funciona de forma similar al CSS `calc()` función.
{% endhint %}

El valor de `scaleUnit` es un porcentaje del ancho o la altura de la ventana. Entonces un `scaleUnit` de `"100vw"` es 100% del ancho de la pantalla, un valor de `"0.5vw"` es 0.5% del ancho de la pantalla.

La fórmula que `scaleFontSize()` sigue es que multiplica el ancho o la altura de la pantalla por el `scaleUnit` y le suma el `fontSize` pasado en el primer parámetro.

```ts
fuente final = fontSize + (ancho de pantalla * scaleUnit / 100 )
```

Por ejemplo, en el fragmento de abajo usa un `scaleUnit` valor de 0.8. Si el ancho de la pantalla es *1280px* eso resultará en un texto de tamaño de **26.84**, habiendo seguido la ecuación `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**: Si no tienes diferentes tamaños de pantalla para probar, puedes intentar usar el Web Explorer y cambiar el tamaño de la ventana donde ejecutas la vista previa. El texto se ajustará instantáneamente cada vez que cambies la ventana.
{% endhint %}

Como alternativa a usar la `scaleFontSize()` función, también puedes ajustar el tamaño de la fuente al tamaño de la pantalla usando los métodos descritos en [Responsive UI Size](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/ui-positioning#responsive-ui-size).