Cómo crear interacciones especializadas personalizadas

En esta guía, se muestra un ejemplo de un diseño de UMG (Unreal Motion Graphics) y sus vinculaciones de modelo de vista que puedes usar para crear una IU personalizada para la interacción especializada.

A medida que crees tu interacción especializada personalizada, asegúrate de establecer un evento para comenzar la interacción. También puedes establecer activadores de eventos que otorguen elementos a los jugadores por completar con éxito la interacción especializada.

Puedes desarrollar estos ejemplos al establecer escenas cinemáticas una vez que los jugadores u objetos tengan como objetivo ciertas zonas.

En este tutorial, se explica cómo crear una interacción rápida de presionar con habilidad en la que los jugadores pueden mantener presionada una entrada del activador para apuntar a las zonas correctas.

Antes de comenzar a personalizar tu IU, debes crear e importar cualquier recurso para usar en tus diseños. Visita Cómo crear una IU personalizada con materiales para obtener más información sobre el uso de materiales en tu diseño.

Cómo configurar el dispositivo

Sigue los pasos que aparecen a continuación para crear un ejemplo de golf en el que los jugadores apunten a una zona perfecta para tener éxito al golpear. Al diseñar tu IU, no dudes en cambiar el nombre de los paneles a medida que los coloques en el panel Jerarquía.

1. Desde el explorador de contenido, coloca un dispositivo de interacción especializada en tu proyecto.

2. En el panel de detalles del dispositivo, modifica los siguientes ajustes.

   

   Opción	Valor	Descripción
   Tipo de IU	Barra	Determina el tipo de interfaz de usuario que se mostrará.
   Widget personalizado	Añade tu widget de usuario personalizado	Selecciona un widget personalizado para utilizarlo en la interacción.
   Tipo de interacción	Cargar y soltar	Cargar y soltar se anima al mantener presionado el botón activador y se activa al soltarlo.
   Color del medidor	Elige un color	En este ejemplo, se utiliza el color rojo.
   Tamaño de la zona buena	80.0	Establece el tamaño de la zona buena como un porcentaje del medidor total.
   Posición de la zona buena	0.0	Establece la posición de la zona buena.
   Tamaño de la zona perfecta	15.0	Establece el tamaño de la zona perfecta como porcentaje de la zona buena.
   Posición de la zona perfecta	100.0	Establece la posición de la zona perfecta.
   Color de la zona buena	Elige un color	En este ejemplo, se utiliza el color verde oscuro.
   Color de la zona perfecta	Elige un color	En este ejemplo, se utiliza el color verde lima.

Añade la imagen de fondo

Sigue los pasos que se indican a continuación para crear la imagen de fondo de la barra de metros vertical en este ejemplo. El fondo en esta guía es una barra negra redondeada sobre la cual se asentarán las zonas.

Utiliza la imagen anterior como referencia cuando vuelvas a crear los pasos de este tutorial.

1. Crea un widget de usuario para tu interacción.

2. Ubica el widget de usuario adjunto al dispositivo y haz doble clic en él para acceder a su editor de widgets de usuario.

3. En el panel Jerarquía, arrastra y anida una superposición para que sirva como lienzo general. En este ejemplo, se denomina superposición. Luego, arrastra otra superposición para incluir el fondo. En este ejemplo, se denomina SID.

4. Arrastra y anida una imagen, denominada barra en el ejemplo, en la superposición derivada.

5. En el panel de detalles de la imagen, establece el material o la textura para el fondo.

Cómo configurar las zonas

Puedes crear una zona defectuosa para tu ejemplo que otorgará un fallo automático cuando sea el objetivo. Sin embargo, en este ejemplo, solo se utiliza una zona perfecta, que consta de tres contenedores:

• Un área inicial vacía, llamada PerfectZoneStart.

• La zona buena o perfecta, denominada SizeBox.

• El área vacía siguiente, llamada PerfectZoneEnd.

Sigue los pasos que se indican a continuación para recrear la zona perfecta de este ejemplo.

1. Desde el panel de paleta, arrastra y anida una caja apilada dentro de la superposición derivada, denominada SID en el ejemplo.

