Lær å lage spillmenyer og designe brukergrensesnitt uten problemer ved å bruke Arcades GUI-verktøy.

Spillmenyer og brukergrensesnitt (UI) spiller en avgjørende rolle for å forbedre brukeropplevelsen og engasjementet til et spill. Arcade, et populært Python-bibliotek for spillutvikling, tilbyr kraftige GUI (Graphical User Interface)-verktøy som gjør det enkelt å designe og implementere spillmenyer og UI-elementer.

Lag et enkelt spill

Før du starter, sørg for at du har pip installert på enheten din. Bruk denne kommandoen for å installere arkadebiblioteket:

pip installer arkade

Start med å lage et enkelt spill med Arcade.

Koden som brukes i denne artikkelen er tilgjengelig i denne GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Dette spillet vil inneholde et spillerobjekt som kan bevege seg til venstre og høyre og et fiendeobjekt. Her er koden for spillet:

import arkade
BREDDE = 800
HØYDE = 600
PLAYER_SPEED = 25


klasseSpill(arkade. Vindu):
def__i det__(selv):
 super().__init__(WIDTH, HEIGHT, "Enkelt spill")
 self.player_x = WIDTH // 2
 self.enemy_x = WIDTH - 50
 self.game_over = Falsk







instagram viewer



defoppsett(selv):
 arcade.set_background_color (arcade.color. HVIT)


defon_draw(selv):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arkade.farge. BLÅ)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arkade.farge. RØD)


defOppdater(selv, delta_tid):
 self.enemy_x += 0.5
hvis self.enemy_x >= BREDDE:
 self.game_over = ekte


defon_key_press(selv, nøkkel, modifikatorer):
hvis nøkkel == arkade.nøkkel. VENSTRE:
 self.player_x -= PLAYER_SPEED
elif nøkkel == arkade.nøkkel. IKKE SANT:
 self.player_x += PLAYER_SPEED
spill = spill()
game.setup()
arcade.run()

Legger til Game Over Screen

Legg til et spill over skjermen som viser en melding når fienden beveger seg utenfor spillvinduet. Bruke arcade.gui. UIManager og arcade.gui. UIMessageBox klasser for å oppnå dette.

Opprett en forekomst av UIManager og aktivere den. Inne i on_draw metode, sjekk om spillet er over flagget er satt, og i så fall tegne UI-manageren. De show_game_over_screen metoden skaper en UIMessageBox med en game-over-melding og legger den til i UI-behandleren. Du kan også aktivere og deaktivere UI-behandleren i Oppdater metode basert på spilltilstanden.

Opprett en ny fil med navnet game-over.py og legg til koden med oppdateringene nedenfor:

import arkade
fra arcade.gui import UIManager, UIMessageBox
BREDDE = 800
HØYDE = 600
PLAYER_SPEED = 25


klasseSpill(arkade. Vindu):
def__i det__(selv):
 super().__init__(WIDTH, HEIGHT, "Enkelt spill")
 self.player_x = WIDTH // 2
 self.enemy_x = WIDTH - 50
 self.ui_manager = UIManager()
 self.game_over = Falsk


defoppsett(selv):
 arcade.set_background_color (arcade.color. HVIT)
 self.ui_manager.enable() # Aktiver UI-behandleren


defon_draw(selv):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arkade.farge. BLÅ)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arkade.farge. RØD)
hvis self.game_over:
 self.ui_manager.draw()


defOppdater(selv, delta_tid):
 self.enemy_x += 0.5
hvis self.enemy_x >= BREDDE:
 self.show_game_over_screen()
 self.game_over = ekte
hvis self.game_over:
 self.ui_manager.enable()
ellers:
 self.ui_manager.disable()


defon_key_press(selv, nøkkel, modifikatorer):
hvis nøkkel == arkade.nøkkel. VENSTRE:
 self.player_x -= PLAYER_SPEED
elif nøkkel == arkade.nøkkel. IKKE SANT:
 self.player_x += PLAYER_SPEED


defshow_game_over_screen(selv):
 meldingsboks = UIMessageBox(
 bredde=400,
 høyde=200,
 meldingstekst="Spillet er over!"
 )
 self.ui_manager.add (meldingsboks)
spill = spill()
game.setup()
arcade.run()

Nedenfor er utgangen:

Legge til knapper

Nå kan du forbedre spillet over skjermen ved å legge til knapper for å starte spillet på nytt eller avslutte. Du kan oppnå dette ved å bruke knapper parameter av UIMessageBox og gir en tilbakeringingsfunksjon for å håndtere knappeklikk.

Opprett en ny fil med navnet buttons.py og legg til koden med oppdateringene nedenfor:

defshow_game_over_screen(selv):
 meldingsboks = UIMessageBox(
 bredde=400,
 høyde=200,
 meldingstekst="Spillet er over!",
 knapper=("Omstart", "Exit"),
 callback=self.on_game_over_button_click
 )
 self.ui_manager.add (meldingsboks)
