Aprenda a crear menús de juegos y diseñar interfaces de usuario sin esfuerzo utilizando las herramientas GUI de Arcade.

Los menús del juego y las interfaces de usuario (UI) juegan un papel crucial en la mejora de la experiencia del usuario y la participación en un juego. Arcade, una popular biblioteca de Python para el desarrollo de juegos, proporciona potentes herramientas GUI (interfaz gráfica de usuario) que facilitan el diseño y la implementación de menús de juegos y elementos de la interfaz de usuario.

Crea un juego simple

Antes de comenzar, asegúrese de tener pip instalado en su dispositivo. Use este comando para instalar la biblioteca arcade:

pip instalar arcade

Comience creando un juego simple usando Arcade.

El código utilizado en este artículo está disponible en este repositorio GitHub y es gratis para su uso bajo la licencia MIT.

Este juego contará con un objeto de jugador que puede moverse hacia la izquierda y hacia la derecha y un objeto enemigo. Aquí está el código para el juego:

instagram viewer
importar arcada

ANCHO = 800
ALTURA = 600
VELOCIDAD DEL JUGADOR = 25

claseJuego(arcada. Ventana):
definitivamente__en eso__(ser):
super().__init__(ANCHO, ALTO, "Juego sencillo")
self.jugador_x = ANCHO // 2
self.enemy_x = ANCHO - 50
self.game_over = FALSO

definitivamenteconfiguración(ser):
arcade.set_background_color (arcade.color. BLANCO)

