Fondo de UI

Establece un fondo y borde de una UI entity.

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

💡 Tip: Haz una entidad semitransparente ajustando el 4º 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 de materials on 3D entities.

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

• avatarTexture: Muestra una miniatura del perfil del 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, véase 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, { virtualWidth: 1920, virtualHeight: 1080 })
}

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

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.

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.

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.

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

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