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 necesitas añadir texto a ninguno de los widgets en el editor de widgets para crear modales personalizados. Todos los botones y los widgets de bloque de texto extraen el texto y el diálogo de tu banco de conversación.

Al utilizar el editor de widgets, puedes importar lo siguiente:

• Imágenes

• Cuadros de diálogo prediseñados

• Archivos de fuentes

Puedes encontrar un buen ejemplo de cómo crear una IU personalizada con el editor de widgets en la página del tutorial de plantilla arcade de las Tortugas Ninja.

Para abrir el editor de widgets:

1. Haz clic derecho dentro del explorador de contenido y selecciona Interfaz de usuario > Blueprint de widgets.

2. Selecciona la variante de diálogo de modo en la ventana Selección de blueprint de widgets.

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

4. Para crear cuadros de conversación personalizados, se utilizan los flujos 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 de lienzo: un panel para colocar todos los widgets con control de alineación y más.

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

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

• Botón de UEFN para ConversationModalDialogViewModel: para todos los botones/opciones de texto.

Cómo vincular valores

Aquí, vincular valores se refiere al texto ingresado en el Gráfico de conversación. Todo el texto ingresado en los nodos de conversación se agrega 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 para el cuadro de conversación personalizado comienza con el panel Jerarquía en el editor de widgets.

1. Selecciona un widget del panel de 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 vista en la barra de herramientas inferior. Se abrirá el panel de modelo de vista.  

   

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

   

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

   

4. Selecciona la propiedad para vincularla en el widget. Para ello, haz clic en el ícono Editar en la propiedad Texto de UEFN y selecciona Texto > Seleccionar.

   

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

   

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

   1. Los valores de texto incluyen el título, el cuerpo o el texto principal del botón#:

   2. El 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 diálogo emergente.

   3. El cuerpo es el texto que sigue y, por lo general, presenta al jugador opciones en la conversación. Estos serían los nodos de diálogo que se vinculan al nodo Punto de entrada predeterminado.

   4. El texto principal del botón# es el texto que aparece en los nodos de respuesta, tal como están ordenados en el gráfico de conversación.

   

Los valores de los botones deben numerarse de acuerdo con la cantidad de widgets de botón utilizados. Los valores se establecen en el mismo orden numérico en el que se añadieron los widgets de botón. Los botones son los nodos de respuesta en un gráfico de conversación. Esto vincula el texto del botón a cada uno de los botones correspondientes.

Cómo vincular botones

La vinculación de botones se refiere a iniciar eventos después de la selección de un botón. Puede ser un evento único 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 botones personalizados, debes 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 a la 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 coloca automáticamente en el campo Widget.

3. Haz clic en + Añadir widget. El widget se añade de nuevo a la lista.

   

4. Selecciona el campo de flecha y elige Una forma de ver el modelo.

   

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 deseas para el botón en la línea de abajo. La vinculación resultante debería verse de la siguiente manera:

   

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

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

2. Elige el valor de visibilidad.

3. Busca la visibilidad del botón # correspondiente en el lado derecho de la vinculación y selecciónala. La vinculación resultante debería verse de la siguiente manera:

   

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

Haz clic en el gif para ampliarlo.

Sin la vinculación de 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 enlace

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

Los materiales se pueden propagar para completar la matriz de conversación de materiales. Puedes crear materiales personalizados con archivos importados que se pueden convertir en texturas en el Gráfico de material. Los siguientes tipos de archivo no son una lista exhaustiva de los tipos de archivo aceptados, pero son estándar para importar recursos de rasterización de imagen:

• .png

• .webp

• .jpg

En el dispositivo de conversación, añade tus materiales a la matriz de materiales de conversación. Luego, en el Gráfico de conversación, el nodo definir material debe estar presente en el Gráfico de conversación. Los materiales se referencian desde el gráfico en las vinculaciones.

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

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

   

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

   

3. Haz clic en el botón +AddWidget para añadir el widget de imagen al panel Vinculaciones de vista.

   

4. Haz clic en el ícono Editar en el widget de imagen en el campo izquierdo para abrir las opciones del widget.

   

5. Selecciona Widget de imagen > Pincel > Seleccionar. Esto añade vinculaciones de pincel seleccionables al campo derecho.

   

6. Haz clic en el ícono Editar en el campo derecho 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 deseas utilizar para este widget.

   

8. En la ranura Material, selecciona el ícono de enlace y, luego, en el menú, elige Modelo de vista del modo de diálogo del modo Creativo > Material Art 01 > Seleccionar.

   

9. En la ranura Tamaño de imagen, ingresa el mismo tamaño que usaste en la opción Tamaño de imagen del widget de imagen en el panel de detalles.

   

El resultado final es un material que identifica al hablante del personaje.

Crear animaciones de IU de conversación

También puedes usar material de conversación en una animación de IU. El tipo de conversación debe establecerse en Cuadro o Personalizado en el dispositivo de conversación. Desde el gráfico de materiales, se puede hacer referencia al material de conversación desde el dispositivo de conversación cuando utilizas el nodo Reproducir animación de conversación.

Para vincular este nodo de conversación a tu widget de IU, debes usar el valor de progreso en el modelo de vista para vincularlo a la animación de IU que creas en Sequencer.  Para aprender a animar tu material, consulta el documento Cómo animar la IU.