Aangepaste UI-menu's maken in Godot met behulp van besturingsknooppunten

Belangrijkste leerpunten

• Aangepaste menu's in Godot kunnen de betrokkenheid en gebruikerservaring verbeteren door gemakkelijke navigatie en snelle toegang tot gamefuncties te bieden.
• Godot biedt een krachtige toolset voor het maken van aangepaste UI-menu's met behulp van besturingsknooppunten in de game-engine.
• U kunt menu's maken zoals startmenu's, pauzemenu's en game-over-schermen in Godot door geschikte knooppunten toe te voegen en hun functionaliteit te implementeren met GDScript.

Aangepaste menu's kunnen de betrokkenheid en gebruikerservaring van je Godot-game enorm verbeteren. Door intuïtieve en visueel aantrekkelijke menu's te maken, kun je spelers eenvoudige navigatie en snelle toegang tot verschillende spelfuncties bieden.

Gelukkig biedt Godot een krachtige toolset voor het maken van aangepaste UI-menu's met behulp van besturingsknooppunten.

Het Godot-spel opzetten

Maak om te beginnen een 2D-spelscène in de Godot-game-engine. Voeg een... toe KinematicBody2D node voor het personage van de speler en voeg een BotsingVorm2D knoop eraan, definieer een rechthoekige vorm die het botsingsgebied van de speler vertegenwoordigt.

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.

Voeg daarnaast een Sprite2D node om het personage van de speler visueel weer te geven. Hieronder staat een GDScript-codefragment om spelersbewegingen mogelijk te maken:

breidt KinematicBody2D uit
constante SNELHEID = 200
const ZWAARTEKRACHT = 500
var snelheid = Vector2.NUL
func _physics_process (delta):
 var bewegingsrichting = 0
als Input.is_action_pressed("ui_right"):
 bewegingsrichting += 1
als Input.is_action_pressed("ui_links"):
 bewegingsrichting -= 1
 snelheid.x = bewegingsrichting * SNELHEID
 snelheid.y += ZWAARTEKRACHT * delta
 snelheid = move_and_slide (snelheid, Vector2.UP)

Definieer in deze code een constante SNELHEID om de bewegingssnelheid van de speler te regelen. Werk de snelheidsvariabele bij als reactie op gebruikersinvoer en bel verplaats_en_schuif() om de speler te verplaatsen, rekening houdend met botsingen en de zwaartekracht van het spel.

Maak een startmenu

Om een ​​startmenu in Godot te maken, voegt u een Control-knooppunt toe als de root van de scène. Voeg een Label-knooppunt toe als een kind van dit besturingsknooppunt en stel de tekst in op Eenvoudig spel. Je kunt het lettertype, de grootte en de kleur van het label aanpassen aan de stijl van je game.

Voeg daarna een Button-knooppunt toe als een kind van het Control-knooppunt. Stel de tekst van de knop in op Spel spelen. Schrijf aangepaste code voor de Spel spelen knop om de functionaliteit ervan af te handelen:

breidt controle uit
func_ready():
 var playButton = $Knop
 playButton.connect("gedrukt", zelf, "_on_PlayButton_ingedrukt")
func _on_PlayButton_pressed():
# Laad de spelscène
 var gameScene = preload("res://GameScene.tscn")

# Overgang naar de gamescène
 get_tree().change_scene (gameScene)

Deze code verbindt de ingedrukt signaal van de afspeelknop naar de _on_PlayButton_ingedrukt functie. Die functie laadt de spelscène met behulp van voorladen() en maakt er een instantie van. Het gebruikt dan verander_scène() om over te gaan naar de gamescène.

Op dezelfde manier kunt u een toevoegen Uitgang knop die spelers kunnen gebruiken om het spel te beëindigen:

func_ready():
 var playButton = $Knop
 var exitButton = $Button2
 playButton.connect("gedrukt", zelf, "_on_PlayButton_ingedrukt")
 exitButton.connect("gedrukt", zelf, "_on_ExitButton_ingedrukt")
func _on_ExitButton_pressed():
# Sluit het spel af
 get_tree().quit()

Deze code verbindt de ingedrukt signaal van de exit-knop naar de _on_ExitButton_ingedrukt functie. Die functie roept ontslag nemen() om het spel te verlaten.

