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.

37 Extensiones
Fuente: Elaboración propia


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

38 Extensiones instaladas
Fuente: Elaboración propia



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:

39 UI_Fondo
Fuente: Elaboración propia


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



40 UI_Texto 1
UI_Texto: Propiedades
Fuente: Elaboración propia


41 UI_Texto 2
UI_Texto: Comportamientos
Fuente: Elaboración propia


42 UI_Texto 3
UI_Texto: Escena
Fuente: Elaboración propia



UI_Input



43 UI_Input 1
UI_Input: Propiedades
Fuente: Elaboración propia


44 UI_Input 2
UI_Input: Escena
Fuente: Elaboración propia



UI_Boton_Aceptar



45 UI_Boton_Aceptar 1
UI_Boton_Aceptar: Propiedades I
Fuente: Elaboración propia


46 UI_Boton_Aceptar 2
UI_Boton_Aceptar: Propiedades II
Fuente: Elaboración propia


47 UI_Boton_Aceptar 3
UI_Boton_Aceptar: Escena
Fuente: Elaboración propia



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:

48 UI Resto de botones
Resto de botones
Fuente: Elaboración propia



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 03 de Febrero de 2023

gdeveloprpg2ddigitalizaciónharry potter