Lär dig att skapa spelmenyer och designa användargränssnitt utan ansträngning med Arcades GUI-verktyg.

Spelmenyer och användargränssnitt (UI) spelar en avgörande roll för att förbättra användarupplevelsen och engagemanget i ett spel. Arcade, ett populärt Python-bibliotek för spelutveckling, tillhandahåller kraftfulla GUI-verktyg (Graphical User Interface) som gör det enkelt att designa och implementera spelmenyer och UI-element.

Skapa ett enkelt spel

Innan du börjar, se till att du har pip installerad på din enhet. Använd detta kommando för att installera arkadbiblioteket:

pip installera arkad

Börja med att skapa ett enkelt spel med Arcade.

Koden som används i den här artikeln är tillgänglig i denna GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Detta spel kommer att innehålla ett spelarobjekt som kan röra sig åt vänster och höger och ett fiendeobjekt. Här är koden för spelet:

importera arkad
BREDD = 800
HÖJD = 600
PLAYER_SPEED = 25


klassSpel(arkad. Fönster):
def__i det__(själv):





instagram viewer


 super().__init__(WIDTH, HEIGHT, "Enkelt spel")
 self.player_x = WIDTH // 2
 self.enemy_x = WIDTH - 50
 self.game_over = Falsk


defuppstart(själv):
 arcade.set_background_color (arcade.color. VIT)


defon_draw(själv):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arkad.färg. BLÅ)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arkad.färg. RÖD)


defuppdatering(själv, delta_tid):
 self.enemy_x += 0.5
om self.enemy_x >= BREDD:
 self.game_over = Sann


defon_key_press(själv, nyckel, modifierare):
om nyckel == arkad.nyckel. VÄNSTER:
 self.player_x -= PLAYER_SPEED
elif nyckel == arkad.nyckel. HÖGER:
 self.player_x += PLAYER_SPEED
spel = Spel()
game.setup()
arcade.run()

Lägger till Game Over Screen

Lägg till ett spel över skärmen som visar ett meddelande när fienden rör sig utanför spelfönstret. Använd arcade.gui. UIManager och arcade.gui. UIMessageBox klasser för att uppnå detta.

Skapa en instans av UIManager och aktivera det. Inuti on_draw metod, kontrollera om game_over flaggan är inställd, och i så fall rita UI-hanteraren. De show_game_over_screen metod skapar en UIMessageBox med ett game-over-meddelande och lägger till det i UI-hanteraren. Du kan också aktivera och inaktivera UI-hanteraren i uppdatering metod baserad på spelets tillstånd.

Skapa en ny fil med namnet game-over.py och lägg till koden med följande uppdateringar:

importera arkad
från arcade.gui importera UIManager, UIMessageBox
BREDD = 800
HÖJD = 600
PLAYER_SPEED = 25


klassSpel(arkad. Fönster):
def__i det__(själv):
 super().__init__(WIDTH, HEIGHT, "Enkelt spel")
 self.player_x = WIDTH // 2
 self.enemy_x = WIDTH - 50
 self.ui_manager = UIManager()
 self.game_over = Falsk


defuppstart(själv):
 arcade.set_background_color (arcade.color. VIT)
 self.ui_manager.enable() # Aktivera UI-hanteraren


defon_draw(själv):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arkad.färg. BLÅ)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arkad.färg. RÖD)
om self.game_over:
 self.ui_manager.draw()


defuppdatering(själv, delta_tid):
 self.enemy_x += 0.5
om self.enemy_x >= BREDD:
 self.show_game_over_screen()
 self.game_over = Sann
om self.game_over:
 self.ui_manager.enable()
annan:
 self.ui_manager.disable()


defon_key_press(själv, nyckel, modifierare):
om nyckel == arkad.nyckel. VÄNSTER:
 self.player_x -= PLAYER_SPEED
elif nyckel == arkad.nyckel. HÖGER:
 self.player_x += PLAYER_SPEED


defshow_game_over_screen(själv):
 message_box = UIMessageBox(
 bredd=400,
 höjd=200,
 message_text="Spelet över!"
 )
 self.ui_manager.add (meddelanderuta)
spel = Spel()
game.setup()
arcade.run()

Nedan är utgången:

Lägga till knappar

Förbättra nu spelet över skärmen genom att lägga till knappar för att starta om spelet eller avsluta. Du kan åstadkomma detta genom att använda knappar parameter för UIMessageBox och tillhandahåller en återuppringningsfunktion för att hantera knappklickningar.

Skapa en ny fil med namnet buttons.py och lägg till koden med följande uppdateringar:

defshow_game_over_screen(själv):
 message_box = UIMessageBox(
 bredd=400,
 höjd=200,
 message_text="Spelet över!",
 knappar=("Omstart", "Utgång"),
 callback=self.on_game_over_button_click
 )
 self.ui_manager.add (meddelanderuta)
defon_game_over_button_click(själv, button_text):
om button_text == "Omstart":
 self.restart_game()
elif button_text == "Utgång":
 arcade.close_window()
defrestart_game(själv):
 self.game_over = Falsk
 self.enemy_x = WIDTH - 50
 self.ui_manager.clear()

Nedan är utgången:

I den show_game_over_screen metod, lägg till två knappar, Omstart och Utgång, till UIMessageBox genom att ange dem i knappar parameter. Tillhandahåll även en återuppringningsfunktion, on_game_over_button_click, för att hantera knappklick. Inuti återuppringningsfunktionen, kontrollera vilken knapp som klickades på och utför motsvarande åtgärd.

Arcades GUI-verktyg erbjuder en mängd ytterligare funktioner som ytterligare kan förbättra funktionaliteten och interaktiviteten hos dina spelmenyer och UI-designer. Här är några exempel:

UIDraggableMixin

De UIDraggableMixin klass kan användas för att göra vilken UI-widget som helst som kan dras. Det ger funktionalitet för att hantera dragbeteende, vilket gör att användare kan flytta UI-element runt på skärmen. Genom att kombinera denna mixin med andra UI-widgets kan du skapa dragbara fönster eller paneler i ditt spel.

UIMouseFilterMixin

De UIMouseFilterMixin klass gör att du kan fånga alla mushändelser som inträffar inom en specifik widget. Detta är särskilt användbart för fönsterliknande widgets där du vill förhindra mushändelser från att påverka de underliggande UI-elementen. Genom att filtrera mushändelserna kan du kontrollera interaktionen inom widgeten oberoende av varandra.

UIWindowLiknandeMixin

De UIWindowLiknandeMixin klass ger fönsterliknande beteende till en widget. Den hanterar alla mushändelser som inträffar inom widgetens gränser och låter widgeten dras. Detta är idealiskt för att skapa dragbara fönster eller paneler som användare kan interagera med i ditt spel.

Yta

De Yta klass representerar en buffert för att rita UI-element. Den abstraherar ritningen på bufferten och tillhandahåller metoder för att aktivera, rensa och rita bufferten på skärmen. Du kan använda den här klassen internt för att rendera widgets eller anpassade UI-element i ditt spel.

Dessa ytterligare funktioner erbjuder möjligheter att skapa mer interaktiva och dynamiska användarupplevelser i dina spel. Experimentera med dessa funktioner för att lägga till unik funktionalitet och få dina spelmenyer och UI-design att sticka ut.

Bästa praxis för att införliva GUI

När du införlivar GUI-verktyg i dina spel med Arcade, är det viktigt att följa några bästa praxis för att säkerställa en smidig och sömlös användarupplevelse. Här är några tips att tänka på:

Plan och prototyp

Innan du börjar implementera, ägna tid åt att planera och prototyper av dina spelmenyer och UI-element. Tänk på layout, funktionalitet och visuell estetik för att säkerställa en sammanhängande och användarvänlig design.

Håll det konsekvent

Upprätthåll en konsekvent visuell stil och layout över dina spelmenyer och UI-element. Detta hjälper användare att navigera genom ditt spel lättare och ger en sammanhållen upplevelse.

Responsiv design

Designa dina UI-element för att vara lyhörda och anpassningsbara till olika skärmstorlekar och upplösningar. Detta säkerställer att dina spelmenyer och användargränssnitt förblir användbara och visuellt tilltalande på olika enheter.

Effektiv eventhantering

Hantera användarinmatningshändelser effektivt för att säkerställa lyhörd och smidig interaktion. Undvik onödiga beräkningar eller händelsebearbetning som kan leda till fördröjning eller fördröjning av gränssnittets respons.

Användarfeedback

Ge tydlig och omedelbar feedback till användarna när de interagerar med dina spelmenyer och UI-element. Visuella signaler, animationer och ljudåterkoppling i spel kan förbättra användarupplevelsen och få spelet att kännas mer polerat.

Genom att följa dessa bästa metoder kan du skapa spelmenyer och UI-designer som är intuitiva och visuellt tilltalande.

Öka användarengagemang med visuellt tilltalande användargränssnitt

Att lägga till GUI-element i ditt spel förbättrar inte bara användbarheten utan förbättrar också spelarnas visuella tilltalande och övergripande engagemang. Oavsett om du skapar en startmeny, spel över skärmen eller något annat UI-element, erbjuder Arcades GUI-verktyg en rad funktioner och funktioner för att förbättra ditt spels användarupplevelse.