Maak het pauzemenu

Om een ​​pauzemenu aan je Godot-spel toe te voegen, maak je een nieuwe scène aan met een besturingsknooppunt als hoofdmap van het pauzemenu. Ontwerp de visuele elementen van het menu, inclusief een label voor Gepauzeerd en knoppen om het spel te hervatten, terug te keren naar het hoofdmenu en het spel te verlaten.

Voeg de scène toe als een onderliggend knooppunt van het hoofdspel. Voeg in het script dat is gekoppeld aan het besturingsknooppunt de volgende code toe:

breidt controle uit
func_ready():
 $btnHervatten.verbinden("gedrukt", zelf, "_on_resume_button_ingedrukt")
 $btnHome.connect("gedrukt", zelf, "_on_menu_button_ingedrukt")
 $btnExit.connect("gedrukt", zelf, "_on_exit_button_ingedrukt")
 pause_mode = Knooppunt. PAUSE_MODE_PROCESS
 get_tree().paused = false
 zelf.verbergen()

func _input (gebeurtenis):
als evenement.is_action_pressed("ui_annuleren"):
alsniet zelf.is_visible_in_tree():
# Pauzeer het spel als het pauzemenu niet zichtbaar is
 zelf.show()
 get_tree().paused = waar
anders:
# Hervat het spel als het pauzemenu al zichtbaar is
 zelf.verbergen()
 get_tree().paused = false
func _on_resume_button_pressed():
# Verberg het pauzemenu en hervat het spel
 zelf.verbergen()
 get_tree().paused = false
func _on_menu_button_pressed():
# Keer terug naar het hoofdmenu
 get_tree().change_scene("res://StartMenu.tscn")
func _on_exit_button_pressed():
# Sluit het spel af
 get_tree().quit()

In de _klaar() functie, sluit de ingedrukt signaal van de knoppen hervatten, thuis en afsluiten naar hun respectieve functies: _on_resume_button_pressed(), _on_menu_button_pressed(), En _on_exit_button_pressed().

Stel de pauze_modus van het knooppunt naar Knooppunt. PAUSE_MODE_PROCESS. Hierdoor kan het spel gewoon doorgaan terwijl het pauzemenu zichtbaar is. Verberg standaard het pauzemenu met zelf.verbergen() En instellen get_tree().gepauzeerd naar vals om ervoor te zorgen dat het spel in eerste instantie niet wordt gepauzeerd.

Volgende, gebruik een if-statement in de _input (gebeurtenis) functie om te controleren of de ui_annuleren actie wordt ingedrukt. Als het pauzemenu momenteel niet zichtbaar is, kun je het spel pauzeren door het pauzemenu en de instellingen te tonen get_tree().gepauzeerd naar WAAR.

Maak een Game Over-scherm

Om een ​​game-over-scherm in Godot te implementeren, maakt u een aparte scène met de naam GameOver.tscn om de UI-elementen en functionaliteit te definiëren. Je kunt deze scène toevoegen als een onderliggend knooppunt wanneer de speler de schermgrenzen overschrijdt, wat het einde van het spel aangeeft.

Open een nieuwe scene in Godot en voeg een Control node toe als de root van de scene. Voeg binnen het Control-knooppunt een Label-knooppunt toe om de Spel is over tekst. Pas het lettertype, de grootte en de kleur van het label aan volgens de visuele stijl van je game.

Voeg vervolgens knopknooppunten toe voor de Speel opnieuw En Uitgang opties. Plaats ze op de juiste manier op het scherm.

Verbind de knopsignalen met hun respectieve functies om de acties af te handelen wanneer erop wordt geklikt. Sluit bijvoorbeeld de Speel opnieuw knop naar een functie genaamd onPlayAgainPressed en de Uitgang knop naar een functie genaamd onExitPressed.

Om de knopfunctionaliteit af te handelen, moet u de overeenkomstige functies definiëren in de GDScript-code van de game-over-scène. Hier is een voorbeeld:

breidt controle uit
func_ready():
 $Button.connect("gedrukt", zelf, "onPlayAgainPressed")
 $Button2.connect("gedrukt", zelf, "onExitPressed")
