Kategorie
Samouczki

Gra Air Combat – Tworzenie prostego UI – 6

Dobra, to wracamy do naszej Sceny głównej, czas dodać kilka przycisków, jeden startujący grę i drugi by ją zakończyć. Sprawi to, że nasz ekran główny będzie również menu głównym.

Tworzenie prostego UI

Zaczynamy od dodania ToolButton do sceny, podrzędnej do węzła głównego Control. Zmieniamy nazwę przycisku na QuitGameButton. Po utworzeniu możesz ustawić tekst przycisku w Inspektorze w polu Text

Tworzenie czcionki

Przycisk używa w tej chwili domyślnej czcionki, która nie wygląda zbyt dobrze, więc stwórzmy własną. Przewiń w dół sekcję Control w Inspektorze, odnajdź CustomFonts, rozwiń tę pozycję i wybierz Nowy DynamicFont (New DynamicFont).

Teraz dwuklik na nowo stworzonym DynamicFont by rozwinąć opcje, teraz ustaw następujące wartości w sekcji SettingsSize = 64, Outline Size = 4, Outline Color ustaw czarny. W końcu znajdź plik animeace.ttf z lokalizacji assets/font i przeciągnij go na pole Font Data.

W końcu nasz przycisk wygląda dużo lepiej, ale my potrzebujemy jeszcze jednego przycisku. Po prostu skopiujemy nasz istniejący, zmienimy mu nazwę na NewGameButton, i ustawimy Text na New Game. Aby skopiować, po prostu prawoklik na istniejącym przycisku w zakładce Scena (Scene) i wybieramy Duplikuj (Duplicate).

Finalnie twoja scena powinna wyglądać jak na zrzucie.

Musimy także rozmieścić odpowiednio wszystkie obiekty na scenie. Po prostu wybieramy przycisk, Tryb przesuwania (Move mode) w widoku 2D i ustawiamy przyciski. 

Teraz musimy połączyć przyciski z odpowiednimi akcjami.

Obsługa zdarzeń/sygnałów

Wybierz jeden z przycisków, przełącz się na panel Węzeł (Node), dwuklik na sygnale pressed(). 

To wywoła okienko, w którym ustawiamy kod, który zostanie wykonany po wciśnięciu naszego przycisku. Użyjemy skryptu, który już dołączyliśmy do głównego węzła Control, więc wybieramy go.

Jeśli nazwałeś poprawnie przyciski, to opcja automatycznego stworzenia nazwy funkcji będzie dobrym wyborem więc tak to zostawiamy. Klikamy po prostu przycisk Połącz (Connect).

Powtarzamy te same czynności dla przycisku New Game, ponownie łącząc przycisk do głównego węzła Control i pozostawiamy domyślną nazwę. W ten sposób stworzymy dwie nowe funkcje w naszym istniejącym już skrypcie. Zastąp skrypt poniższym kodem:

extends Control

func _ready():
  globals.kills = 0
  globals.currentStage = 0

func _on_QuitGameButton_pressed():
  get_tree().quit()

func _on_NewGameButton_pressed():
  get_tree().change_scene("GameScene.tscn")

Ten kod umożliwia wyjście z gry po naciśnięciu przycisku Exit Game (niesamowite 🙂 ) i przełącza scenę na GameScene.tscn po naciśnięciu przycisku Play Game. Oczywiście teraz powinniśmy stworzyć GameScene, prawda?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *