Lær at skabe spilmenuer og designe brugergrænseflader ubesværet ved hjælp af Arcades GUI-værktøjer.

Spilmenuer og brugergrænseflader (UI) spiller en afgørende rolle i at forbedre brugeroplevelsen og engagementet i et spil. Arcade, et populært Python-bibliotek til spiludvikling, giver kraftfulde GUI-værktøjer (Graphical User Interface), der gør det nemt at designe og implementere spilmenuer og UI-elementer.

Opret et simpelt spil

Før du starter, skal du sikre dig, at du har pip installeret på din enhed. Brug denne kommando til at installere arkadebiblioteket:

pip installere arkade

Start med at skabe et simpelt spil ved hjælp af Arcade.

Koden brugt i denne artikel er tilgængelig i denne GitHub-depot og er gratis for dig at bruge under MIT-licensen.

Dette spil vil indeholde et spillerobjekt, der kan bevæge sig til venstre og højre, og et fjendeobjekt. Her er koden til spillet:

importere arkade
BREDDE = 800
HØJDE = 600
PLAYER_SPEED = 25


klasseSpil(arkade. Vindue):
def__i det__(selv):
 super().__init__(WIDTH, HEIGHT, 





instagram viewer

"Simpelt spil")
 self.player_x = BREDDE // 2
 self.enemy_x = BREDDE - 50
 self.game_over = Falsk


defOpsætning(selv):
 arcade.set_background_color (arcade.color. HVID)


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


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


defon_key_press(selv, nøgle, modifikatorer):
hvis nøgle == arkade.nøgle. VENSTRE:
 self.player_x -= PLAYER_SPEED
elif nøgle == arkade.nøgle. HØJRE:
 self.player_x += PLAYER_SPEED
spil = spil()
game.setup()
arcade.run()

Tilføjelse af Game Over Screen

Tilføj et spil over skærmen, der viser en besked, når fjenden bevæger sig uden for spilvinduet. Brug arcade.gui. UIManager og arcade.gui. UIMessageBox klasser for at opnå dette.

Opret en instans af UIManager og aktivere det. Inde i on_draw metode, skal du kontrollere, om game_over flag er sat, og hvis det er tilfældet, tegn UI-manageren. Det show_game_over_screen metode skaber en UIMessageBox med en game-over-meddelelse og føjer den til UI-manageren. Du kan også aktivere og deaktivere UI-manageren i opdatering metode baseret på spillets tilstand.

Opret en ny fil med navnet game-over.py og tilføj koden med nedenstående opdateringer:

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


klasseSpil(arkade. Vindue):
def__i det__(selv):
 super().__init__(WIDTH, HEIGHT, "Simpelt spil")
 self.player_x = BREDDE // 2
 self.enemy_x = BREDDE - 50
 self.ui_manager = UIManager()
 self.game_over = Falsk


defOpsætning(selv):
 arcade.set_background_color (arcade.color. HVID)
 self.ui_manager.enable() # Aktiver UI-manageren


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


defopdatering(selv, delta_tid):
 self.enemy_x += 0.5
hvis self.enemy_x >= BREDDE:
 self.show_game_over_screen()
 self.game_over = Rigtigt
hvis self.game_over:
 self.ui_manager.enable()
andet:
 self.ui_manager.disable()


defon_key_press(selv, nøgle, modifikatorer):
hvis nøgle == arkade.nøgle. VENSTRE:
 self.player_x -= PLAYER_SPEED
elif nøgle == arkade.nøgle. HØJRE:
 self.player_x += PLAYER_SPEED


defshow_game_over_screen(selv):
 message_box = UIMessageBox(
 bredde =400,
 højde=200,
 message_text="Spillet er slut!"
 )
 self.ui_manager.add (message_box)
spil = spil()
game.setup()
arcade.run()

Nedenfor er output:

Tilføjelse af knapper

Forbedr nu spillet over skærmen ved at tilføje knapper for at genstarte spillet eller afslutte. Du kan opnå dette ved at bruge knapper parameter af UIMessageBox og giver en tilbagekaldsfunktion til at håndtere knapklik.

Opret en ny fil med navnet buttons.py og tilføj koden med nedenstående opdateringer:

defshow_game_over_screen(selv):
 message_box = UIMessageBox(
 bredde =400,
 højde=200,
 message_text="Spillet er slut!",
 knapper=("Genstart", "Afslut"),
 callback=self.on_game_over_button_click
 )
 self.ui_manager.add (message_box)
defon_game_over_button_click(selv, button_text):
hvis button_text == "Genstart":
 self.restart_game()
elif button_text == "Afslut":
 arcade.close_window()