func onPlayAgainPressed():
 var gameScenePath = "res://GameScene.tscn"
 get_tree().change_scene (gameScenePath)

func onExitPressed():
 get_tree().quit() # Sluit de game-applicatie

Nadat u de GameOver.tscn scene en de benodigde knopfunctionaliteit hebt gedefinieerd, kunt u de volgende code gebruiken in de hoofdspelscène om het game over-scherm weer te geven:

breidt KinematicBody2D uit
func _physics_process (delta):
# Controleer of de speler de schermgrenzen heeft overschreden
 var screen_size = get_viewport_rect().size
als snelheid.y > schermgrootte.y of snelheid.y < 0:
 show_game_over_screen()
func show_game_over_screen():
 get_tree().change_scene("res://GameOver.tscn")

Het Game Over-scherm ziet er ongeveer zo uit, met knoppen waarmee de speler kan herstarten of stoppen:

Inclusief extra functies

Bij het maken van aangepaste UI-menu's in Godot met behulp van besturingsknooppunten, heb je de flexibiliteit om verschillende functies toe te voegen om de functionaliteit en visuele aantrekkingskracht van je menu's te verbeteren. Hier zijn enkele ideeën om te overwegen.

Geanimeerde overgangen

Voeg vloeiende overgangen toe tussen verschillende menuschermen, zoals fade-ins, slide-ins of schaaleffecten. U kunt dit bereiken door de eigenschappen van de besturingsknooppunten in de loop van de tijd te wijzigen met behulp van tweens of animatiespelers.

Geluidseffecten

Implementeer geluidseffecten om audiofeedback te geven wanneer de speler op de menuknoppen drukt. U kunt verschillende geluiden afspelen voor knopklikken, menu-overgangen of andere interacties om de menu's responsiever en aantrekkelijker te maken.

Het ingebouwde audiosysteem van Godot maakt het gemakkelijk om op geschikte momenten geluiden af ​​te spelen.

Visuele effecten

Gebruik shaders of partikelsystemen om visuele effecten aan uw menu's toe te voegen. U kunt bijvoorbeeld een subtiel gloei-effect toepassen op geselecteerde knoppen of partikeleffecten creëren die worden geactiveerd wanneer bepaalde menu-acties plaatsvinden. Deze effecten kunnen uw gebruikersinterface een gepolijst en meeslepend gevoel geven.

Achtergrondmuziek

Overweeg om te spelen auteursrechtvrije achtergrondmuziek specifiek voor elk menuscherm om een ​​meer meeslepende sfeer te creëren. U kunt audiostreams of audiobussen in Godot gebruiken om de achtergrondmuziek te beheren en te zorgen voor naadloze overgangen tussen verschillende tracks terwijl de speler door de menu's navigeert.

Ondersteuning voor lokalisatie

Als je van plan bent je game in meerdere talen te vertalen, overweeg dan om ondersteuning voor lokalisatie toe te voegen aan je UI-menu's.

Bied een mechanisme om de tekstinhoud van labels en knoppen dynamisch te wijzigen op basis van de geselecteerde taal. De lokalisatietools en bronnen van Godot kunnen helpen bij het beheren van meertalige UI-elementen.

Vergeet niet om uw menu's te testen en te herhalen met echte gebruikers om ervoor te zorgen dat de extra functies de algehele gebruikerservaring verbeteren en intuïtief te navigeren zijn. Besteed aandacht aan prestatieoverwegingen, vooral bij het gebruik van animaties en visuele effecten, om soepele en responsieve UI-interacties te garanderen.

Godot-spellen aantrekkelijker maken met een aangepast UI-menu

Aangepaste UI-menu's kunnen een cruciale rol spelen bij de betrokkenheid van spelers. Ze bieden intuïtieve navigatie, bieden gemakkelijke toegang tot gamefuncties en verbeteren de algehele visuele aantrekkingskracht van uw game.

Met een beetje creativiteit en wat codering kun je menu's ontwerpen die niet alleen essentiële functionaliteit bieden, maar ook spelers boeien en hun algehele game-ervaring verbeteren. Begin dus met het verkennen en samenstellen van je eigen unieke menu's om je Godot-spellen te laten opvallen.