Image - Guía del usuario de Lumberyard

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Image

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 conImageComponentes de

  1. En Lumberyard Editor, en elProyecto de ejemplosAbra 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 estos mismos lienzos enUI Editor, vaya a la.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:

  • Activo Sprite/Textura— La imagen muestra el activo especificado paraSprite path (Ruta de sprite)

  • Objetivo de representación— La imagen muestra el destino de representación que se especifica enRender 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:

  • EstiradoEstira la textura con el elemento sin mantener la relación de aspecto.

  • Cortado en rodajas— Trata la textura como un sprite en nueve porciones

  • Fixed— Hace que la textura sea perfecta en píxeles.

  • Tiled— Realiza mosaicos de la textura para rellenar el elemento

  • Estirado para adaptarseSe escala para ajustarse al mismo tiempo que mantiene la relación de aspecto

  • Extendido para rellenar: escala para rellenar 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

  • AddAdd: combina colores entre los elementos; para ello, añade (aclara) valores de color agrupados.

  • Screen— Combina colores mediante colores de fuente inversa, lo que da como resultado un color más claro

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

  • 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 toda la imagen

  • Lineal— UsosFill Amount (Cantidad de relleno)Para rellenar la imagen linealmente desde un límite al límite opuesto

  • Radial— UsosFill Amount (Cantidad de relleno)Para rellenar la imagen radialmente 360 grados alrededor del centro de la imagen

  • Radial corner— UsosFill Amount (Cantidad de relleno)Para rellenar la imagen radialmente 90 grados alrededor de una esquina de la imagen

  • Arista radial— UsosFill Amount (Cantidad de relleno)Valor 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.