defgenstart_spil(selv):
 self.game_over = Falsk
 self.enemy_x = BREDDE - 50
 self.ui_manager.clear()

Nedenfor er output:

I show_game_over_screen metode, tilføje to knapper, Genstart og Afslut, til UIMessageBox ved at angive dem i knapper parameter. Giv også en tilbagekaldsfunktion, on_game_over_button_click, for at håndtere knapklik. Inde i tilbagekaldsfunktionen skal du kontrollere, hvilken knap der blev klikket på, og udføre den tilsvarende handling.

Arcades GUI-værktøjer tilbyder en række ekstra funktioner, der yderligere kan forbedre funktionaliteten og interaktiviteten af ​​dine spilmenuer og UI-design. Her er et par eksempler:

UIDraggableMixin

Det UIDraggableMixin klasse kan bruges til at gøre enhver UI-widget, der kan trækkes. Det giver funktionalitet til at håndtere trækadfærd, hvilket giver brugerne mulighed for at flytte UI-elementer rundt på skærmen. Ved at kombinere denne blanding med andre UI-widgets kan du oprette trækbare vinduer eller paneler i dit spil.

UIMouseFilterMixin

Det UIMouseFilterMixin klasse giver dig mulighed for at fange alle musehændelser, der forekommer i en bestemt widget. Dette er især nyttigt for vindueslignende widgets, hvor du vil forhindre musehændelser i at påvirke de underliggende UI-elementer. Ved at filtrere musehændelserne kan du styre interaktionen i widgetten uafhængigt.

UIWindowLikeMixin

Det UIWindowLikeMixin klasse giver vindueslignende adfærd til en widget. Den håndterer alle musehændelser, der forekommer inden for widgetens grænser, og gør det muligt at trække widgetten. Dette er ideelt til at skabe vinduer eller paneler, der kan trækkes, som brugere kan interagere med i dit spil.

Overflade

Det Overflade klasse repræsenterer en buffer til tegning af UI-elementer. Det abstraherer tegningen på bufferen og giver metoder til at aktivere, rydde og tegne bufferen på skærmen. Du kan bruge denne klasse internt til at gengive widgets eller brugerdefinerede UI-elementer i dit spil.

Disse ekstra funktioner giver mulighed for at skabe mere interaktive og dynamiske brugeroplevelser i dine spil. Eksperimenter med disse funktioner for at tilføje unik funktionalitet og få dine spilmenuer og UI-design til at skille sig ud.

Bedste fremgangsmåder til at inkorporere GUI

Når du inkorporerer GUI-værktøjer i dine spil ved hjælp af Arcade, er det vigtigt at følge nogle bedste praksisser for at sikre en jævn og problemfri brugeroplevelse. Her er nogle tips, du skal huske på:

Plan og prototype

Før du dykker ned i implementeringen, skal du bruge tid på at planlægge og lave prototyper til dine spilmenuer og UI-elementer. Overvej layout, funktionalitet og visuelle æstetik for at sikre et sammenhængende og brugervenligt design.

Hold det konsekvent

Oprethold en ensartet visuel stil og layout på tværs af dine spilmenuer og UI-elementer. Dette hjælper brugerne med at navigere lettere gennem dit spil og giver en sammenhængende oplevelse.

Responsivt design

Design dine UI-elementer, så de er lydhøre og kan tilpasses til forskellige skærmstørrelser og opløsninger. Dette sikrer, at dine spilmenuer og brugergrænseflade forbliver brugbare og visuelt tiltalende på forskellige enheder.

Effektiv eventhåndtering

Håndter brugerinputhændelser effektivt for at sikre lydhøre og jævne interaktioner. Undgå unødvendige beregninger eller hændelsesbehandling, der kan introducere forsinkelse eller forsinkelse i UI-respons.

Brugerfeedback

Giv klar og øjeblikkelig feedback til brugerne, når de interagerer med dine spilmenuer og UI-elementer. Visuelle signaler, animationer og lydfeedback i spil kan forbedre brugeroplevelsen og få spillet til at føles mere poleret.

Ved at følge disse bedste fremgangsmåder kan du oprette spilmenuer og UI-design, der er intuitive og visuelt tiltalende.

Øg brugerengagementet med visuelt tiltalende brugergrænseflade

Tilføjelse af GUI-elementer til dit spil forbedrer ikke kun brugervenligheden, men forbedrer også den visuelle appel og det overordnede engagement hos spillere. Uanset om du opretter en startmenu, spil over skærmen eller et hvilket som helst andet UI-element, tilbyder Arcades GUI-værktøjer en række funktioner og funktionaliteter til at forbedre dit spils brugeroplevelse.