Apprenez à créer des menus de jeu et à concevoir des interfaces utilisateur sans effort à l'aide des outils GUI d'Arcade.

Les menus de jeu et les interfaces utilisateur (UI) jouent un rôle crucial dans l'amélioration de l'expérience utilisateur et de l'engagement d'un jeu. Arcade, une bibliothèque Python populaire pour le développement de jeux, fournit de puissants outils GUI (interface utilisateur graphique) qui facilitent la conception et la mise en œuvre de menus de jeu et d'éléments d'interface utilisateur.

Créer un jeu simple

Avant de commencer, assurez-vous d'avoir pip installé sur votre appareil. Utilisez cette commande pour installer la bibliothèque d'arcade :

pip installer arcade

Commencez par créer un jeu simple en utilisant Arcade.

Le code utilisé dans cet article est disponible dans ce Référentiel GitHub et est libre d'utilisation sous la licence MIT.

Ce jeu mettra en vedette un objet joueur qui peut se déplacer à gauche et à droite et un objet ennemi. Voici le code du jeu :

importer





instagram viewer

 arcade
LARGEUR = 800
HAUTEUR = 600
PLAYER_SPEED = 25


classeJeu(arcade. Fenêtre):
définitivement__init__(soi):
 super().__init__(LARGEUR, HAUTEUR, "Jeu facile")
 self.player_x = LARGEUR // 2
 self.enemy_x = LARGEUR - 50
 self.game_over = FAUX


définitivementinstallation(soi):
 arcade.set_background_color (arcade.color. BLANC)


