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

ScrollBox

Puede utilizar un componente ScrollBox (Cuadro de desplazamiento) para presentar contenido (por ejemplo, imágenes o texto) dentro de un área en la que el usuario se pueda desplazar.

Este componente se suele utilizar con un componente de máscara, que oculta el contenido fuera de la zona enmascarada.

Para ver ejemplos en el juego de lienzos terminados con el componente ScrollBox (Cuadro de desplazamiento), abra el nivel UiFeatures en el proyecto SamplesProject. Pulse Ctrl+G para reproducir el juego y, a continuación, elija Components (Componentes), Interactable Components (Componentes interactuables) y ScrollBox (Cuadro de desplazamiento). Puede ver ejemplos de diferentes opciones de desplazamiento, opciones de ajuste, interacciones entre cuadros de desplazamiento y otros componentes y cuadros de desplazamiento anidados. Pulse Esc para salir del juego.

Para ver estos mismos lienzos enUI Editor, vaya a la.\Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\ScrollBox. Puede abrir los siguientes lienzos:

  • Interactions.uicanvas— Ejemplos de interacciones entre cuadros de desplazamiento y otros componentes interactivos

  • Nested.uicanvas— Ejemplos de cuadros de desplazamiento anidados

  • Scrolling.uicanvas: ejemplos de diferentes opciones de desplazamiento, como horizontal, vertical, 2D y sin restricciones

  • Snapping.uicanvas— Ejemplos de diferentes opciones de ajuste

Puede agregar un elemento ScrollBox (Cuadro de desplazamiento) creado previamente desde la biblioteca de sectores. Al hacerlo, se crearán automáticamente elementos de imagen, contenido y máscara que quedarán anidados en el panel Hierarchy (Jerarquía).

Para agregar un elemento ScrollBox desde la biblioteca de sectores

  • En el navegadorUI Editor, elijaNew,Elemento de la biblioteca de sectores,Cuadro de desplazamiento.

El elemento ScrollBox (Cuadro de desplazamiento) (1) tiene el componente ScrollBox (Cuadro de desplazamiento) (2) aplicado. Puede agregar una imagen a laCuadro de desplazamientoElementosImage (Imagen)Componente (3), que actúa como marco visual para el cuadro de desplazamiento. Como el elemento máscara y sus elementos secundarios se dibujan delante del elemento de cuadro de desplazamiento, solo verá los bordes de la imagen del componente ScrollBox (Cuadro de desplazamiento). Para aumentar o reducir el área de visualización de la imagen, ajuste los desplazamientos en el componente Transform2D.

El elemento Mask (Máscara) tiene un componente Mask (Máscara) aplicado, que actúa como una ventana a través de la cual se puede ver el contenido. Para especificar una máscara personalizada, puede añadir una imagen alMáscaraElementosImage (Imagen)componente. El contenido se dibuja en la zona visible de la máscara; el área transparente de la máscara oculta contenido.

Para editar un componente ScrollBox

En el navegadorPropiedadesdel panelUI EditorExpandaCuadro de desplazamientoHaga lo siguiente, según corresponda:

Interactable (Interactuable)

Consulte la sección sobre propiedades para editar la configuración de los componentes interactivos más comunes.

Content (Contenido), Content element (Elemento de contenido)

Seleccione un elemento de la lista para proporcionar el contenido que se mostrará en el cuadro de desplazamiento.

Content (Contenido), Initial scroll offset (Desplazamiento inicial)

Escriba el valor de desplazamiento inicial del punto de rotación del elemento de contenido desde el punto de rotación del elemento principal.

Content (Contenido), Constrain scrolling (Desplazamiento limitado)

Seleccione esta casilla para evitar que el contenido se desplace más allá de sus bordes.

Content (Contenido), Snap (Ajuste)

Seleccione un modo de ajuste:

  • None (Ninguno)— Sin chasquidos.

     

  • A los niñosCuando se realiza un movimiento de arrastre, el elemento de contenido se mueve de manera que el punto de rotación del elemento secundario más cercano se ajusta con arreglo al elemento principal del punto de rotación. Puede utilizar esta opción, por ejemplo, para centrar un elemento secundario en el cuadro de desplazamiento cuando se detiene el movimiento de arrastre.

     

  • A cuadrículaCuando se realiza un movimiento de arrastre, el elemento de contenido se mueve de manera que el punto de rotación del elemento de contenido se ajusta con arreglo a un múltiplo del espaciado de cuadrícula desde el punto de rotación del elemento principal.

     

Horizontal scrolling (Desplazamiento horizontal), Enabled (Activado)

Active esta casilla para habilitar el desplazamiento horizontal del contenido. Si el elemento o su elemento principal giran, el eje de desplazamiento también gira. Para desplazarse en ambas direcciones, puede habilitar el desplazamiento horizontal a la vez que el vertical.

Horizontal scrolling (Desplazamiento horizontal), Scrollbar element (Elemento de barra de desplazamiento)

Seleccione un elemento de la lista para proporcionar la barra de desplazamiento horizontal asociada al cuadro de desplazamiento.

Horizontal scrolling (Desplazamiento horizontal), Scrollbar visibility (Visibilidad de la barra de desplazamiento)

Seleccione el comportamiento de visibilidad de la barra de desplazamiento horizontal:

  • Siempre visible: la barra de desplazamiento siempre está visible.

     

  • Oculta automáticamente: la barra de desplazamiento se oculta automáticamente cuando no se utiliza. La barra de desplazamiento cambia su tamaño de acuerdo con la visibilidad de la barra de desplazamiento vertical.

     

  • Ocultar automáticamente y cambiar el tamaño del área de vista— Igual queOculta automáticamenteSin embargo, el tamaño del área de visualización se reduce cuando la barra de desplazamiento está visible y aumenta cuando está oculta.

     

Vertical scrolling (Desplazamiento vertical), Enabled (Habilitado)

Active esta casilla para habilitar el desplazamiento vertical del contenido. Si el elemento o su elemento principal giran, el eje de desplazamiento también gira. Para desplazarse en ambas direcciones, puede habilitar el desplazamiento vertical a la vez que el horizontal.

Vertical scrolling (Desplazamiento vertical), Scrollbar element (Elemento de la barra de desplazamiento)

Seleccione un elemento de la lista para proporcionar la barra de desplazamiento vertical asociada al cuadro de desplazamiento.

Vertical scrolling (Desplazamiento vertical), Scrollbar visibility (Visibilidad de la barra de desplazamiento)

Seleccione el comportamiento de visibilidad de la barra de desplazamiento vertical:

  • Siempre visible: la barra de desplazamiento siempre está visible.

     

  • Oculta automáticamente: la barra de desplazamiento se oculta automáticamente cuando no se utiliza. La barra de desplazamiento cambia su tamaño de acuerdo con la visibilidad de la barra de desplazamiento vertical.

     

  • Ocultar automáticamente y cambiar el tamaño del área de vista— Igual que Auto hide, pero el tamaño del área de visualización se reduce cuando la barra de desplazamiento está visible y aumenta cuando está oculta.

     

Actions (Acciones), Change (Cambiar)

Especifique la acción que se va a desencadenar durante un movimiento de arrastre cada vez que la posición cambie.

Actions (Acciones), End change (Finalizar cambio)

Especifique la acción que se va a desencadenar cuando finalice un movimiento de arrastre.