Cómo crear interacciones de habilidad personalizadas

Esta guía proporciona un ejemplo de diseño UMG (Unreal Motion Graphics) y sus vinculaciones de modelo de vista que puedes utilizar para crear una IU personalizada para el dispositivo Interacción de habilidad.

Cuando crees tu interacción de habilidad personalizada, asegúrate de establecer un evento para comenzar la interacción. También puedes establecer activadores de eventos que concedan objetos a los jugadores por completar con éxito la interacción de habilidad.

Puedes basarte en estos ejemplos configurando cinemáticas una vez que los jugadores u objetos tengan como objetivo determinadas zonas.

Este tutorial explica cómo crear una interacción de pulsación rápida/habilidad en la que los jugadores puedan mantener pulsada una entrada de disparo para apuntar a las zonas correctas.

Antes de empezar a personalizar tu IU, debes crear e importar los recursos que vayas a utilizar en tus diseños. Consulta Cómo crear una interfaz de usuario 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 se indican a continuación para crear un ejemplo de golf en el que los jugadores tengan como objetivo una zona perfecta para garantizar el éxito del golpe. Cuando diseñes 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 Interacción de habilidad en tu proyecto.

2. En el panel 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 va a mostrar.
   Widget personalizado	Añadir 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 muestra una animación mientras se mantiene pulsado el botón activador y se activa al soltarlo.
   Color del medidor	Elegir un color	Este ejemplo utiliza el color rojo.
   Tamaño de la zona buena	80.0	Establece el tamaño de la zona buena como 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	Elegir un color	Este ejemplo utiliza el color verde oscuro.
   Color de la zona perfecta	Elegir un color	Este ejemplo utiliza el color verde lima.

Cómo añadir la imagen de fondo

Sigue los pasos que se indican a continuación para crear la imagen de fondo de la barra del medidor vertical de este ejemplo. El fondo de este tutorial es una barra negra redondeada sobre la que 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. Localiza el widget de usuario adjunto al dispositivo y haz doble clic 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 llama Superposición. A continuación, arrastra otra superposición para que contenga el fondo. En este ejemplo, se llama SID.

4. Arrastra y anida una imagen, llamada Barra en el ejemplo, en la superposición hija.

5. En el panel Detalles de la imagen, establece el material o la textura del fondo.

Cómo configurar las zonas

Puedes crear una zona errónea para tu ejemplo que conceda un fallo automático cuando sea el objetivo. Sin embargo, este ejemplo solo utiliza una zona perfecta, que consta de tres contenedores:

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

• La zona buena o perfecta, denominada SizeBox.

• El área vacía posterior, denominada PerfectZoneEnd.

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

1. Desde el panel Paleta, arrastra y anida una caja apilable dentro de la superposición hija, denominada SID en el ejemplo.

2. A continuación, arrastra y anida los siguientes hijos dentro de la caja apilable: caja de escala > caja de tamaño.

   1. En el panel Detalles de la caja de escala, establece la opción Estirar en Especificado por el usuario. A continuación, ajusta la opción Escala especificada por el usuario para indicar cuánto espacio quieres por encima de la zona perfecta. A efectos de este ejemplo, establece la escala en 0.27.
   2. En la caja de tamaño, establece el ajuste Anulación de altura en la altura del medidor superior.

3. Dentro de la misma caja apilable, arrastra también una caja de tamaño > caja de escala > superposición > imagen.

   1. En el panel Detalles de la caja de tamaño, establece Anulación de altura en el tamaño de la zona perfecta.

   2. En el panel Detalles de la caja de escala, establece el ajuste Estirar en Especificado por el usuario. A continuación, establece el ajuste Escala especificada por el usuario en 1.

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

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

   1. En el panel Detalles de la superposición PerfectZoneEnd, establece el ajuste Estirar en Especificado por el usuario. A continuación, ajusta la opción Escala especificada por el usuario para indicar cuánto espacio quieres por encima de la zona perfecta. A efectos de este ejemplo, establece la escala en 0.49.
   
   1. En el panel Detalles de la caja de tamaño, establece el ajuste Anulación de altura en la altura del medidor inferior.
   

5. Para añadir más detalles, puedes incluir muescas en las zonas del fondo añadiendo una imagen, nombrada Muescas en el ejemplo, debajo de la caja apilable.

Cómo configurar el depurador

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

El primer elemento contiene una caja de tamaño establecida en Escala de usuario, que más tarde vas a vincular a la escala del medidor de interacción de habilidad en el modelo de vista. El segundo objeto contendrá un contenedor con el depurador.

1. Debajo del SID de Superposición, arrastra y anida una caja apilable, nombrada ScrubberStackBox en el ejemplo, para que contenga dos configuraciones hijas: Superposición > Caja de tamaño y Tamaño > Caja de escala > Imagen nombrada Depurador.

   1. En el panel Detalles de la superposición ScrubberMovingZone, establece el ajuste Estirar en Especificado por el usuario. A continuación, establece el ajuste Escala especificada por el usuario en 0.
   
   1. En el panel Detalles de la caja de tamaño, establece el ajuste Anulación de altura en la altura del medidor superior.
   
   1. Establece el ajuste Anulación de altura de la caja de tamaño ScrubberContainer en 0.
   
   1. Cambia el ajuste Estirar de la caja de escala Superposición a Especificado por el usuario. Establece el ajuste Escala especificada por el usuario en 1.
   
   1. En el ajuste Imagen del depurador de Imagen, establece el material o la textura de tu depurador.
   

Cómo configurar el modelo de vista

Para conectar tu IU personalizada al dispositivo Interacción de habilidad, 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 de habilidad y haz clic en Seleccionar.

3. En la barra de herramientas inferior o en la pestaña Ventana, selecciona Vinculaciones de vistas.

4. Configura tus vinculaciones de vistas para que coincidan con la imagen de abajo.

   
   1. Haz clic en + Añadir widget para añadir la zona ScrubberMovingZone.
   2. Establece ScubberMovingZone en Escala especificada por el usuario y UEFN_SkilledInteraction_ViewModel en Valor actual del medidor.
   3. Haz clic en + Añadir widget para añadir la zona PerfectZoneStart.
   4. Establece PerfectZoneStart en Escala especificada por el usuario y UEFN_SkilledInteraction_ViewModel en Mín. zona perfecta.
   5. Haz clic en + Añadir widget para añadir la zona PerfectZoneEnd.
   6. Establece PerfectZoneStart en Escala especificada por el usuario y añade una función de conversión para Añadir Int Double.
   7. Establece A en 1.
   8. Establece B en UEFN_SkilledInteraction_Viewmodel/Perfect Zone Max.
   9. Activa Negar B.