définitivementon_draw(soi):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.color. BLEU)
 arcade.draw_circle_filled (self.enemy_x, HAUTEUR // 2, 20, arcade.color. ROUGE)


définitivementmise à jour(soi, delta_time):
 self.enemy_x += 0.5
si self.enemy_x >= LARGEUR :
 self.game_over = Vrai


définitivementon_key_press(soi, clé, modificateurs):
si clé == arcade.clé. GAUCHE:
 self.player_x -= PLAYER_SPEED
elif clé == arcade.clé. DROITE:
 self.player_x += PLAYER_SPEED
jeu = Jeu()
jeu.setup()
arcade.run()

Ajouter un écran Game Over

Ajoutez un écran de jeu qui affiche un message lorsque le l'ennemi se déplace en dehors de la fenêtre de jeu. Utilisez le arcade.gui. UIManager et arcade.gui. UIMessageBox cours pour y parvenir.

Créer une instance de UIManager et activez-le. À l'intérieur de on_draw méthode, vérifiez si la jeu terminé flag est défini, et si c'est le cas, dessinez le gestionnaire d'interface utilisateur. Le show_game_over_screen méthode crée un UIMessageBox avec un message de fin de partie et l'ajoute au gestionnaire d'interface utilisateur. Vous pouvez également activer et désactiver le gestionnaire d'interface utilisateur dans le mise à jour méthode basée sur l'état du jeu.

Créer un nouveau fichier nommé game-over.py et ajoutez le code avec les mises à jour ci-dessous :

importer arcade
depuis arcade.gui importer UIManager, UIMessageBox
LARGEUR = 800
HAUTEUR = 600
PLAYER_SPEED = 25


classeJeu(arcade. Fenêtre):
définitivement__init__(soi):
 super().__init__(LARGEUR, HAUTEUR, "Jeu facile")
 self.player_x = LARGEUR // 2
 self.enemy_x = LARGEUR - 50
 self.ui_manager=UIManager()
 self.game_over = FAUX


définitivementinstallation(soi):
 arcade.set_background_color (arcade.color. BLANC)
 self.ui_manager.enable() # Activer le gestionnaire d'interface utilisateur


définitivementon_draw(soi):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.color. BLEU)
 arcade.draw_circle_filled (self.enemy_x, HAUTEUR // 2, 20, arcade.color. ROUGE)
si self.game_over :
 self.ui_manager.draw()


définitivementmise à jour(soi, delta_time):
 self.enemy_x += 0.5
si self.enemy_x >= LARGEUR :
 self.show_game_over_screen()
 self.game_over = Vrai
si self.game_over :
 self.ui_manager.enable()
autre:
 self.ui_manager.disable()


définitivementon_key_press(soi, clé, modificateurs):
si clé == arcade.clé. GAUCHE:
 self.player_x -= PLAYER_SPEED
elif clé == arcade.clé. DROITE:
 self.player_x += PLAYER_SPEED


définitivementshow_game_over_screen(soi):
 message_box = UIMessageBox(
 largeur=400,
 hauteur=200,
 message_text="Jeu terminé!"
 )
 self.ui_manager.add (message_box)
jeu = Jeu()
jeu.setup()
arcade.run()

Ci-dessous la sortie :

Ajouter des boutons

Maintenant, améliorez le jeu sur l'écran en ajoutant des boutons pour redémarrer le jeu ou quitter. Vous pouvez y parvenir en utilisant le boutons paramètre de UIMessageBox et fournir une fonction de rappel pour gérer les clics de bouton.

Créer un nouveau fichier nommé boutons.py et ajoutez le code avec les mises à jour ci-dessous :

définitivementshow_game_over_screen(soi):
 message_box = UIMessageBox(
 largeur=400,
 hauteur=200,
 message_text="Jeu terminé!",
 boutons=("Redémarrage", "Sortie"),
 rappel=self.on_game_over_button_click
 )
 self.ui_manager.add (message_box)
définitivementon_game_over_button_click(soi, button_text):
si button_text == "Redémarrage":
 self.restart_game()
elif button_text == "Sortie":
 arcade.close_window()
définitivementrecommencer le jeu(soi):
 self.game_over = FAUX
 self.enemy_x = LARGEUR - 50
 self.ui_manager.clear()

Ci-dessous la sortie :

Dans le show_game_over_screen méthode, ajouter deux boutons, Redémarrage et Sortie, au UIMessageBox en les précisant dans le boutons paramètre. Fournir également une fonction de rappel, on_game_over_button_click, pour gérer les clics sur les boutons. Dans la fonction de rappel, vérifiez sur quel bouton vous avez cliqué et effectuez l'action correspondante.

Les outils GUI d'Arcade offrent une variété de fonctionnalités supplémentaires qui peuvent encore améliorer la fonctionnalité et l'interactivité de vos menus de jeu et de vos conceptions d'interface utilisateur. Voici quelques exemples:

UIDraggableMixin

Le UIDraggableMixin La classe peut être utilisée pour rendre n'importe quel widget d'interface utilisateur déplaçable. Il fournit des fonctionnalités pour gérer le comportement de glissement, permettant aux utilisateurs de déplacer des éléments d'interface utilisateur sur l'écran. La combinaison de ce mixin avec d'autres widgets d'interface utilisateur vous permet de créer des fenêtres ou des panneaux déplaçables dans votre jeu.

UIMouseFilterMixin

Le UIMouseFilterMixin La classe vous permet d'attraper tous les événements de souris qui se produisent dans un widget spécifique. Ceci est particulièrement utile pour les widgets de type fenêtre où vous souhaitez empêcher les événements de souris d'affecter les éléments d'interface utilisateur sous-jacents. En filtrant les événements de la souris, vous pouvez contrôler indépendamment l'interaction au sein du widget.

UIWindowLikeMixin

Le UIWindowLikeMixin La classe fournit un comportement de type fenêtre à un widget. Il gère tous les événements de souris qui se produisent dans les limites du widget et permet de faire glisser le widget. Ceci est idéal pour créer des fenêtres ou des panneaux déplaçables avec lesquels les utilisateurs peuvent interagir dans votre jeu.

Surface

Le Surface La classe représente un tampon pour dessiner des éléments d'interface utilisateur. Il résume le dessin sur le tampon et fournit des méthodes pour activer, effacer et dessiner le tampon à l'écran. Vous pouvez utiliser cette classe en interne pour afficher des widgets ou des éléments d'interface utilisateur personnalisés dans votre jeu.

Ces fonctionnalités supplémentaires offrent des opportunités pour créer des expériences utilisateur plus interactives et dynamiques dans vos jeux. Expérimentez avec ces fonctionnalités pour ajouter des fonctionnalités uniques et faire ressortir vos menus de jeu et vos conceptions d'interface utilisateur.

Meilleures pratiques pour l'intégration de l'interface graphique

Lors de l'intégration d'outils d'interface graphique dans vos jeux à l'aide d'Arcade, il est important de suivre certaines des meilleures pratiques pour garantir une expérience utilisateur fluide et transparente. Voici quelques conseils à garder à l'esprit :

Planifier et Prototyper

Avant de plonger dans la mise en œuvre, passez du temps à planifier et à prototyper vos menus de jeu et vos éléments d'interface utilisateur. Tenez compte de la disposition, de la fonctionnalité et de l'esthétique visuelle pour assurer une conception cohérente et conviviale.

Gardez-le cohérent

Maintenez un style visuel et une mise en page cohérents dans vos menus de jeu et vos éléments d'interface utilisateur. Cela aide les utilisateurs à naviguer plus facilement dans votre jeu et offre une expérience cohérente.

Conception réactive

Concevez vos éléments d'interface utilisateur pour qu'ils soient réactifs et adaptables à différentes tailles et résolutions d'écran. Cela garantit que vos menus de jeu et votre interface utilisateur restent utilisables et visuellement attrayants sur divers appareils.

Gestion efficace des événements

Gérez efficacement les événements d'entrée utilisateur pour garantir des interactions réactives et fluides. Évitez les calculs inutiles ou le traitement des événements qui pourraient introduire un décalage ou un retard dans la réactivité de l'interface utilisateur.

Commentaires des utilisateurs

Fournissez des commentaires clairs et immédiats aux utilisateurs lorsqu'ils interagissent avec les menus de votre jeu et les éléments de l'interface utilisateur. Repères visuels, animations et le retour audio dans les jeux peut améliorer l'expérience utilisateur et rendre le jeu plus raffiné.

En suivant ces meilleures pratiques, vous pouvez créer des menus de jeu et des conceptions d'interface utilisateur intuitives et visuellement attrayantes.

Augmentez l'engagement des utilisateurs avec une interface utilisateur visuellement attrayante

L'ajout d'éléments d'interface graphique à votre jeu améliore non seulement la convivialité, mais améliore également l'attrait visuel et l'engagement général des joueurs. Que vous créiez un menu de démarrage, un jeu sur écran ou tout autre élément d'interface utilisateur, les outils d'interface graphique d'Arcade offrent une gamme de caractéristiques et de fonctionnalités pour améliorer l'expérience utilisateur de votre jeu.