IU de conversación personalizada

El editor de widgets te permite diseñar el aspecto de los botones y los fondos de tus conversaciones. No es necesario añadir texto a ninguno de los widgets del editor de widgets para crear modales personalizados. Todos los botones y widgets de bloque de texto extraen el texto y el diálogo de tu banco de conversaciones.

Utilizar el editor de widgets significa que puedes importar:

• Imágenes

• Cuadros de diálogo prediseñados

• Archivos de fuentes

En la página del tutorial de la plantilla Tortugas Ninja Arcade encontrarás un buen ejemplo de creación de una IU personalizada con el editor de widgets.

Para abrir el editor de widgets:

1. Haz clic con el botón derecho del ratón en el explorador de contenido y selecciona Interfaz de usuario > Blueprint de widget.

2. Selecciona Variante de diálogo modal en la ventana Selección de blueprint de widget.

3. Dale un nombre a tu blueprint de widget y haz doble clic en la miniatura del widget para abrir el editor de widgets.

4. La creación de cuadros de conversación personalizados utiliza los procesos de trabajo descritos en la página del editor de widgets.

Los widgets que probablemente utilizarás con el dispositivo de conversación son los siguientes:

• Panel Lienzo: panel para colocar todos los widgets con control de alineación, etc.

• Bloque de texto de UEFN para ConversationModalDialogViewModel: Para el texto del título de la conversación.

• Bloque de texto de UEFN para ConversationModalDialogViewModel: Para el texto del cuerpo de la conversación.

• Botón de UEFN para ConversationModalDialogViewModel: Para todas las opciones de botones/texto.

Valores de vinculación

Los valores de vinculación se refieren al texto introducido en el grafo de conversación. Todo el texto introducido en los nodos de conversación se añade a los widgets durante el juego cuando los widgets están vinculados correctamente a los widgets en el modelo de vista.

La vinculación de los valores de texto del cuadro de conversación personalizado comienza en el panel Jerarquía del editor de widgets.

1. Selecciona un widget del panel Jerarquía. Puedes empezar en la parte superior de la jerarquía e ir descendiendo hasta el final de la lista.  

2. Haz clic en Vinculaciones de vistas en la barra de herramientas inferior. Se abrirá el panel Modelo de vista.  

   

3. Selecciona el elemento que necesitas y haz clic en + Añadir widget en el panel Modelo de vista. Esto añadirá automáticamente el widget a la lista de modelos de vista.

   

   También se pueden añadir widgets al modelo de vista haciendo clic en el campo Widget y seleccionando el widget en el menú desplegable.

   

4. Selecciona la propiedad para vincular en el widget haciendo clic en el icono Editar de la propiedad Text de UEFN y seleccionando Texto > Seleccionar.

   

5. Selecciona un valor de texto o de botón en el menú desplegable CreativeModalDialogueViewmode. Esto añadirá el valor seleccionado al widget. La selección debe hacerse en función del tipo de widget de la jerarquía.

   

6. Haz clic en Seleccionar para terminar de vincular los valores a los widgets.

   1. Los valores de texto incluyen Título, Cuerpo o Texto principal del botón n.º:

   2. Título es el valor establecido en el campo Nombre del hablante en el dispositivo de conversación o el valor establecido en Título en el dispositivo de ventana emergente.

   3. El cuerpo es el texto que sigue y suele presentar al jugador opciones en la conversación. Estos serían los nodos Speech que enlazan con el nodo Default Entry Point.

   4. El Texto principal del botón n.º es el texto que aparece en los nodos de respuesta, tal y como están ordenados en el grafo de conversación.

   

Los valores de los botones deben numerarse según el número de widgets de botón utilizados. Los valores se establecen en el mismo orden numérico en que se añadieron los widgets de los botones. Los botones son los nodos de respuesta de un grafo de conversación. Esto vincula el texto del botón a cada uno de los botones según corresponda.

Botones de vinculación

La vinculación de botones se refiere a la iniciación de eventos después de la selección de un botón. Puede tratarse de un único evento en el que un PNJ proporciona un objeto, o un intercambio complejo en el que el PNJ tiene bienes para vender, lo que desencadena una serie de eventos.

Para programar los eventos que se activan en los widgets de los botones personalizados, es necesario añadir la lógica del evento al botón desde el modelo de vista.

1. Haz clic en Vista de vinculaciones en la barra de herramientas inferior.

   

