# Fundo da 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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) valor.

{% hint style="info" %}
**💡 Tip**: Torne uma entidade semi-transparente definindo o 4º valor do `Color4` para menos de 1.
{% endhint %}

* `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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/materials.md#using-textures).

  * `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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/materials.md#texture-scaling). (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](https://github.com/decentraland/docs/blob/main/creator/sdk7/README.md)). (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](#nine-slice-textures).
* `avatarTexture`: Exibe uma miniatura de perfil de avatar, baseada em um ID de avatar. Veja \[Avatar Portraits]\(([Ver documentação](https://github.com/decentraland/docs/blob/main/creator/sdk7/README.md)).
* `textureSlices`: Determina as margens a serem usadas ao utilizar o modo de textura nine-slice, veja [texturas nine-slice](#nine-slice-textures). Defina um número menor que 1, como uma fração da largura ou altura total da imagem.

Cor simples:

***arquivo ui.tsx:***

```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:***

```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 os trechos a seguir nesta página presumem que você tem um `.ts` similar ao acima, executando a `ReactEcsRenderer.setUiRenderer()` função.
{% endhint %}

Padrão de textura repetido:

```ts
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](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) 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.

```ts
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.

```ts
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.

```ts
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.

```ts
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](https://en.wikipedia.org/wiki/9-slice_scaling) 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](https://en.wikipedia.org/wiki/9-slice_scaling#/media/File:Traditional_scaling_vs_9-slice_scaling.svg)):

![
](https://2402076176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e2ac050bd4fa39a8b191cd36e282279f43613058%2F9-slice.png?alt=media)

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

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