Texto de UI

Escribe texto en UI entities.

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.

• 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'.

📔 Nota: El fontSize no se ve afectado por el tamaño de su entidad o entidades padre.

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:

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:

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

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

📔 Nota: Todos los fragmentos siguientes en esta página asumen que tienes un .ts similar al anterior, ejecutando la ReactEcsRenderer.setUiRenderer() función.

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.

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.

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.

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"

💡 Tip: Esta función funciona de forma similar al CSS calc() función.

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.

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

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

💡 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.

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.