# Fondo de UI

Las siguientes propiedades se usan para establecer un fondo y un borde en una entidad UI.

## Fondo

A `uiBackground` El componente Background da color o una textura al área de una entidad. Usa el tamaño y la posición definidos por el `uiTransform`.

Los siguientes campos se pueden configurar, todos son opcionales:

* `color`: El color a usar en la entidad, como un [Color4](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) valor.

{% hint style="info" %}
**💡 Tip**: Haz una entidad semitransparente ajustando el 4º valor del `Color4` a menos de 1.
{% endhint %}

* `textura`: La textura que se mostrará en la entidad, esto acepta un objeto con varios parámetros sobre la textura. Las mismas propiedades están disponibles que en las texturas de [materials on 3D entities](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/materials.md#using-textures).

  * `src`: La ruta al archivo de imagen a usar como textura. (string)

  * `filterMode`: *(opcional)* Determina cómo se estiran o comprimen los píxeles en la textura cuando se renderiza. Véase [Texture Scaling](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 cómo se repite una textura sobre una entidad. Esto toma un valor del `TextureWrapMode` enum. Véase \[Texture Wrapping]\(([Ver documentación](https://github.com/decentraland/docs/blob/main/creator/sdk7/README.md)). (WrapMode = 'repeat' | 'clamp' | 'mirror' | 'mirror-once')

  > Consejo: Puedes combinar ambas `textura` y `color` propiedades en un solo `uiBackground` componente para producir una textura tintada.
* `textureMode`: Selecciona cómo quieres que la textura se adapte al tamaño de la entidad a la que se aplica. (TextureMode = 'nine-slices' | 'center' | 'stretch') enum, que admite los siguientes valores:
  * `center`: La textura no se estira, se posiciona centrada en la entidad y partes de ella pueden ser recortadas dependiendo del tamaño de la entidad.
  * `stretch`: La textura se estira para cubrir toda la superficie de la entidad.
  * `nine-slices`: Partes de la textura se estiran para cubrir toda la superficie de la entidad, dejando los márgenes sin estirar. Véase [nine-slice textures](#nine-slice-textures).
* `avatarTexture`: Muestra una miniatura del perfil del avatar, basada en un ID de avatar. Véase \[Avatar Portraits]\(([Ver documentación](https://github.com/decentraland/docs/blob/main/creator/sdk7/README.md)).
* `textureSlices`: Determina los márgenes a usar cuando se utiliza el modo de textura nine-slice, véase [nine-slice textures](#nine-slice-textures). Establece un número menor que 1, como una fracción del ancho o alto total de la imagen.

Color simple:

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

***archivo 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 los fragmentos siguientes en esta página asumen que tienes un `.ts` similar al anterior, ejecutando la `ReactEcsRenderer.setUiRenderer()` función.
{% endhint %}

Patrón 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'
		}
	}}
  />
)
```

## Bordes

Algunas propiedades se usan para establecer un borde alrededor de una entidad UI. Estas propiedades existen en el `uiTransform` component. Cada una permite establecer un único valor para todos los lados del borde, o valores distintos para cada lado.

* `borderColor`: El color a usar en la entidad, como un [Color4](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) valor.
* `borderWidth`: El ancho del borde, como un número en píxeles. También admite valores en porcentajes, por ejemplo `borderWidth: '2%'` establecerá el ancho del borde en el 2% del ancho de la entidad.
* `borderRadius`: Usa esta propiedad para dar a las esquinas de la entidad un borde redondeado. Establece el radio de las esquinas en píxeles.

```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` y `borderRadius` también puede establecerse con valores diferentes para cada lado de la entidad.

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

## Opacidad

Usa la `opacity` propiedad en el `Transform` de un `UiEntity` para añadir transparencia a la entidad y a todos sus hijos. La propiedad opacity es un valor de 0 a 1, donde 0 es totalmente transparente y 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: "This text is transparent too",
          fontSize: 40
        }}
      />
   </UiEntity>
)
```

El valor de opacidad afecta a todos los hijos de una UiEntity, aplicando transparencia a colores de fondo, colores de texto e imágenes de fondo. Cuando tanto el padre como un hijo tienen valores de opacidad, la opacidad final del hijo es el producto de su propio valor y el del padre.

```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: "This text is even more transparent",
        fontSize: 40
      }}
    />
  </UiEntity>
)
```

## Nine-slice textures

Puedes usar [9-slice scaling](https://en.wikipedia.org/wiki/9-slice_scaling) con tus texturas, para asegurar que las esquinas y los márgenes no se estiren de forma desigual.

Con esta técnica popular, cortas una imagen en 9 segmentos, que se estirarán de diferentes maneras para preservar las proporciones de los márgenes y las esquinas. Por ejemplo, úsalo para definir fondos con esquinas redondeadas que se adapten fácilmente a cualquier tamaño. Considera la siguiente imagen (tomada de [Wikipedia](https://en.wikipedia.org/wiki/9-slice_scaling#/media/File:Traditional_scaling_vs_9-slice_scaling.svg)):

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

En esta imagen vemos la textura original (arriba-izquierda), y el resultado de escalarla de una forma tradicional (arriba-derecha); observa cómo las esquinas se deforman. Debajo de eso, vemos la textura segmentada en 9 porciones (abajo-izquierda), y luego el resultado de estirar la imagen según el método nine-slice (abajo-derecha).

Así es como se ve afectado cada segmento, usando la imagen anterior como referencia.

* El segmento 5 es la única parte de la imagen que se estira completamente en los ejes x e y.
* Los segmentos 1,3, 7 y 9 (las esquinas) no se estiran en absoluto.
* Los segmentos 2 y 8 solo se estiran horizontalmente
* Los segmentos 4 y 6 solo se estiran verticalmente.

Para usar el estiramiento nine-slice en una entidad, establece el `textureMode` a `BackgroundTextureMode.NINE_SLICES`. Opcionalmente también puedes establecer un ancho para el margen en cada lado en `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
      }
	}}
  />
)
```