Impara a creare menu di gioco e progettare interfacce utente senza sforzo utilizzando gli strumenti GUI di Arcade.

I menu di gioco e le interfacce utente (UI) svolgono un ruolo cruciale nel migliorare l'esperienza dell'utente e il coinvolgimento di un gioco. Arcade, una popolare libreria Python per lo sviluppo di giochi, fornisce potenti strumenti GUI (Graphical User Interface) che semplificano la progettazione e l'implementazione di menu di gioco ed elementi dell'interfaccia utente.

Crea un gioco semplice

Prima di iniziare, assicurati di averlo pip installato sul tuo dispositivo. Usa questo comando per installare la libreria arcade:

pip installa sala giochi

Inizia creando un semplice gioco usando Arcade.

Il codice utilizzato in questo articolo è disponibile in this Deposito GitHub ed è gratuito per l'uso con la licenza MIT.

Questo gioco presenterà un oggetto giocatore che può muoversi a sinistra ea destra e un oggetto nemico. Ecco il codice del gioco:

importare sala giochi

LARGHEZZA = 800
ALTEZZA = 600
GIOCATORE_VELOCITÀ = 25

instagram viewer

classeGioco(sala giochi. Finestra):
def__dentro__(se stesso):
super().__init__(LARGHEZZA, ALTEZZA, "Gioco semplice")
self.player_x = LARGHEZZA // 2
self.enemy_x = LARGHEZZA - 50
self.game_over = Falso

defimpostare(se stesso):
arcade.set_background_color (arcade.color. BIANCO)

