Leer moeiteloos gamemenu's maken en gebruikersinterfaces ontwerpen met de GUI-tools van Arcade.

Spelmenu's en gebruikersinterfaces (UI) spelen een cruciale rol bij het verbeteren van de gebruikerservaring en betrokkenheid van een spel. Arcade, een populaire Python-bibliotheek voor game-ontwikkeling, biedt krachtige GUI-tools (Graphical User Interface) die het gemakkelijk maken om gamemenu's en UI-elementen te ontwerpen en te implementeren.

Maak een eenvoudig spel

Controleer voordat u begint of u dat hebt gedaan pip op uw apparaat geïnstalleerd. Gebruik deze opdracht om de arcadebibliotheek te installeren:

pip installeren arcade

Begin met het maken van een eenvoudig spel met behulp van Arcade.

De code die in dit artikel wordt gebruikt, is hierin beschikbaar GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

Deze game bevat een spelerobject dat naar links en rechts kan bewegen en een vijandelijk object. Hier is de code voor het spel:

importeren arcade
BREEDTE = 800
HOOGTE = 600
SPELER_SPEED = 25







instagram viewer



klasSpel(arcade. Raam):
def__in het__(zelf):
 super().__init__(BREEDTE, HOOGTE, "Eenvoudig spel")
 self.player_x = BREEDTE // 2
 self.enemy_x = BREEDTE - 50
 zelf.game_over = Vals


defopgericht(zelf):
 arcade.set_background_color (arcade.kleur. WIT)


defon_draw(zelf):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.kleur. BLAUW)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arcade.kleur. ROOD)


defupdate(zelf, delta_tijd):
 zelf.vijand_x += 0.5
als self.enemy_x >= BREEDTE:
 zelf.game_over = WAAR


defon_key_press(zelf, sleutel, modifiers):
als sleutel == arcade.sleutel. LINKS:
 self.player_x -= PLAYER_SPEED
elif sleutel == arcade.sleutel. RECHTS:
 self.player_x += PLAYER_SPEED
spel = spel()
spel.setup()
speelhal.run()

Game Over-scherm toevoegen

Voeg een game over-scherm toe dat een bericht weergeeft wanneer de vijand beweegt buiten het spelvenster. Gebruik de arcade.gui. UIManager En arcade.gui. UIMessageBox lessen om dit te bereiken.

Maak een instantie van UIManager en schakel het in. Binnen in de on_draw methode, controleer of de spel is over vlag is ingesteld, en zo ja, teken de UI-manager. De show_game_over_screen methode creëert een UIMessageBox met een game-over-bericht en voegt het toe aan de UI-manager. U kunt de UI-manager ook in- en uitschakelen in de update methode op basis van de spelstatus.

Maak een nieuw bestand met de naam game-over.py en voeg de code toe met de onderstaande updates:

importeren arcade
van arcade.gui importeren UIMager, UIMessageBox
BREEDTE = 800
HOOGTE = 600
SPELER_SPEED = 25


klasSpel(arcade. Raam):
def__in het__(zelf):
 super().__init__(BREEDTE, HOOGTE, "Eenvoudig spel")
 self.player_x = BREEDTE // 2
 self.enemy_x = BREEDTE - 50
 zelf.ui_manager = UIManager()
 zelf.game_over = Vals


defopgericht(zelf):
 arcade.set_background_color (arcade.kleur. WIT)
 zelf.ui_manager.enable() # Schakel de UI-manager in


defon_draw(zelf):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.kleur. BLAUW)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arcade.kleur. ROOD)
als zelf.game_over:
 zelf.ui_manager.draw()


defupdate(zelf, delta_tijd):
 zelf.vijand_x += 0.5
als self.enemy_x >= BREEDTE:
 zelf.show_game_over_screen()
 zelf.game_over = WAAR
als zelf.game_over:
 zelf.ui_manager.enable()
anders:
 zelf.ui_manager.disable()


defon_key_press(zelf, sleutel, modifiers):
als sleutel == arcade.sleutel. LINKS:
 self.player_x -= PLAYER_SPEED
elif sleutel == arcade.sleutel. RECHTS:
 self.player_x += PLAYER_SPEED


defshow_game_over_screen(zelf):
 message_box = UIMessageBox(
 breedte=400,
 hoogte=200,
 bericht_tekst="Spel is over!"
 )
 self.ui_manager.add (message_box)
spel = spel()
spel.setup()
speelhal.run()

Hieronder is de uitvoer:

Knoppen toevoegen

Verbeter nu het spel over het scherm door knoppen toe te voegen om het spel opnieuw te starten of af te sluiten. U kunt dit doen door gebruik te maken van de toetsen parameter van UIMessageBox en het bieden van een callback-functie om knopklikken af ​​​​te handelen.

Maak een nieuw bestand met de naam knoppen.py en voeg de code toe met de onderstaande updates:

defshow_game_over_screen(zelf):
 message_box = UIMessageBox(
 breedte=400,
 hoogte=200,
 bericht_tekst="Spel is over!",
 knoppen=("Herstarten", "Uitgang"),
 callback=self.on_game_over_button_click
 )
 self.ui_manager.add (message_box)
