jairogarcíarincón

Introducción

Es algo bastante habitual de los juegos estilo RPG que el jugador interactúe con el juego en forma de diálogos, selección de opciones, etc.

En nuestro juego, además de unas instrucciones iniciales, cada vez que el jugador recoja un libro, debemos hacerle preguntas de respuesta múltiple que debe contestar para obtener la poción correspondiente. Por este motivo, nuestro juego necesitará de un área de diálogos con campos de texto, botones y campos de entrada de texto.

Extensiones

Además de los sprites necesarios y la tipografía correspondiente, para realizar este apartado haremos uso de dos extensiones de GDevelop que nos permiten asignar ciertos comportamientos a los objetos.

En concreto, vamos a utilizar las siguientes extensiones:

• PanelSpriteButton: Añade a un sprite la funcionalidad de un botón
• AutoTyping: Simula la escritura de texto

Para instalarlas, haz clic en el icono de Gestor de proyectos, arriba a la izquierda y, en el apartado de Extensiones, pulsa en Crear o Buscar nuevas extensiones y, a continuación, búscalas por el nombre e instálalas.

Una vez instaladas, podremos utilizarlas para añadir nuevos objetos. El resultado final debería ser similar a éste:

Fondo para diálogos

Empezaremos por crear un nuevo sprite llamado UI_Fondo que nos servirá de fondo para los diálogos. Para ello utilizaremos el sprite de assets > Sprites > UI > Papel.png:

Asegúrate de que se encuentre en la capa Diálogos y no te preocupes si el UI_Fondo tapa el fondo de detrás, pues luego la cámara estará centrada en Harry y además el usuario tendrá la posibilidad de ocultar dicho panel de diálogos.

Resto de elementos

A continuación, añadiremos al área de diálogos los siguientes elementos:

1. Cuadro de texto de tipo BBText, llamado UI_Texto, al que añadiremos el comportamiento de Autotyping con una velocidad de 0,01 caracteres por segundo.
2. Cuadro de Captura de texto para preguntar el nombre al jugador, llamado UI_Input.
3. Botones con el texto de Aceptar y Reiniciar, de tipo Panel Sprite Button, llamados UI_Boton_Aceptar y UI_Boton_Reiniciar.
4. Cuatro botones con el texto de la A a la D, que luego modificaremos, llamados UI_Boton_A a UI_Boton_D.

Se muestran a continuación capturas de los diferentes elementos citados.

UI_Texto

UI_Input

UI_Boton_Aceptar

Resto de botones

Siguiendo la misma lógica, crea el resto de botones hasta obtener algo parecido a lo siguiente. Por supuesto, puedes ajustar las posiciones y tamaños más adelante, y no te preocupes si algunos están “encima” de otros, ya que luego no se verán todos a la vez:

Grupo de objetos

Antes de finalizar este apartado, puesto que más adelante tendremos que ocultarlos al arrancar el juego, para facilitar la tarea de la lógica crearemos también aquí un nuevo Grupo de objetos llamado BotonesRespuesta y le añadiremos los cuatro botones UI_Boton_A a UI_Boton_D.

Con esto habríamos terminado la interfaz de usuario. Si ejecutas el juego, deberías ver además que el texto inicial se va escribiendo solo a una determinada velocidad.

---

Publicado el 05 de Febrero de 2025

gdeveloprpg2ddigitalizaciónharry potter