Texto de UI

Escribe texto en entidades de UI.

Añade texto a tu UI creando un Label .

A Label Entity tiene los siguientes campos que se pueden configurar:

• value: La cadena que se mostrará

• fontSize: El tamaño del texto, como un número.

  NOTA: El fontSize no se ve afectado por el tamaño de su entity o de sus parent entities.

• color: El color del texto, como un Color4.

• font: La font que se usará, tomando un valor del Font enum. Los valores compatibles son:

  • F_SERIF

  • F_SANS_SERIF (predeterminado)

  • 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 dentro del ancho máximo permitido. Puede tomar las cadenas 'wrap' (predeterminado) o 'nowrap'.

📔 Nota: La fontSize no se ve afectado por el tamaño de su entity o de sus parent entities.

A Label Entity también puede tener otros componentes comunes que se encuentran en otros tipos de UI entities, 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 siguientes fragmentos en esta página asumen que tienes un .ts similar al anterior, ejecutando la función ReactEcsRenderer.setUiRenderer() .

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 textWrap propiedad en 'nowrap'.

También puedes forzar un salto de línea añadiendo 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 ningún height o width explícito en el uiTransform del contenedor, el contenedor usará el valor auto, que se ajusta para que todo el texto quepa. Puedes establecer un maxWidth y un maxHeight para asegurarte de que no exceda ciertos límites. También puedes usar minWidth y minHeight para asegurarte de 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 adaptable

Usa la scaleFontSize() function para proporcionar valores de fuente que se ajusten al tamaño de pantalla del jugador. Al configurar 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() function requiere dos parámetros:

• fontSize: El tamaño base de fuente que se usará.

• scaleUnit (opcional): El factor de escala. Esto determina si el texto debe ajustarse según el ancho o la altura de la pantalla, y un multiplicador de cuánto adaptarse. Predeterminado: "0.39vh". Los valores pueden ser:

  • Number: Un número simple; en este caso se interpreta como relativo a width

  • Cadena que termina en vw: Esto hace que el número sea relativo al ancho de la vista. Por ejemplo "0.8vw"

  • Cadena que termina en vh: Esto hace que el número sea relativo a la altura de la vista. Por ejemplo "0.8vh"

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

El valor de scaleUnit es un porcentaje del ancho o la altura de la ventana. Así que scaleUnit de "100vw" es el 100% del ancho de la pantalla, un valor de "0.5vw" es el 0.5% del ancho de la pantalla.

La fórmula que scaleFontSize() sigue consiste en multiplicar el ancho o la altura de la pantalla por scaleUnit y sumar a eso el fontSize pasado en el primer parámetro.

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

Por ejemplo, en el fragmento de abajo se usa un scaleUnit valor de 0.8. Si el ancho de la pantalla es 1280px eso dará como resultado 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)}
    }}
  />
)

💡 Consejo: Si no tienes diferentes tamaños de pantalla para probar, puedes intentar usar el Web Explorer y redimensionar la ventana donde ejecutas la vista previa. El texto se ajustará al instante cada vez que cambies la ventana.

Como alternativa a usar la scaleFontSize() function, también puedes ajustar el tamaño de fuente al tamaño de pantalla usando los métodos descritos en Responsive UI Size.