Hvordan lage egendefinerte UI-menyer i Godot ved å bruke kontrollnoder

Viktige takeaways

• Egendefinerte menyer i Godot kan forbedre engasjement og brukeropplevelse ved å gi enkel navigering og rask tilgang til spillfunksjoner.
• Godot gir et kraftig verktøysett for å lage tilpassede UI-menyer ved å bruke kontrollnoder i spillmotoren.
• Du kan lage menyer som startmenyer, pausemenyer og game over-skjermer i Godot ved å legge til passende noder og implementere funksjonaliteten ved hjelp av GDScript.

Egendefinerte menyer kan i stor grad forbedre engasjementet og brukeropplevelsen til ditt Godot-spill. Ved å lage intuitive og visuelt tiltalende menyer kan du gi spillere enkel navigering og rask tilgang til ulike spillfunksjoner.

Heldigvis gir Godot et kraftig verktøysett for å lage tilpassede UI-menyer ved hjelp av kontrollnoder.

Sette opp Godot-spillet

For å begynne, lag en 2D-spillscene i Godot-spillmotoren. Legg til en KinematicBody2D node for spillerkarakteren og legg ved en

CollisionShape2D node til den, definer en rektangelform som representerer spillerens kollisjonsområde.

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

I tillegg inkluderer en Sprite2D node for å vise spillerkarakteren visuelt. Nedenfor er en GDScript-kodebit for å aktivere spillerbevegelse:

utvider KinematicBody2D
konstant HASTIGHET = 200
const GRAVITY = 500
var hastighet = Vektor2.NULL
func _physics_process (delta):
 var move_direction = 0
hvis Input.is_action_pressed("ui_right"):
 move_direction += 1
hvis Input.is_action_pressed("ui_left"):
 move_direction -= 1
 hastighet.x = bevegelsesretning * HASTIGHET
 hastighet.y += GRAVITY * delta
 hastighet = move_and_slide (hastighet, Vector2.UP)

I denne koden definerer du en konstant HASTIGHET for å kontrollere spillerens bevegelseshastighet. Oppdater hastighetsvariabelen som svar på brukerinndata, og ring move_and_slide() å flytte spilleren mens du tar hensyn til kollisjoner og spillets tyngdekraft.

Lag en startmeny

For å lage en startmeny i Godot, legg til en kontrollnode som roten til scenen. Legg til en etikettnode som underordnet denne kontrollnoden og angi teksten til Enkelt spill. Du kan tilpasse skrifttypen, størrelsen og fargen på etiketten for å matche spillets stil.

Deretter legger du til en knappnode som underordnet kontrollnoden. Sett knappens tekst til Spill. Skriv egendefinert kode for Spill knapp for å håndtere funksjonaliteten:

utvider kontrollen
func _ready():
 var playButton = $Button
 playButton.connect("trykket", selv, "_on_Play Button_pressed")
func _on_PlayButton_pressed():
# Last inn spillscenen
 var gameScene = forhåndslast("res://GameScene.tscn")

# Overgang til spillscenen
 get_tree().change_scene (gameScene)

Denne koden kobler sammen trykket signalet til play-knappen til _on_Play Button_pressed funksjon. Den funksjonen laster spillscenen ved hjelp av forhåndslast() og lager en forekomst av det. Den bruker da change_scene() for å gå over til spillscenen.

På samme måte kan du legge til en Exit knapp som spillere kan bruke for å avslutte spillet:

func _ready():
 var playButton = $Button
 var exitButton = $Button2
 playButton.connect("trykket", selv, "_on_Play Button_pressed")
 exitButton.connect("trykket", selv, "_on_ExitButton_pressed")
func _on_ExitButton_pressed():
# Avslutt spillet
 get_tree().quit()

Denne koden kobler sammen trykket signal fra utgangsknappen til _on_ExitButton_pressed funksjon. Den funksjonen kaller slutte() for å avslutte spillet.

Lag pausemenyen

For å legge til en pausemeny i Godot-spillet ditt, lag en ny scene med en kontrollnode som roten til pausemenyen. Design de visuelle elementene i menyen, inkludert en etikett for Pause og knapper for å gjenoppta spillet, gå tilbake til hovedmenyen og avslutte spillet.

Legg til scenen som en barnenode i hovedspillet. I skriptet som er knyttet til kontrollnoden, legg til følgende kode:

utvider kontrollen
func _ready():
 $btnResume.connect("trykket", selv, "_on_resume_button_pressed")
 $btnHome.connect("trykket", selv, "_på_meny_knapp_trykket")
 $btnExit.connect("trykket", selv, "_on_exit_button_pressed")
 pause_mode = Node. PAUSE_MODE_PROCESS
 get_tree().paused = usann
 self.hide()

func _input (hendelse):
hvis event.is_action_pressed("ui_cancel"):
hvisikke self.is_visible_in_tree():
# Sett spillet på pause når pausemenyen ikke er synlig
 self.show()
 get_tree().paused = sant
ellers:
# Opphev pausen i spillet når pausemenyen allerede er synlig
 self.hide()
 get_tree().paused = usann
func _on_resume_button_pressed():
# Skjul pausemenyen og gjenoppta spillet
 self.hide()
 get_tree().paused = usann
func _on_menu_button_pressed():
# Gå tilbake til hovedmenyen
 get_tree().change_scene("res://StartMenu.tscn")
func _on_exit_button_pressed():
# Avslutt spillet
 get_tree().quit()

I _klar() funksjon, koble til trykket signal fra CV-, Hjem- og Avslutt-knappene til deres respektive funksjoner: _on_resume_button_pressed(), _on_menu_button_pressed(), og _on_exit_button_pressed().