defon_game_over_button_click(zelf, button_text):
als knop_tekst == "Herstarten":
 zelf.restart_game()
elif knop_tekst == "Uitgang":
 arcade.close_window()
defspel opnieuw opstarten(zelf):
 zelf.game_over = Vals
 self.enemy_x = BREEDTE - 50
 zelf.ui_manager.clear()

Hieronder is de uitvoer:

In de show_game_over_screen methode, voeg twee knoppen toe, Herstarten En Uitgang, naar de UIMessageBox door ze op te geven in de toetsen parameter. Zorg ook voor een terugbelfunctie, on_game_over_button_click, om knopklikken te verwerken. Controleer in de callback-functie op welke knop is geklikt en voer de bijbehorende actie uit.

De GUI-tools van Arcade bieden een verscheidenheid aan extra functies die de functionaliteit en interactiviteit van uw gamemenu's en UI-ontwerpen verder kunnen verbeteren. Hier zijn een paar voorbeelden:

UIDraggableMixin

De UIDraggableMixin class kan worden gebruikt om elke UI-widget versleepbaar te maken. Het biedt functionaliteit voor het afhandelen van sleepgedrag, waardoor gebruikers UI-elementen over het scherm kunnen verplaatsen. Door deze mix te combineren met andere UI-widgets, kun je versleepbare vensters of panelen in je game maken.

UIMouseFilterMixin

De UIMouseFilterMixin class stelt u in staat om alle muisgebeurtenissen op te vangen die plaatsvinden binnen een specifieke widget. Dit is met name handig voor vensterachtige widgets waarbij u wilt voorkomen dat muisgebeurtenissen de onderliggende UI-elementen beïnvloeden. Door de muisgebeurtenissen te filteren, kunt u de interactie binnen de widget onafhankelijk regelen.

UIWindowLikeMixin

De UIWindowLikeMixin class biedt vensterachtig gedrag aan een widget. Het behandelt alle muisgebeurtenissen die plaatsvinden binnen de grenzen van de widget en staat toe dat de widget wordt gesleept. Dit is ideaal voor het maken van versleepbare vensters of panelen waarmee gebruikers in uw game kunnen communiceren.

Oppervlak

De Oppervlak klasse vertegenwoordigt een buffer voor het tekenen van UI-elementen. Het abstraheert de tekening op de buffer en biedt methoden om de buffer op het scherm te activeren, wissen en tekenen. Je kunt deze klasse intern gebruiken voor het renderen van widgets of aangepaste UI-elementen in je game.

Deze extra functies bieden mogelijkheden voor het creëren van meer interactieve en dynamische gebruikerservaringen in uw games. Experimenteer met deze functies om unieke functionaliteit toe te voegen en uw gamemenu's en UI-ontwerpen te laten opvallen.

Beste praktijken voor het opnemen van GUI

Wanneer u GUI-tools in uw games opneemt met behulp van Arcade, is het belangrijk om enkele best practices te volgen om een ​​soepele en naadloze gebruikerservaring te garanderen. Hier zijn enkele tips om in gedachten te houden:

Plan en prototype

Voordat u aan de implementatie begint, besteedt u tijd aan het plannen en prototypen van uw gamemenu's en UI-elementen. Overweeg de lay-out, functionaliteit en visuele esthetiek om een ​​samenhangend en gebruiksvriendelijk ontwerp te garanderen.

Houd het consistent

Zorg voor een consistente visuele stijl en lay-out in je gamemenu's en UI-elementen. Dit helpt gebruikers gemakkelijker door je game te navigeren en zorgt voor een samenhangende ervaring.

Reagerend ontwerp

Ontwerp uw UI-elementen zodat ze responsief zijn en kunnen worden aangepast aan verschillende schermformaten en resoluties. Dit zorgt ervoor dat je gamemenu's en gebruikersinterface bruikbaar en visueel aantrekkelijk blijven op verschillende apparaten.

Efficiënte afhandeling van gebeurtenissen

Verwerk gebruikersinvoergebeurtenissen efficiënt om responsieve en soepele interacties te garanderen. Vermijd onnodige berekeningen of gebeurtenisverwerking die vertraging of vertraging in de UI-respons kunnen veroorzaken.

Gebruikersfeedback

Geef duidelijke en directe feedback aan gebruikers wanneer ze interactie hebben met uw gamemenu's en UI-elementen. Visuele aanwijzingen, animaties en audiofeedback in games kan de gebruikerservaring verbeteren en laat het spel meer gepolijst aanvoelen.

Door deze best practices te volgen, kunt u gamemenu's en UI-ontwerpen maken die intuïtief en visueel aantrekkelijk zijn.

Verhoog de gebruikersbetrokkenheid met een visueel aantrekkelijke gebruikersinterface

Het toevoegen van GUI-elementen aan je game verbetert niet alleen de bruikbaarheid, maar verbetert ook de visuele aantrekkingskracht en algehele betrokkenheid van spelers. Of je nu een startmenu, game-over-scherm of een ander UI-element maakt, de GUI-tools van Arcade bieden een scala aan functies en functionaliteiten om de gebruikerservaring van je game te verbeteren.