MonoGame – Tworzymy grę Snake od podstaw! | Część 3

W tej części zajmiemy się już sceną naszego MENU, którego szkielet stworzyliśmy w części poprzedniej 😉 W ramach przypomnienia, kod tej klasy powinien wyglądać tak:

Co dzisiaj zrobimy?

Stworzymy MENU naszej gry, które będzie obsługiwane za pomocą myszki. Wyświetlane elementy (przyciski, logo), będą skalowały się w zależności od rozmiaru okna, naszej aplikacji.

Rozmieszczamy elementy menu na ekranie

Dobrze, zacznijmy może więc od wyświetlenia i wstępnego rozmieszczenia naszych grafik na ekranie. W tym celu musimy, dla naszych tekstur stworzyć trzy zmienne typu Rectangle, które będą określały pozycję, oraz rozmiar naszych elementów. Przydatne będą też dwie zmienne, typu Color – dzięki nim, będziemy mogli zmieniać kolory naszych przycisków w zależności, czy będzie się na nich znajdował kursor, czy też nie.

Jeżeli mamy już wszystkie potrzebne zmienne możemy przejść do metody Draw(), naszej sceny. Dodajemy tam linijki, które będą rysować na ekranie nasze tekstury:

Problem, w tym że nasze zmienne w tym momencie są puste… Tak, więc po uruchomieniu gry na ekranie nic się nie wyświetli. Trzeba temu zaradzić!

Nasze założenia są takie, że wszystkie elementy wyświetlane na ekranie mają skalować się wraz ze zmienianiem rozmiaru okna. To zadanie wymaga przeliczania rozmiarów/pozycji naszych tekstur właściwie przez cały czas. Dlatego, kod za to odpowiedzialny umieścimy w metodzie Update(). Z tym, że podzielimy go na dwie ładne metody: Jedna będzie odpowiedzialna za przeliczanie rozmiaru naszych elementów, druga za przeliczanie ich pozycji:

Obydwie metody musimy wywołać w metodzie Update():

W tym momencie po uruchomieniu naszej gry powinien powitać nas taki widok:

Snake1

Jeżeli zmienimy rozmiar naszego okna, razem z nim powinny zmienić rozmiar też inne elementy:

snake2

Dobrze, elementy MENU są już umieszczone na ekranie, teraz trzeba je jeszcze jakoś ożywić…

Ożywamy nasze przyciski

Już kiedyś o tym pisałem, jednak przypomnę. W celu śledzenia poczynań kursora, stwórzmy sobie niewidzialny prostokąt, o rozmiarach 1x1px i przesuwajmy go wraz z naszym kursorem. Będzie to robiła taka oto metoda:

Kolejna natomiast będzie swoistą obsługą zdarzeń, dla naszych przycisków:

Krótki opis, co jest od czego. Ta funkcja sprawdza, czy nasz kursor(prostokąt) nakłada lub styka się z przyciskiem. Jeżeli tak, to przycisk zmienia kolor na zielony. Jeżeli dodatkowo kliknięty jest LPM – gra zostaje zamknięta lub przeskakujemy do innej sceny z gry. W przypadku przycisku Play, będzie to scena z właściwą grą, którą dopiero stworzymy – jednak tym zajmiemy się już w kolejnej części 😉 Należy oczywiście pamiętać, też o podpięciu tych metod do naszej metody Update().

Prawie bym zapomniał… Na koniec cała gotowa klasa 😉

 

386 total views, 1 views today