Fundo de UI

Defina um fundo e borda de uma entidade de UI.

As seguintes propriedades são usadas para definir um fundo e uma borda em uma entidade UI.

Fundo

A uiBackground o componente fornece cor ou uma textura à área de uma entidade. Ele usa o tamanho e a posição definidos pelo uiTransform.

Os seguintes campos podem ser configurados, todos são opcionais:

• color: A cor a ser usada na entidade, como um Color4 valor.

💡 Tip: Torne uma entidade semi-transparente definindo o 4º valor do Color4 para menos de 1.

• textura: A textura a ser exibida na entidade, isto recebe um objeto com vários parâmetros sobre a textura. As mesmas propriedades estão disponíveis como em texturas em materiais em entidades 3D.

  • src: O caminho para o arquivo de imagem a ser usado como textura. (string)

  • filterMode: (opcional) Determina como os pixels na textura são esticados ou comprimidos quando renderizados. Veja Escalonamento de Textura. (FilterMode = 'point' | 'bi-linear' | 'tri-linear')

  • wrapMode: (opcional) Determina como uma textura é aplicada em mosaico a uma entidade. Isto recebe um valor do TextureWrapMode enum. Veja [Texture Wrapping]((Ver documentação). (WrapMode = 'repeat' | 'clamp' | 'mirror' | 'mirror-once')

  Dica: Você pode combinar ambas as textura e color propriedades em um único uiBackground componente para produzir uma textura tingida.

• textureMode: Seleciona como você quer que a textura se adapte ao tamanho da entidade à qual está aplicada. (TextureMode = 'nine-slices' | 'center' | 'stretch') enum, que suporta os seguintes valores:

  • center: A textura não é esticada, é posicionada centralizada na entidade e partes dela podem ser cortadas dependendo do tamanho da entidade.

  • stretch: A textura é esticada para cobrir toda a superfície da entidade.

  • nine-slices: Partes da textura são esticadas para cobrir toda a superfície da entidade, deixando margens não esticadas. Veja texturas nine-slice.

• avatarTexture: Exibe uma miniatura de perfil de avatar, baseada em um ID de avatar. Veja [Avatar Portraits]((Ver documentação).

• textureSlices: Determina as margens a serem usadas ao utilizar o modo de textura nine-slice, veja texturas nine-slice. Defina um número menor que 1, como uma fração da largura ou altura total da imagem.

Cor simples:

arquivo ui.tsx:

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400
    }}
    uiBackground={{
		color: Color4.create(0.5, 0.8, 0.1, 0.6)
	}}
  />
)

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.

Padrão de textura repetido:

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400
    }}
    uiBackground={{
		textureMode: 'center'
		texture: {
			src: "images/brick-wall-texture.png",
			wrapMode: 'repeat'
		}
	}}
  />
)

Bordas

Algumas propriedades são usadas para definir uma borda ao redor de uma entidade UI. Essas propriedades existem no uiTransform componente. Cada uma permite definir um único valor para todos os lados da borda, ou valores diferentes para cada lado.

• borderColor: A cor a ser usada na entidade, como um Color4 valor.

• borderWidth: A largura da borda, como um número em pixels. Também suporta valores em porcentagem, por exemplo borderWidth: '2%' definirá a largura da borda como 2% da largura da entidade.

• borderRadius: Use esta propriedade para dar às bordas da entidade um contorno arredondado. Ela define o raio dos cantos em pixels.

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400,
      borderColor: Color4.Red(),
      borderWidth: 4,
      borderRadius: 10
    }}
  />
)

borderWidth, borderColor e borderRadius também pode ser definido com valores diferentes para cada lado da entidade.

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400,
      borderColor: { top: Color4.White(), left: Color4.Red(), right: Color4.Blue(), bottom: Color4.Gray() },
      borderRadius: { topLeft: 20, topRight: 20, bottomLeft: 20, bottomRight:0 },
      borderWidth: { top: 3, left: 2, right: 3, bottom: 4 }
    }}
  />
)

Opacidade

Use o opacity propriedade no Transform de um UiEntity para adicionar transparência à entidade e a todos os seus filhos. A propriedade opacity é um valor de 0 a 1, onde 0 é totalmente transparente e 1 totalmente opaco.

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400,
      opacity: 0.7
    }}
    uiBackground={{ color: Color4.Green() }}
  >
    <UiEntity
        uiTransform={{
          width: 100,
          height: 30,
        }}
        uiText={{
          value: "Este texto também é transparente",
          fontSize: 40
        }}
      />
   </UiEntity>
)

O valor de opacidade afeta todos os filhos de um UiEntity, aplicando transparência a cores de fundo, cores de texto e imagens de fundo. Quando tanto o pai quanto um filho têm valores de opacidade, a opacidade final do filho é o produto do seu próprio valor pelo do pai.

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 700,
      height: 400,
      opacity: 0.7
    }}
    uiBackground={{ color: Color4.Green() }}
  >
    <UiEntity
      uiTransform={{
        width: 100,
        height: 30,
        opacity: 0.7
      }}
      uiText={{
        value: "Este texto é ainda mais transparente",
        fontSize: 40
      }}
    />
  </UiEntity>
)

Texturas nine-slice

Você pode usar Escalonamento 9-slice com suas texturas, para garantir que cantos e margens não sejam esticados de forma desigual.

Com esta técnica popular, você divide uma imagem em 9 segmentos, que serão esticados de diferentes maneiras para preservar as proporções das margens e cantos. Por exemplo, use isso para definir fundos com cantos arredondados que se adaptam facilmente a qualquer tamanho. Considere a imagem a seguir (emprestada de Wikipedia):

Nesta imagem vemos a textura original (canto superior esquerdo) e o resultado de escalá-la de maneira tradicional (canto superior direito); note como os cantos ficam deformados. Abaixo disso, vemos a textura segmentada em 9 fatias (canto inferior esquerdo) e então o resultado de esticar a imagem de acordo com o método 9-slice (canto inferior direito).

Veja como cada segmento é afetado, usando a imagem acima como referência.

• O segmento 5 é a única parte da imagem que é totalmente esticada nos eixos x e y.

• Os segmentos 1, 3, 7 e 9 (os cantos) não são esticados de forma alguma.

• Os segmentos 2 e 8 são esticados apenas horizontalmente

• Os segmentos 4 e 6 são esticados apenas verticalmente.

Para usar o esticamento nine-slice em uma entidade, defina o textureMode para BackgroundTextureMode.NINE_SLICES. Opcionalmente você também pode definir uma largura para a margem em cada lado em textureSlices.

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

export const uiMenu = () => (
  <UiEntity
    uiTransform={{ width: 700, height: 400 }}
    uiBackground={{
      textureMode: 'nine-slices',
      texture: {
        src: 'images/rounded_alpha_square.png'
      },
      textureSlices: {
        top: 0.2,
        bottom: 0.2,
        left: 0.2,
        right: 0.2
      }
	}}
  />
)