2. Selecciona un botón cada vez en el panel Jerarquía del editor de widgets. Al seleccionar el widget en el panel Jerarquía, el widget de botón seleccionado se colocará automáticamente en el campo Widget.

3. Haz clic en + Añadir widget. El widget se volverá a añadir a la lista.

   

4. Selecciona el campo de flecha y elige Una vía para el modelo de vista.

   

5. Selecciona el botón y elige el valor Al hacer clic. Asegúrate de hacer clic en Evento en la ventana de selección, no en Seleccionar.

6. Selecciona el valor Respuesta en el modelo de vista.

7. Elige el valor de Respuesta que quieras para el botón en la línea de abajo. La vinculación resultante debe tener este aspecto:

   

También puedes configurar los botones para que se oculten/muestren en función de si se les asignan valores:

1. Selecciona el botón en la jerarquía y añade un widget al botón.

2. Elige el valor de Visibilidad.

3. Busca la opción Visibilidad del botón n.º correspondiente a la derecha de la vinculación y selecciónala. La vinculación resultante debe tener este aspecto:

   

4. Ahora el botón solo será visible si hay una respuesta que seleccionar.

Haz clic en el gif para ampliarlo.

Sin la vinculación Visibilidad, el texto desaparecería del campo de respuesta y dejaría un cuadro de elección vacío para los jugadores:

Haz clic en el gif para ampliarlo. Texto > Seleccionar.

Materiales de vinculación

Los materiales pueden utilizarse en UMG para propagar el widget Imagen. Los materiales utilizados con UMG deben tener el formato de material de interfaz de usuario para que el widget reconozca el archivo de material y lo utilice con el widget Imagen. Para obtener más información sobre los materiales de interfaz de usuario, consulta la documentación sobre materiales de interfaz de usuario.

Los materiales pueden propagarse para rellenar la matriz de materiales de conversación. Puedes crear materiales personalizados con archivos importados que pueden convertirse en texturas en el grafo de material. Los siguientes tipos de archivo no son una lista exhaustiva de los tipos aceptados, pero son estándar para importar recursos de imágenes rasterizadas:

• .png

• .webp

• .jpg

En el dispositivo Conversación, añade tus materiales a la matriz de materiales de conversación. A continuación, en el grafo de conversación, el nodo Set Material debe estar presente. Se hace referencia a los materiales del grafo en las vinculaciones.

Para vincular un material a un dispositivo Conversación, haz lo siguiente:

1. En el editor de widgets de IU, haz clic en el widget Imagen en el panel Jerarquía.

   

2. Haz clic en Vinculaciones de vistas para abrir el panel de vinculaciones. El panel se abre con una línea de vinculación para el widget Imagen.

   

3. Haz clic en el botón +Añadir widget para añadir el widget Imagen al panel Vinculaciones de vistas.

   

4. Haz clic en el icono Editar del widget Imagen en el campo de la izquierda para abrir las opciones del widget.

   

5. Selecciona Widget Imagen > Pincel > Seleccionar. Esto añade vinculaciones de pincel seleccionables al campo de la derecha.

   

6. Haz clic en el icono Editar en el campo de la derecha para abrir las opciones de vinculación.

   

7. Selecciona Función de conversión > Crear pincel de imagen a partir de material > Seleccionar. Esto abre más opciones para identificar el material que quieres utilizar para este widget.

   

8. En el espacio Material, selecciona el icono de vinculación y, a continuación, elige Modelo de vista del diálogo modal del modo Creativo > Material Arte 01 > Seleccionar.

   

9. En el espacio Tamaño de imagen, introduce el mismo tamaño que utilizaste en la opción Tamaño de la imagen del widget Imagen en el panel Detales.

   

El resultado final es un material identificativo del personaje que habla.

Cómo crear animaciones de IU de conversación

También puedes utilizar material de conversación en una animación de IU. El tipo de conversación debe estar configurado como Caja o Personalizada en el dispositivo Conversación. Desde el grafo de material, se puede hacer referencia al material de conversación desde el dispositivo Conversation cuando utilizas el nodo Play Conversation Animation.

Para vincular este nodo de conversación a tu widget de IU, debes utilizar el valor de Progress en el modelo de vista para vincularlo a la animación que crees en Sequencer.  Para aprender a animar tu material consulta el documento Animación de IU.