2. Luego, arrastra y anida los siguientes elementos derivados dentro de la caja apilada: Caja de escala > Caja de tamaño.

   1. En el panel de detalles del panel de caja de escala, establece la opción Estirar en Especificado por el usuario. Luego, establece la Escala especificada por el usuario para indicar cuánto espacio quieres por encima de la zona perfecta. Para este ejemplo, establece la escala en 0.27.
   2. En la caja de tamaño, establece la opción Anulación de altura a la altura del metro superior.

3. Dentro de la misma caja apilada, también arrastra una caja de tamaño > Caja de escala > Superposición > Imagen.

   1. En el panel de detalles de la caja de tamaño, establece la anulación de altura al tamaño de la zona perfecta.

   2. En el panel de detalles de la caja de escala, establece la opción Estirar en Especificado por el usuario. Luego, establece la opción Escala especificada por el usuario en 1.

   3. La PerfectZone de superposición contendrá el material o la textura para la zona perfecta.

4. Dentro de la misma caja apilada, también arrastra una superposición > Caja de tamaño.

   1. En el panel de detalles de PerfectZoneEnd de superposición, establece la opción Estirar en Especificado por el usuario. Luego, establece la Escala especificada por el usuario para indicar cuánto espacio quieres por encima de la zona perfecta. Para este ejemplo, establece la escala en 0.49.
   
   1. En el panel de detalles de la caja de tamaño, establece la opción Anulación de altura a la altura del metro inferior.
   

5. Para añadir más detalles, puedes incluir muescas para las zonas de fondo al añadir una imagen, llamada muescas en el ejemplo, debajo de la caja apilada.

Cómo configurar el depurador

Para este ejemplo, el depurador debe estar dentro de un contenedor en movimiento. Para ello, debes crear una caja apilada con dos elementos.

El primer elemento contiene una caja de tamaño establecida en Escala de usuario, que luego vincularás a la escala de medidor de interacción especializada en el ViewModel. El segundo elemento contendrá un contenedor con el depurador.

1. Debajo del SID de superposición, arrastra y anida una caja apilada, denominada ScrubberStackBox en el ejemplo, para que contenga dos configuraciones derivadas de lo siguiente: Superposición > Caja de tamaño y Caja de tamaño > Caja de escala > Imagen denominada depurador.

   1. En el panel de detalles de la ScrubberMovingZone de superposición, establece la opción Estirar en Especificado por el usuario. Luego, establece la opción Escala especificada por el usuario en 0.
   
   1. En el panel de detalles de la caja de tamaño, establece la opción Anulación de altura a la altura del metro superior.
   
   1. Establece la opción Anulación de altura para el ScrubberContainer de caja de tamaño en 0.
   
   1. Cambia la configuración de Estirar de la caja de escala de superposición a Especificado por el usuario. Establece la opción Escala especificada por el usuario en 1.
   
   1. En la configuración de imagen para el depurador de imagen, establece el material o la textura de tu depurador.
   

Cómo configurar el ViewModel

Para conectar tu IU personalizada al dispositivo de interacción especializada, sigue estos pasos.

1. En el widget de usuario, ve a Ventana > Modelos de vista para abrir la ventana Modelos de vista.

2. Haz clic en +Modelo de vista. A continuación, selecciona Dispositivo: modelo de vista de interacción especializada y haz clic en Seleccionar.

3. Desde la barra de herramientas inferior o desde la pestaña Ventana, selecciona Vista de vinculaciones.

4. Configura tu vista de vinculaciones para que coincidan con la imagen de abajo.

   
   1. Haz clic en + Añadir widget para añadir la ScrubberMovingZone.
   2. Establece la ScubberMovingZone en Escala especificada por el usuario y el UEFN_SkilledInteraction_ViewModel en Valor del medidor de corriente.
   3. Haz clic en + Añadir widget para añadir PerfectZoneStart.
   4. Establece PerfectZoneStart en Escala especificada por el usuario y UEFN_SkilledInteraction_ViewModel en Mín. de zona perfecta.
   5. Haz clic en *+ Añadir widget para añadir PerfectZoneEnd.
   6. Establece PerfectZoneStart en Escala especificada por el usuario y añade una función de conversión para Añadir doble de int.
   7. Establece A en 1.
   8. Establece B en UEFN_SkilledInteraction_Viewmodel/Máx. de zona perfecta.
   9. Establece B negativa en Verdadero.