Imagen - Guía del usuario de Lumberyard

Imagen

Puede utilizar un componente Image (Imagen) para añadir una tonalidad o textura a un elemento.

Para ver ejemplos en el juego de lienzos terminados con componentes Image (Imagen)

  1. En Lumberyard Editor, en Proyecto de ejemplos, abra el nivel UiFeatures.

  2. Pulse Ctrl+G para jugar el juego y, a continuación, elija Components (Componentes) y, a continuación, Visual Components (Componentes visuales) y, finalmente, Image (Imagen).

    Puede ver ejemplos de tipos de imagen como, por ejemplo, en sectores, estiradas, fijas, en mosaico, estiradas para ajustarse y estiradas para rellenarse.

  3. Pulse Esc para salir del juego.

Para ver los mismos lienzos en UI Editor, vaya al directorio lumberyard_version\dev\Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Image.

Puede abrir los siguientes lienzos:

  • ColorTest.uicanvas

  • ImageTypes.uicanvas

Utilice el panel Properties (Propiedades) de UI Editor (Editor de Interfaz de usuario) para configurar las siguientes opciones de configuración para el componente Image (Imagen).

Configuración de imágenes
Nombre Descripción
SpriteType (Tipo de sprite)

Seleccione una de estas opciones:

  • Sprite/Texture asset (Recurso de sprite/textura): la imagen muestra el activo especificado para Sprite path (Ruta de sprite).

  • Render target (Destino de representación): la imagen muestra el destino de representación especificado en Render target name (Nombre de destino de representación).

Sprite path (Ruta de sprite)

Haga clic en el icono de examinar (...) y seleccione el archivo que corresponda.

Haga clic en el icono de apertura (flecha) junto a Sprite path (Ruta de sprite) para abrir el Sprite Editor.

Render target name (Nombre de destino de representación)

Escriba un nombre para el destino de representación y pulse Intro.

Para obtener más información, consulte Adición de un destino de representación a un elemento de interfaz de usuario.

Índice

El índice de imagen de hoja de sprites que representará el componente.

Color

Haga clic en la muestra de color para seleccionar un color diferente.

Se muestra solo si SpriteType (Tipo de sprite) es Sprite/Texture asset (Recurso de sprite/textura) y la imagen se ha configurado como una hoja de sprites utilizando Sprite Editor.

Alpha (Alfa)

Utilice el control deslizante para elegir un valor alfa entre 0 y 1.

Image type (Tipo de imagen)

Seleccione una de estas opciones:

  • Stretched (Estirada): estira la textura con el elemento sin mantener la relación de aspecto.

  • Sliced (Sectorizado): trata la textura como un sprite en nueve sectores.

  • Fixed (Fija): hace que la textura sea perfecta en términos de píxeles.

  • Tiled (En mosaico): confiere a la textura aspecto de mosaico para rellenar el elemento

  • Stretched to Fit (Estirar hasta ajustar): se ajusta en tamaño al mismo tiempo que mantiene la relación de aspecto.

  • Stretched to Fill (Estirar hasta rellenar): se ajusta para rellenar el espacio al mismo tiempo que mantiene la relación de aspecto.

Blend Mode (Modo de mezcla)

Seleccione una de estas opciones:

  • Normal: utiliza el valor alfa para interpolar los colores entre los elementos.

  • Add (Agregar): combina colores entre los elementos agregando (aclarando) los valores de color.

  • Screen (Pantalla): combina colores mediante colores de fuente inversa, lo que da como resultado un color más claro.

  • Darken (Oscurecer): elige el canal de color más oscuro cuando se combinan elementos.

  • Lighten (Aclarar): elige el valor del canal de color más claro cuando se combinan elementos.

Fill Type (Tipo de relleno)

Seleccione una de estas opciones:

  • None (Ninguno): muestra la imagen completa.

  • Linear (Lineal): usa el valor de Fill Amount (Cantidad de relleno) para rellenar la imagen linealmente desde un límite al límite opuesto.

  • Radial: utiliza el valor de Fill Amount (Cantidad de relleno) para rellenar la imagen radialmente 360 grados alrededor del centro de la imagen.

  • Radial Corner (Esquina radial): utiliza el valor de Fill Amount (Cantidad de relleno) para rellenar la imagen radialmente 90 grados alrededor de una esquina de la imagen.

  • Radial Edge: utiliza el valor de Fill Amount (Cantidad de relleno) para rellenar la imagen radialmente 180 grados alrededor del punto medio de un límite de la imagen.

Fill Amount (Cantidad de relleno)

La cantidad de la imagen que se va a rellenar, de 0.00 a 1.00.

Fill Start Angle (Ángulo inicial de relleno)

El ángulo de inicio para el relleno, medido en grados, hacia la derecha desde la posición vertical.

Corner Fill Origin (Origen de esquina de relleno)

La esquina inicial desde la que se rellena la imagen.

Seleccione una de estas opciones:

  • Top Left (Arriba a la izquierda)

  • Top Right (Arriba a la derecha)

  • Bottom Left (Abajo a la izquierda)

  • Bottom Right (Abajo a la derecha)

Edge Fill Origin (Origen de borde de relleno)

El límite a partir del cual se rellena la imagen de manera circular (esquina radial) o lineal.

Seleccione una de estas opciones:

  • Left

  • Top

  • Right

  • Bottom

Fill Clockwise (Rellenar en sentido de las agujas del reloj)

Si se selecciona, la imagen se rellena radialmente hacia la derecha alrededor del centro de relleno.

Fill Center (Rellenar en centro)

Si se selecciona, queda visible el segmento central de un sprite con modificación en el tamaño de los sectores.