Fondo de UI

Establece un fondo y borde de una entidad 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 ellos son opcionales:

• color: El color a usar en la entidad, como un Color4 valor.

💡 Consejo: Hacer una entidad semitransparente estableciendo el cuarto valor del Color4 a menos de 1.

• 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 en materials on 3D entities.

  • src: La ruta al archivo de imagen que se usará como textura. (string)

  • filterMode: (opcional) Determina cómo se estiran o comprimen los píxeles de la textura cuando se renderiza. Véase Texture Scaling. (FilterMode = 'point' | 'bi-linear' | 'tri-linear')

  • wrapMode: (opcional) Determina cómo se repite una textura sobre una entidad. Esto acepta un valor del TextureWrapMode enum. Véase [Texture Wrapping]((Ver documentación). (WrapMode = 'repeat' | 'clamp' | 'mirror' | 'mirror-once')

  Consejo: Puedes combinar ambas textura y color propiedades en un solo uiBackground component 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 recortarse 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.

• avatarTexture: Mostrar una miniatura del perfil de un avatar, basada en un ID de avatar. Véase [Avatar Portraits]((Ver documentación).

• textureSlices: Determina los márgenes a usar cuando se utiliza el modo de textura nine-slice, ver 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:

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:

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

export function main() {
    ReactEcsRenderer.setUiRenderer(uiMenu)
}

📔 Nota: Todos los fragmentos siguientes en esta página asumen que tienes un .ts similar al anterior, ejecutando la ReactEcsRenderer.setUiRenderer() función.

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

Bordes

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

• borderColor: El color a usar en la entidad, como un Color4 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 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.

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 se puede establecer con valores diferentes para cada lado de la entidad.

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 completamente transparente y 1 completamente 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: "This text is transparent too",
          fontSize: 40
        }}
      />
   </UiEntity>
)

El valor de opacidad afecta a todos los hijos de un UiEntity, aplicando transparencia a los 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.

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

Texturas nine-slice

Puedes usar Escalado 9-slice 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):

En esta imagen vemos la textura original (arriba-izquierda) y el resultado de escalarla de forma tradicional (arriba-derecha); observa cómo las esquinas se deforman. Debajo de eso, vemos la textura segmentada en 9 partes (abajo-izquierda), y luego el resultado de estirar la imagen según el método 9-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 estirado 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.

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