Este tutorial está disponible como un video HD aquí.
En este tutorial vamos a ver los aspectos de la interfaz de usuario del motor del juego Godot. Si tienes experiencia previa con otros motores de juegos, probablemente te sorprenda la cantidad de widgets y contenedores de interfaz de usuario que se envían con Godot. Si bien muchos de estos controles nunca se usarían en un juego, son absolutamente invaluables para crear herramientas. Por supuesto, también son excelentes para crear juegos, lo que facilita la implementación de la interfaz de usuario.
Usar Controles en Godot es como usar cualquier otro Nodo, aunque la relación entre ellos es donde las cosas varían más. Echemos un vistazo rápido a lo que está incluido:
Todos los controles heredan de Control, que a su vez hereda de CanvasItem, lo que permite dibujarlo en la pantalla. Al final del día, hay tres categorías de Controles: Wdigets de interfaz de usuario, Contenedores y Ventanas emergentes. Los contenedores son controles que contienen otros controles. Muy a menudo, organizarán automáticamente sus contenidos para usted. Las ventanas emergentes son exactamente eso, cuadros de diálogo que puede mostrar para cosas como mensajes, selección de archivos, etc. Luego está todo lo demás… estos son los diversos widgets que puede usar en su aplicación, como botones, etiquetas e incluso reproductores de video.
Su primera aplicación GUI
Empecemos, mostremos cómo funcionan los controles y la relación entre contenedores y controles. Vamos a crear un menú simple donde nuestros controles se dispondrán verticalmente automáticamente.
Comience creando un VBoxContainer, que es una caja de controles que organiza automáticamente sus elementos secundarios verticalmente.
Cree un nodo VBoxContainer:
Ajusta el tamaño un poco centrado en tu pantalla, así:
Ahora, en la pestaña Escena, asegúrese de que VBoxController esté seleccionado y cree un nuevo nodo:
Seleccione el botón de menú:
Repita un par de veces para que tenga varios botones. La jerarquía de su escena debería verse así:
A continuación, seleccione MenuButton y en el Inspector establezca el Texto:
Puede establecer una serie de propiedades que controlan la apariencia del botón. Tenga en cuenta que, como todos los demás nodos en Godot, el Control hereda la información posicional de su contenedor principal.
A medida que agrega texto a sus controles, puede ver que el contenedor los alinea verticalmente automáticamente dentro de:
Ahora, ¿qué sucede si desea expandir las etiquetas para usar todo el espacio disponible dentro del control principal? Eso también se puede lograr fácilmente. Para cada botón, vaya al Inspector y despliegue la configuración Vertical y asegúrese de que Expandir esté seleccionado:
Ahora deberías ver el menú dispuesto así:
Puede encontrar que la Fuente es ridículamente pequeña… así que vamos a crear rápidamente una nueva fuente. Cubrimos esto en el pasado, pero un resumen rápido. Seleccione Importar->Fuente:
Seleccione un archivo ttf y guárdelo como un archivo fnt, así:
Ahora puede cambiar la fuente de cada elemento del menú usando la opción Cargar de Fuente personalizada en el Inspector con un Botón seleccionado, así:
Después de configurar la fuente, los tamaños deberían cambiar automáticamente, así:
Debe realizar esta tarea para cada Botón… o…
Usar un tema
Godot tiene un soporte de temas limitado, pero en realidad eso solo significa que puedes configurar una fuente común. Selecciona el VBoxContainer, localiza Theme y crea uno nuevo:
Ahora suéltalo de nuevo y selecciona Editar:
‘
Esto ahora lo llevará a la ventana del editor de temas, que contiene una vista previa de cómo se ve su tema con varios controles:
En el Inspector, seleccione Tema->Fuente predeterminada y cargue nuestra fuente:
Cuando esté satisfecho con su tema, seleccione el botón Guardar recurso:
Guárdelo como un archivo .thm:
Ahora todos los controles en su contenedor deben actualizarse (es posible que deba cargar el tema nuevamente usando Tema-> Cargar):
Conexión del código a su control
Ahora que tenemos nuestros controles cableados, sigamos adelante y conéctelos para hacer algo.
Primero, adjuntemos un script a nuestro contenedor. En la pestaña Escena, seleccione VBoxController y haga clic en el botón de nueva secuencia de comandos:
Créalo usando la configuración que desees, así:
Ahora seleccione su primer MenuButton y haga clic en el botón Conexiones:
Seleccione Presionado, luego presione el botón Conectar:
Asegúrese de que el contenedor esté seleccionado, luego presione Conectar:
Esto creará un método llamado _on_MenuButton_pressed en el script VBoxContainer.
Ahora edite su código así:
Ahora ejecuta tu juego y deberías ver:
Y si haces clic en el primer botón, deberías ver:
Hay varios controles más disponibles, pero el proceso básico para usarlos es casi idéntico, así que no entraré en eso. Para obtener más detalles sobre cómo diseñar controles o más ejemplos (como el uso de ventanas emergentes y botones de mapa de bits), ¡asegúrese de ver también el video tutorial!