defon_game_over_button_click(selv, button_text):
hvis button_text == "Omstart":
 self.restart_game()
elif button_text == "Exit":
 arcade.close_window()
defrestart_game(selv):
 self.game_over = Falsk
 self.enemy_x = WIDTH - 50
 self.ui_manager.clear()

Nedenfor er utgangen:

I show_game_over_screen metode, legg til to knapper, Omstart og Exit, til UIMessageBox ved å spesifisere dem i knapper parameter. Gi også en tilbakeringingsfunksjon, on_game_over_button_click, for å håndtere knappeklikk. Inne i tilbakeringingsfunksjonen, sjekk hvilken knapp som ble klikket på og utfør den tilsvarende handlingen.

Arcades GUI-verktøy tilbyr en rekke tilleggsfunksjoner som ytterligere kan forbedre funksjonaliteten og interaktiviteten til spillmenyene og UI-designene dine. Her er noen eksempler:

UIDraggableMixin

De UIDraggableMixin klasse kan brukes til å gjøre hvilken som helst UI-widget som kan dras. Den gir funksjonalitet for å håndtere dra-atferd, slik at brukere kan flytte UI-elementer rundt på skjermen. Ved å kombinere denne blandingen med andre UI-widgeter kan du lage drabare vinduer eller paneler i spillet ditt.

UIMouseFilterMixin

De UIMouseFilterMixin klasse lar deg fange opp alle musehendelser som oppstår i en bestemt widget. Dette er spesielt nyttig for vinduslignende widgets der du vil forhindre at musehendelser påvirker de underliggende UI-elementene. Ved å filtrere musehendelsene kan du kontrollere interaksjonen i widgeten uavhengig.

UIWindowLignerMixin

De UIWindowLignerMixin klasse gir vinduslignende oppførsel til en widget. Den håndterer alle musehendelser som oppstår innenfor widgetens grenser og lar widgeten dras. Dette er ideelt for å lage drabare vinduer eller paneler som brukere kan samhandle med i spillet ditt.

Flate

De Flate klasse representerer en buffer for å tegne UI-elementer. Den abstraherer tegningen på bufferen og gir metoder for å aktivere, fjerne og tegne bufferen på skjermen. Du kan bruke denne klassen internt for å gjengi widgets eller tilpassede brukergrensesnittelementer i spillet ditt.

Disse tilleggsfunksjonene gir muligheter for å skape mer interaktive og dynamiske brukeropplevelser i spillene dine. Eksperimenter med disse funksjonene for å legge til unik funksjonalitet og få spillmenyene og UI-designene til å skille seg ut.

Beste praksis for inkorporering av GUI

Når du integrerer GUI-verktøy i spillene dine ved å bruke Arcade, er det viktig å følge noen beste fremgangsmåter for å sikre en jevn og sømløs brukeropplevelse. Her er noen tips du bør huske på:

Plan og prototype

Før du går inn i implementeringen, bruk tid på å planlegge og lage prototyper av spillmenyene og UI-elementene dine. Vurder layout, funksjonalitet og visuell estetikk for å sikre en sammenhengende og brukervennlig design.

Hold det konsekvent

Oppretthold en konsistent visuell stil og layout på tvers av spillmenyene og brukergrensesnittelementene dine. Dette hjelper brukere med å navigere gjennom spillet lettere og gir en sammenhengende opplevelse.

Responsiv utforming

Design UI-elementene dine slik at de er responsive og kan tilpasses forskjellige skjermstørrelser og oppløsninger. Dette sikrer at spillmenyene og brukergrensesnittet forblir brukbare og visuelt tiltalende på ulike enheter.

Effektiv hendelseshåndtering

Håndter brukerinndatahendelser effektivt for å sikre responsive og jevne interaksjoner. Unngå unødvendige beregninger eller hendelsesbehandling som kan introdusere forsinkelser eller forsinkelser i UI-responsen.

Tilbakemelding fra brukere

Gi tydelig og umiddelbar tilbakemelding til brukere når de samhandler med spillmenyene og brukergrensesnittelementene dine. Visuelle signaler, animasjoner og lydtilbakemeldinger i spill kan forbedre brukeropplevelsen og få spillet til å føles mer polert.

Ved å følge disse beste fremgangsmåtene kan du lage spillmenyer og UI-design som er intuitive og visuelt tiltalende.

Øk brukerengasjementet med visuelt tiltalende brukergrensesnitt

Å legge til GUI-elementer i spillet forbedrer ikke bare brukervennligheten, men forbedrer også den visuelle appellen og det generelle engasjementet til spillerne. Enten du lager en startmeny, spill over skjerm eller et annet UI-element, tilbyr Arcades GUI-verktøy en rekke funksjoner for å forbedre spillets brukeropplevelse.