definitivamenteen_dibujar(ser):
arcade.start_render()
arcade.draw_circle_filled (self.player_x, ALTURA // 2, 20, arcade.color. AZUL)
arcade.draw_circle_filled (self.enemy_x, ALTURA // 2, 20, arcade.color. ROJO)

definitivamenteactualizar(uno mismo, delta_time):
self.enemy_x += 0.5
si self.enemy_x >= ANCHO:
self.game_over = Verdadero

definitivamenteon_key_press(auto, clave, modificadores):
si clave == arcade.clave. IZQUIERDA:
self.player_x -= PLAYER_SPEED
elif clave == arcade.clave. BIEN:
self.player_x += PLAYER_SPEED

juego = juego()
juego.setup()
arcade.ejecutar()

Agregar pantalla Game Over

Agregue una pantalla de fin de juego que muestre un mensaje cuando el el enemigo se mueve fuera de la ventana del juego. Utilizar el arcade.gui. UIManager y arcade.gui. UIMessageBox clases para lograrlo.

Crear una instancia de UIManager y habilitarlo. Dentro de en_dibujar método, verifique si el juego terminado el indicador está establecido y, de ser así, dibuje el administrador de la interfaz de usuario. El mostrar_juego_sobre_pantalla método crea un UIMessageBox con un mensaje de finalización del juego y lo agrega al administrador de la interfaz de usuario. También puede habilitar y deshabilitar el administrador de la interfaz de usuario en el actualizar método basado en el estado del juego.

Crear un nuevo archivo llamado juego-terminado.py y agregue el código con las siguientes actualizaciones:

importar arcada
de arcade.gui importar UIManager, UIMessageBox

ANCHO = 800
ALTURA = 600
VELOCIDAD DEL JUGADOR = 25

claseJuego(arcada. Ventana):
definitivamente__en eso__(ser):
super().__init__(ANCHO, ALTO, "Juego sencillo")
self.jugador_x = ANCHO // 2
self.enemy_x = ANCHO - 50
self.ui_manager = UIManager()
self.game_over = FALSO

definitivamenteconfiguración(ser):
arcade.set_background_color (arcade.color. BLANCO)
self.ui_manager.habilitar() # Habilitar el administrador de la interfaz de usuario

definitivamenteen_dibujar(ser):
arcade.start_render()
arcade.draw_circle_filled (self.player_x, ALTURA // 2, 20, arcade.color. AZUL)
arcade.draw_circle_filled (self.enemy_x, ALTURA // 2, 20, arcade.color. ROJO)
si self.game_over:
self.ui_manager.draw()

definitivamenteactualizar(uno mismo, delta_time):
self.enemy_x += 0.5
si self.enemy_x >= ANCHO:
self.mostrar_juego_sobre_pantalla()
self.game_over = Verdadero
si self.game_over:
self.ui_manager.habilitar()
demás:
self.ui_manager.disable()

definitivamenteon_key_press(auto, clave, modificadores):
si clave == arcade.clave. IZQUIERDA:
self.player_x -= PLAYER_SPEED
elif clave == arcade.clave. BIEN:
self.player_x += PLAYER_SPEED

definitivamentemostrar_juego_sobre_pantalla(ser):
mensaje_box = UIMessageBox(
ancho =400,
altura=200,
mensaje_texto="¡Juego terminado!"
)
self.ui_manager.add (cuadro_mensaje)

juego = juego()
juego.setup()
arcade.ejecutar()

A continuación se muestra la salida:

Agregar botones

Ahora, mejore la pantalla Game Over agregando botones para reiniciar el juego o salir. Puede lograr esto usando el botones parámetro de UIMessageBox y proporcionando una función de devolución de llamada para manejar los clics de los botones.

Crear un nuevo archivo llamado botones.py y agregue el código con las siguientes actualizaciones:

definitivamentemostrar_juego_sobre_pantalla(ser):
mensaje_box = UIMessageBox(
ancho =400,
altura=200,
mensaje_texto="¡Juego terminado!",
botones =("Reanudar", "Salida"),
callback=self.on_game_over_button_click
)
self.ui_manager.add (cuadro_mensaje)

definitivamenteon_game_over_button_click(auto, button_text):
si botón_texto == "Reanudar":
self.restart_game()
elif botón_texto == "Salida":
arcade.cerrar_ventana()

definitivamentereinicia el juego(ser):
self.game_over = FALSO
self.enemy_x = ANCHO - 50
self.ui_manager.clear()

A continuación se muestra la salida:

En el mostrar_juego_sobre_pantalla método, agregue dos botones, Reanudar y Salida, hacia UIMessageBox especificándolos en el botones parámetro. También proporciona una función de devolución de llamada, on_game_over_button_click, para controlar los clics de botón. Dentro de la función de devolución de llamada, verifique en qué botón se hizo clic y realice la acción correspondiente.

Las herramientas GUI de Arcade ofrecen una variedad de funciones adicionales que pueden mejorar aún más la funcionalidad y la interactividad de los menús de juego y los diseños de interfaz de usuario. Aquí están algunos ejemplos:

UIDraggableMixin

El UIDraggableMixin La clase se puede usar para hacer que cualquier widget de UI se pueda arrastrar. Proporciona funcionalidad para controlar el comportamiento de arrastre, lo que permite a los usuarios mover elementos de la interfaz de usuario por la pantalla. La combinación de esta combinación con otros widgets de la interfaz de usuario le permite crear ventanas o paneles arrastrables en su juego.

UIMouseFilterMixin

El UIMouseFilterMixin La clase le permite capturar todos los eventos del mouse que ocurren dentro de un widget específico. Esto es particularmente útil para widgets similares a ventanas en los que desea evitar que los eventos del mouse afecten los elementos de la interfaz de usuario subyacentes. Al filtrar los eventos del mouse, puede controlar la interacción dentro del widget de forma independiente.

UIWindowLikeMixin

El UIWindowLikeMixin La clase proporciona un comportamiento similar a una ventana a un widget. Maneja todos los eventos del mouse que ocurren dentro de los límites del widget y permite arrastrar el widget. Esto es ideal para crear ventanas o paneles arrastrables con los que los usuarios pueden interactuar en su juego.

Superficie

El Superficie La clase representa un búfer para dibujar elementos de la interfaz de usuario. Abstrae el dibujo en el búfer y proporciona métodos para activar, borrar y dibujar el búfer en la pantalla. Puede usar esta clase internamente para renderizar widgets o elementos de interfaz de usuario personalizados en su juego.

Estas funciones adicionales ofrecen oportunidades para crear experiencias de usuario más interactivas y dinámicas en sus juegos. Experimente con estas características para agregar una funcionalidad única y hacer que sus menús de juegos y diseños de interfaz de usuario se destaquen.

Mejores prácticas para incorporar GUI

Al incorporar herramientas GUI en sus juegos usando Arcade, es importante seguir algunas de las mejores prácticas para garantizar una experiencia de usuario fluida y sin problemas. Aquí hay algunos consejos para tener en cuenta:

Plano y Prototipo

Antes de sumergirse en la implementación, dedique tiempo a planificar y crear prototipos de los menús del juego y los elementos de la interfaz de usuario. Considere el diseño, la funcionalidad y la estética visual para garantizar un diseño coherente y fácil de usar.

Mantenlo consistente

Mantén un estilo visual y un diseño uniformes en los menús del juego y los elementos de la interfaz de usuario. Esto ayuda a los usuarios a navegar por su juego más fácilmente y proporciona una experiencia cohesiva.

Diseño de respuesta

Diseñe los elementos de su interfaz de usuario para que respondan y se adapten a diferentes tamaños y resoluciones de pantalla. Esto garantiza que los menús y la interfaz de usuario de su juego sigan siendo utilizables y visualmente atractivos en varios dispositivos.

Gestión eficiente de eventos

Maneje los eventos de entrada del usuario de manera eficiente para garantizar interacciones receptivas y fluidas. Evite los cálculos innecesarios o el procesamiento de eventos que podrían generar retrasos o demoras en la capacidad de respuesta de la interfaz de usuario.

Comentarios del usuario

Proporcione comentarios claros e inmediatos a los usuarios cuando interactúen con los menús de su juego y los elementos de la interfaz de usuario. Señales visuales, animaciones y Los comentarios de audio en los juegos pueden mejorar la experiencia del usuario. y hacer que el juego se sienta más pulido.

Al seguir estas prácticas recomendadas, puede crear menús de juegos y diseños de interfaz de usuario que sean intuitivos y visualmente atractivos.

Aumente la participación del usuario con una interfaz de usuario visualmente atractiva

Agregar elementos GUI a su juego no solo mejora la usabilidad, sino que también mejora el atractivo visual y la participación general de los jugadores. Ya sea que esté creando un menú de inicio, una pantalla de finalización del juego o cualquier otro elemento de la interfaz de usuario, las herramientas de la interfaz gráfica de usuario de Arcade ofrecen una variedad de características y funcionalidades para mejorar la experiencia de usuario de su juego.