Sett pause_modus av noden til Node. PAUSE_MODE_PROCESS. Dette lar spillet fortsette å kjøre mens pausemenyen er synlig. Skjul pausemenyen som standard med self.hide() og sett get_tree().paused til falsk for å sikre at spillet ikke settes på pause først.

Neste, bruk en if-setning i _input (hendelse) funksjon for å sjekke om ui_cancel handling trykkes. Hvis pausemenyen ikke er synlig for øyeblikket, kan du sette spillet på pause ved å vise pausemenyen og innstillingen get_tree().paused til ekte.

Lag et spill over skjermen

For å implementere et spill over skjermen i Godot, lag en egen scene kalt GameOver.tscn for å definere UI-elementer og funksjonalitet. Du kan legge til denne scenen som en barnenode når spilleren krysser skjermgrensene, noe som indikerer slutten på spillet.

Åpne en ny scene i Godot og legg til en kontrollnode som roten til scenen. Inne i kontrollnoden legger du til en etikettnode for å vise Spillet er over tekst. Tilpass skrifttypen, størrelsen og fargen på etiketten i henhold til spillets visuelle stil.

Deretter legger du til knappnoder for Spill igjen og Exit alternativer. Plasser dem riktig på skjermen.

Koble knappesignalene til deres respektive funksjoner for å håndtere handlingene når de klikkes. Koble for eksempel til Spill igjen knappen til en funksjon kalt onPlay AgainPressed og Exit knappen til en funksjon kalt onExitPressed.

For å håndtere knappfunksjonaliteten, må du definere de tilsvarende funksjonene i GDScript-koden til spillet over scenen. Her er et eksempel:

utvider kontrollen
func _ready():
 $Button.connect("trykket", selv, "onPlayAgainPressed")
 $Button2.connect("trykket", selv, "onExitPressed")
func onPlayAgainPressed():
 var gameScenePath = "res://GameScene.tscn"
 get_tree().change_scene (gameScenePath)

func onExitPressed():
 get_tree().quit() # Lukk spillapplikasjonen

Når du har satt opp GameOver.tscn scene og definerte den nødvendige knappefunksjonaliteten, kan du bruke følgende kode i hovedspillscenen for å vise spillet over skjermen:

utvider KinematicBody2D
func _physics_process (delta):
# Sjekk om spilleren har krysset skjermgrensene
 var screen_size = get_viewport_rect().size
hvis velocity.y > screen_size.y eller hastighet.y < 0:
 show_game_over_screen()
func show_game_over_screen():
 get_tree().change_scene("res://GameOver.tscn")

Game Over-skjermen vil se omtrent slik ut, med knapper som spilleren kan starte på nytt eller avslutte:

Inkludert tilleggsfunksjoner

Når du lager egendefinerte UI-menyer i Godot ved å bruke kontrollnoder, har du fleksibiliteten til å legge til ulike funksjoner for å forbedre funksjonaliteten og den visuelle appellen til menyene dine. Her er noen ideer du bør vurdere.

Animerte overganger

Legg til jevne overganger mellom ulike menyskjermer, for eksempel fade-in, slide-in eller skaleringseffekter. Du kan oppnå dette ved å endre egenskapene til kontrollnodene over tid ved å bruke tweens eller animasjonsspillere.

Lydeffekter

Implementer lydeffekter for å gi lydtilbakemelding når spilleren trykker på menyknappene. Du kan spille av forskjellige lyder for knappeklikk, menyoverganger eller andre interaksjoner for å få menyene til å føles mer responsive og engasjerende.

Godots innebygde lydsystem gjør det enkelt å spille av lyder på passende tidspunkt.

Visuelle effekter

Bruk shaders eller partikkelsystemer for å legge til visuelle effekter til menyene dine. Du kan for eksempel bruke en subtil glødeffekt på utvalgte knapper eller lage partikkeleffekter som utløses når visse menyhandlinger skjer. Disse effektene kan legge til en polert og oppslukende følelse til brukergrensesnittet ditt.

Bakgrunnsmusikk

Vurder å spille opphavsrettsfri bakgrunnsmusikk spesifikt for hver menyskjerm for å skape en mer oppslukende atmosfære. Du kan bruke lydstrømmer eller lydbusser i Godot for å administrere bakgrunnsmusikken og sikre sømløse overganger mellom forskjellige spor mens spilleren navigerer gjennom menyene.

Lokaliseringsstøtte

Hvis du planlegger å oversette spillet til flere språk, bør du vurdere å legge til lokaliseringsstøtte til UI-menyene dine.

Gi en mekanisme for dynamisk å endre tekstinnholdet i etiketter og knapper basert på det valgte språket. Godots lokaliseringsverktøy og ressurser kan hjelpe med å administrere flerspråklige brukergrensesnittelementer.

Husk å teste og gjenta menyene dine med ekte brukere for å sikre at tilleggsfunksjonene forbedrer den generelle brukeropplevelsen og er intuitive å navigere. Vær oppmerksom på ytelseshensyn, spesielt når du bruker animasjoner og visuelle effekter, for å sikre jevne og responsive UI-interaksjoner.

Gjør Godot-spill mer engasjerende med tilpasset brukergrensesnittmeny

Egendefinerte UI-menyer kan spille en avgjørende rolle i spillerengasjement. De gir intuitiv navigering, gir enkel tilgang til spillfunksjoner og forbedrer spillets generelle visuelle appell.

Med litt kreativitet og litt koding kan du designe menyer som ikke bare gir viktig funksjonalitet, men som også fengsler spillere og forbedrer deres generelle spillopplevelse. Så begynn å utforske og lage dine egne unike menyer for å få Godot-spillene dine til å skille seg ut fra mengden.