Menu gry

W tej części kursu dodasz grafiki, które sprawią, że Plane Pong zacznie wyglądać znacznie lepiej. Stworzysz menu główne gry z przyciskiem Play, przygotujesz scenę Game Over, na której będzie wyświetlać się tablica z wynikami, i opracujesz funkcję custom fonts, czyli włączysz wyświetlanie niestandardowych czcionek.

Uruchom program GameSalad Creator, przejdź do zakładki File w lewym górnym rogu i wybierz polecenie Open.... Otwórz swój projekt z grą, który zapisałeś w poprzedniej części kursu albo załaduj plik z naszej płyty DVD.

Przejdź do zakładki Scenes i stwórz nową scenę, klikając ikonę plusa +. Nazwij ją Menu i przenieś ją na samą górę listy. Dzięki temu gra, gdy zostanie uruchomiona, będzie na początku wyświetlać scenę Menu.

Kliknij dwukrotnie scenę Menu, by wyświetlić ją w programie. Teraz w obszarze Library kliknij przycisk Media, aby przejść do zakładki z plikami multimedialnymi. Użyj ikony plusa, aby dodać z dysku nowy plik graficzny – plik z grafikami pobierzesz ze strony pcformat.pl/u/2585 (używany był już w pierwszej części kursu). Wybierz plik o nazwie PlaneMenu.png. Umieść go w kreatorze GameSalad, w zakładce Media. Następnie przeciągnij go na scenę Menu – na pusty, czarny obszar po prawej stronie. Ustaw obrazek w taki sposób, aby zakrywał cały obszar.

Obrazek automatycznie doda się również w zakładce Actors. Zmień jego nazwę na Tło menu, aby zachować porządek. Teraz znów przejdź do zakładki Media i dodaj kolejny obrazek, tym razem o nazwie PlanePlay.png. Jest to przycisk Play, który będzie uruchamiał grę. Przeciągnij go na scenę i umieść np. pod tytułem gry oraz główną grafiką przedstawiającą pilota.

Aby przycisk Play działał, trzeba dodać do niego odpowiednią funkcję. Przejdź do zakładki Actors, zmień nazwę bohatera na PrzyciskPlay, następnie z obszaru Attributes poniżej przejdź do Actor, by wyświetlić funkcje bohatera PrzyciskPlay.

Dodaj teraz nową regułę dla bohatera PrzyciskPlay i zmień jej nazwę na Uruchom grę. Teraz w regule, w polu type or drag in a condition, wpisz Touch, po czym wciśnij klawisz Enter. Od tej pory gdy użytkownik dotknie przycisku na ekranie palcem, będzie wykonywana akcja – w tym wypadku uruchamianie gry. Aby tak się działo, rozwiń pole do w regule, a następnie dodaj do niego zachowanie Change Scene. Ponadto zmień funkcję z pola go to z Next Scene na Initial Scene, a obok wskaż funkcję No ad, żeby gra nie wyświetlała reklam.

W obszarze Library przejdź do sceny Game Over, która na tym etapie jest pusta (czarna). Jeśli nie masz stworzonej takiej sceny, zrób to teraz.

Przejdź do zakładki Media i dodaj z dysku plik graficzny o nazwie PlaneBG.png. Przeciągnij obrazek na czarną przestrzeń i ustaw tak, aby zajmował całą scenę.

Dodaj w Media obrazek GameOverIcon.png i również umieść go na scenie. Teraz przejdź do zakładki Actors i zmień nazwy nowych obiektów – Actor 1 możesz nazwać TłoGameOver, a Actor 2 – IkonaGameOver. Teraz stwórz jeszcze jednego, nowego bohatera w zakładce Actors i nazwij go Przykrycie.

Zaznacz Przykrycie i w dolnym obszarze Attributes przejdź do Actor. Następnie wybierz Color i zmień go na czarny. Rozwiń pole Color i wpisz w Alpha wartość 0.5. Dzięki temu bohater Przykrycie stanie się półprzezroczysty. Przemieść go teraz na scenę.

Scena wyświetlana w razie końca gry jest gotowa, teraz trzeba przygotować jeszcze funkcję odpowiadającą za zliczanie i wyświetlanie wyniku końcowego.

W zakładce Media dodaj obrazek PlaneGameOverScore.png i przeciągnij go na scenę. Umieść go w takim miejscu, gdzie ma wyświetlać się wynik, jaki gracz uzyskał w grze, np. pod ikoną z pilotem. Obrazek zawiera napisy Score i Best:

W Media dodaj wszystkie obrazki z cyferkami, od sm-0.png do sm-9.png. Posłużą one do wyświetlania wyniku. Wstaw na scenie sm-0.png i umieść pod napisem Score. Przejdź teraz do zakładki Actors i zmień nazwy Actor 1 na Tablica Wyników, a Actor 2 na Score.

Wskaż bohatera Score, a następnie dodaj nowy atrybut – kliknij ikonę plusa i wybierz Integer. Następnie zmień jego nazwę na Wynik i ustaw wartość 10. Teraz z zakładki Behaviors przenieś do bohatera Score zachowanie o nazwie Constrain Attributre. To zachowanie nieustannie aktualizuje wartość jednego z wybranych atrybutów i zmienia na inny. Dzięki temu wynik będzie zawsze zliczany, a później wyświetlany na scenie Game Over. W tym przypadku trzeba ustawić atrybut w taki sposób, aby zawsze zmieniał się sam obrazek – jeśli wynik na koniec rundy wyniesie 1, obrazek 0 zmieni się w obrazek 1, a jeśli będzie to 62, to jeden z bohaterów zmieni się z 0 na 6, a drugi z 0 na 2 itd.

W Constrain Attribute z pola constrain wybierz Attributes, Score i Image, a następnie kliknij widoczne obok pole. Wpiszesz w nim funkcję, która odpowiada za tzw. custom fonts (fonty niestandardowe). W GameSalad można tworzyć niestandardowe czcionki z obrazków i właśnie tym się teraz zajmiesz – obrazki sm-0–9 będą zachowywać się jak krój pisma!

Wpisz w oknie <Constrain Attribute> następującą funkcję:

„sm-”..floor((game.Wynik proc.self.Wynik)/(self.Wynik/10))

Zwróć uwagę, że sm- to nazwa wspólna twoich obrazków 0–9. Następnie należy wpisać funkcję floor, która odpowiada za to, że zaokrągla wartości (np. w przypadku wyniku 5,2 funkcja floor zaokrągli go do 5) i jest niezbędna, aby wynik był poprawnie wyświetlany. Dodatkowo trzeba wskazać właściwość, którą gra ma wyświetlać, czyli wynik – wybierz Attributes, Game i Wynik (game.Wynik). Potrzebna jest również właściwość Attributes, Score i Wynik (self.Wynik), którą należy wstawić dwukrotnie w odpowiednich miejscach, ponieważ będzie ona współgrać z głównym atrybutem (Game, Wynik). Później gra będzie jeszcze dopasowywać obrazki 0–9 do wyniku, aby wyświetlać poprawną wartość na ekranie Game Over. Nie zapomnij o pozostałych znakach, zwłaszcza o podwójnym nawiasie!

Możesz teraz włączyć grę przyciskiem Play i zobaczyć, że wynik będzie się wyświetlał na scenie Game Over, ale tylko wtedy, gdy będzie wynosił nie więcej niż 9, ponieważ jest wyłącznie jeden obrazek, który może wyświetlać wartość od 0 do 9. Aby to zmienić, trzeba stworzyć kopię bohatera Score bezpośrednio na scenie Game Over.

Zaznacz obrazek 0 i trzymając wciśnięty klawisz Alt, przenieś go nieco obok, aby stworzyć duplikat. Zaznacz swój duplikat i przenieś w lewo, aby był pierwszą wartością wyniku i w przypadku, gdy uzyskasz wynik 10, zawierał w sobie 1, a drugi bohater Score – ten obok, po prawej – wyświetlał 0. Zaznacz duplikat i przejdź do obszaru Attributes. W zakładce Actor zmień jego wartość przy Wynik z 10 na 100.

Teraz trzeba stworzyć duplikat samego bohatera Score, aby następnie umieścić go na scenie Game Over i ustawić jego funkcję w taki sposób, by wyświetlał topowy wynik. Przejdź do obszaru Actors i zaznacz Score. Trzymając wciśnięty klawisz Alt, przenieś go nieco w dół, aby stworzyć kopię. Zmień nazwę nowego bohatera na TopowyScore, a następnie go zaznacz i w obszarze z regułami wprowadź jedną zmianę w Constrain Attribute – zmień game.Wynik na game.Topowy wynik.

Umieść bohatera TopowyScore na scenie Game Over i stwórz jego duplikat, który umieścisz obok. Następnie zaznacz ten, który jest po lewej stronie, i w obszarze Attributes, w zakładce Actor, zmień jego wartość z Wynik na 100. Teraz bohater z lewej będzie wyświetlał zawsze rząd dziesiątek, a ten z prawej – rząd jedności.

Z obszaru Actors przeciągnij bohatera PrzyciskPlay na scenę Game Over i umieść pod wynikami. Włącz grę i pograj!