Texto de UI

Escreva texto em entidades de 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.

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

📔 Nota: O fontSize não é afetado pelo tamanho de sua entidade ou entidades pai.

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:

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:

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

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

📔 Nota: Todos os trechos a seguir nesta página presumem que você tem um .ts similar ao acima, executando a ReactEcsRenderer.setUiRenderer() função.

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.

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.

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.

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"

💡 Tip: Esta função funciona de forma similar ao CSS calc() função.

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.

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

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

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.