defon_draw(se stesso):
arcade.start_render()
arcade.draw_circle_filled (self.player_x, ALTEZZA // 2, 20, arcade.color. BLU)
arcade.draw_circle_filled (self.enemy_x, ALTEZZA // 2, 20, arcade.color. ROSSO)

defaggiornamento(self, delta_time):
self.nemico_x += 0.5
Se self.enemy_x >= LARGHEZZA:
self.game_over = VERO

defon_key_press(self, chiave, modificatori):
Se chiave == arcade.chiave. SINISTRA:
self.player_x -= PLAYER_SPEED
elif chiave == arcade.chiave. GIUSTO:
self.player_x += PLAYER_SPEED

gioco = Gioco()
gioco.setup()
arcade.run()

Aggiunta della schermata Game Over

Aggiungi una schermata di game over che visualizza un messaggio quando il il nemico si muove fuori dalla finestra di gioco. Usa il arcade.gui. UIManager E arcade.gui. UIMessageBox classi per raggiungere questo obiettivo.

Crea un'istanza di UIManager e abilitarlo. Dentro il on_draw metodo, controlla se il game Over flag è impostato e, in tal caso, disegna il gestore dell'interfaccia utente. IL show_game_over_screen metodo crea un UIMessageBox con un messaggio di game over e lo aggiunge al gestore dell'interfaccia utente. Puoi anche abilitare e disabilitare il gestore dell'interfaccia utente nel file aggiornamento metodo basato sullo stato del gioco.

Crea un nuovo file denominato game-over.py e aggiungi il codice con i seguenti aggiornamenti:

importare sala giochi
da arcade.gui importare UIManager, UIMessageBox

LARGHEZZA = 800
ALTEZZA = 600
GIOCATORE_VELOCITÀ = 25

classeGioco(sala giochi. Finestra):
def__dentro__(se stesso):
super().__init__(LARGHEZZA, ALTEZZA, "Gioco semplice")
self.player_x = LARGHEZZA // 2
self.enemy_x = LARGHEZZA - 50
self.ui_manager = UIManager()
self.game_over = Falso

defimpostare(se stesso):
arcade.set_background_color (arcade.color. BIANCO)
self.ui_manager.enable() # Abilita il gestore dell'interfaccia utente

defon_draw(se stesso):
arcade.start_render()
arcade.draw_circle_filled (self.player_x, ALTEZZA // 2, 20, arcade.color. BLU)
arcade.draw_circle_filled (self.enemy_x, ALTEZZA // 2, 20, arcade.color. ROSSO)
Se self.game_over:
self.ui_manager.draw()

defaggiornamento(self, delta_time):
self.nemico_x += 0.5
Se self.enemy_x >= LARGHEZZA:
self.show_game_over_screen()
self.game_over = VERO
Se self.game_over:
self.ui_manager.enable()
altro:
self.ui_manager.disable()

defon_key_press(self, chiave, modificatori):
Se chiave == arcade.chiave. SINISTRA:
self.player_x -= PLAYER_SPEED
elif chiave == arcade.chiave. GIUSTO:
self.player_x += PLAYER_SPEED

defshow_game_over_screen(se stesso):
message_box = UIMessageBox(
larghezza=400,
altezza=200,
message_text="Game Over!"
)
self.ui_manager.add (message_box)

gioco = Gioco()
gioco.setup()
arcade.run()

Di seguito è riportato l'output:

Aggiunta di pulsanti

Ora, migliora la schermata del gioco aggiungendo pulsanti per riavviare il gioco o uscire. Puoi farlo usando il pulsanti parametro di UIMessageBox e fornire una funzione di richiamata per gestire i clic sui pulsanti.

Crea un nuovo file denominato pulsanti.py e aggiungi il codice con i seguenti aggiornamenti:

defshow_game_over_screen(se stesso):
message_box = UIMessageBox(
larghezza=400,
altezza=200,
message_text="Game Over!",
pulsanti=("Ricomincia", "Uscita"),
callback=self.on_game_over_button_click
)
self.ui_manager.add (message_box)

defon_game_over_button_click(self, testo_pulsante):
Se button_text == "Ricomincia":
self.restart_game()
elif button_text == "Uscita":
arcade.close_window()

defriavvia_gioco(se stesso):
self.game_over = Falso
self.enemy_x = LARGHEZZA - 50
self.ui_manager.clear()

Di seguito è riportato l'output:

Nel show_game_over_screen metodo, aggiungi due pulsanti, Ricomincia E Uscita, al UIMessageBox specificandoli nell' pulsanti parametro. Fornisci anche una funzione di richiamata, on_game_over_button_click, per gestire i clic sui pulsanti. All'interno della funzione di callback, controlla quale pulsante è stato cliccato ed esegui l'azione corrispondente.

Gli strumenti GUI di Arcade offrono una varietà di funzionalità aggiuntive che possono migliorare ulteriormente la funzionalità e l'interattività dei menu di gioco e del design dell'interfaccia utente. Ecco alcuni esempi:

UIDraggableMixin

IL UIDraggableMixin class può essere utilizzata per rendere trascinabile qualsiasi widget dell'interfaccia utente. Fornisce funzionalità per gestire il comportamento di trascinamento, consentendo agli utenti di spostare gli elementi dell'interfaccia utente sullo schermo. La combinazione di questo mixin con altri widget dell'interfaccia utente ti consente di creare finestre o pannelli trascinabili nel tuo gioco.

UIMuseFilterMixin

IL UIMuseFilterMixin class ti consente di catturare tutti gli eventi del mouse che si verificano all'interno di un widget specifico. Ciò è particolarmente utile per i widget simili a finestre in cui si desidera impedire agli eventi del mouse di influire sugli elementi dell'interfaccia utente sottostanti. Filtrando gli eventi del mouse, puoi controllare l'interazione all'interno del widget in modo indipendente.

UIWindowLikeMixin

IL UIWindowLikeMixin class fornisce un comportamento simile a una finestra a un widget. Gestisce tutti gli eventi del mouse che si verificano all'interno dei limiti del widget e consente di trascinare il widget. Questo è l'ideale per creare finestre o pannelli trascinabili con cui gli utenti possono interagire nel gioco.

Superficie

IL Superficie class rappresenta un buffer per disegnare elementi dell'interfaccia utente. Astrae il disegno sul buffer e fornisce metodi per attivare, cancellare e disegnare il buffer sullo schermo. Puoi utilizzare questa classe internamente per il rendering di widget o elementi dell'interfaccia utente personalizzati nel tuo gioco.

Queste funzionalità aggiuntive offrono opportunità per creare esperienze utente più interattive e dinamiche nei tuoi giochi. Sperimenta queste funzionalità per aggiungere funzionalità uniche e far risaltare i menu di gioco e il design dell'interfaccia utente.

Best practice per incorporare la GUI

Quando incorpori strumenti GUI nei tuoi giochi utilizzando Arcade, è importante seguire alcune best practice per garantire un'esperienza utente fluida e senza interruzioni. Ecco alcuni suggerimenti da tenere a mente:

Progetto e prototipo

Prima di immergerti nell'implementazione, dedica del tempo alla pianificazione e alla prototipazione dei menu di gioco e degli elementi dell'interfaccia utente. Considera il layout, la funzionalità e l'estetica visiva per garantire un design coerente e intuitivo.

Mantienilo coerente

Mantieni uno stile visivo e un layout coerenti nei menu di gioco e negli elementi dell'interfaccia utente. Questo aiuta gli utenti a navigare più facilmente nel gioco e fornisce un'esperienza coerente.

Design reattivo

Progetta i tuoi elementi dell'interfaccia utente in modo che siano reattivi e adattabili a diverse dimensioni e risoluzioni dello schermo. Ciò garantisce che i menu di gioco e l'interfaccia utente rimangano utilizzabili e visivamente accattivanti su vari dispositivi.

Gestione efficiente degli eventi

Gestisci gli eventi di input dell'utente in modo efficiente per garantire interazioni reattive e fluide. Evita calcoli o elaborazioni di eventi non necessari che potrebbero introdurre ritardi o ritardi nella reattività dell'interfaccia utente.

Feedback degli utenti

Fornisci un feedback chiaro e immediato agli utenti quando interagiscono con i menu di gioco e gli elementi dell'interfaccia utente. Segnali visivi, animazioni e il feedback audio nei giochi può migliorare l'esperienza dell'utente e rendere il gioco più raffinato.

Seguendo queste best practice, puoi creare menu di gioco e design dell'interfaccia utente intuitivi e visivamente accattivanti.

Aumenta il coinvolgimento degli utenti con un'interfaccia utente visivamente accattivante

L'aggiunta di elementi GUI al tuo gioco non solo migliora l'usabilità, ma migliora anche l'appeal visivo e il coinvolgimento generale dei giocatori. Sia che tu stia creando un menu di avvio, una schermata di gioco o qualsiasi altro elemento dell'interfaccia utente, gli strumenti della GUI di Arcade offrono una gamma di caratteristiche e funzionalità per migliorare l'esperienza utente del tuo gioco.