MonoGame – Jak stworzyć menu gry?

Jest to chyba rzecz najbardziej podstawowa podczas tworzenia jakiejkolwiek gry. Problem w tym, że MonoGame nie udostępnia nam czegoś takiego jak najprostsze przyciski. W takim razie jak rozwiązać problem z MENU w grze? Jeżeli chcesz dowiedzieć się jak ja rozwiązałem ten problem, czytaj dalej 😉

Czego dowiesz się czytając ten wpis?

  • Poznasz sposób wczytywania zasobów(np. obrazków)
  • Nauczysz się wyświetlać je na ekranie
  • Dowiesz się jak wykrywać w grze proste kolizje
  • Oraz kilku innych rzeczy…

Czego potrzebujemy?

W celu stworzenia naszego game-menu będziemy potrzebowali:

  • Obrazków reprezentujących przyciski (najlepiej z białym tłem)
  • Znajomości wykrywania prostych kolizji – spokojnie, dalej wszystko opiszę.
  • No i oczywiście… IDE, wraz z MonoGame 😉

Przygotuj sobie jakiś prosty przycisk np. z napisem PLAY w Paint’cie. Kiedy ten będzie gotowy możesz przejść dalej.

No to zaczynamy…

Pierwszą rzeczą jaką należy zrobić to oczywiście utworzyć pusty projekt. Kiedy mamy już go do dyspozycji zajmiemy się dodaniem do naszego projektu tekstury przycisku. W tym celu należy kliknąć dwa razy na ten element:

MG1

Po tej czynności powinno nas powitać takie okno:

MG2

Po wybraniu Add->Existing Item możemy dodać do projektu grafikę naszego przycisku. Teraz możemy zająć się naszym kodem.

Wyświetlamy kursor i odblokowujemy zmianę rozmiaru okna

W tym celu w metodzie Initialize() umieśćmy następujący kod:

UWAGA: Linijki dodane w tej metodzie będą działały tylko w przypadku uruchomienia gry na zwykłym komputerze z systemem operacyjnym Windows/Linux. W przypadku platform mobilnych będą one przyczyną crashowania się aplikacji.

Wyświetlamy nasz przycisk

Aby nasz przycisk był w ogóle widoczny, poza dodaniem go do zasobów naszej gry musimy go jeszcze załadować i wyświetlić. Tak, więc zabierzmy się za jego załadowanie do pamięci. W tym celu musimy stworzyć zmienną typu Texture2D, nazwijmy ją PlayButtonTexture – to w niej będzie trzymany nasz obrazek. Kolejną rzeczą jest stworzenie zmiennej typu Rectangle, która będzie określała rozmiar naszego obrazka i jego pozycję. Będzie też potrzebna do wykrywania kolizji. Nazwijmy ją recPlayButton. Dodajmy jeszcze jedną zmienną typu Color, o nazwie PlayButtonColor. Przyda się nam później. Mamy już wszystkie potrzebne zmienne, więc możemy iść dalej.

Teraz przejdźmy do metody LoadContent() i załadujmy nasz plik z obrazkiem do zmiennej typu Texture2D.

Tekstura załadowana. Teraz przydałoby się ją wyświetlić… Skoczmy, więc do metody Draw()

Teraz na chwilę się zatrzymamy, w celu wyjaśnienia co jest od czego. Pierwsza linijka odpowiada za czyszczenie ekranu i wypełnienie go jednolitym tłem. Tutaj jest to jakiś odcień niebieskiego – co oczywiście możemy sobie zmienić. Dalej wywoływana jest metoda spriteBatch.Begin();. Musi być ona wywołana zawsze przed tym, zanim użyjemy metody Draw(). Teraz jesteśmy w miejscu najważniejszym. Ta linijka odpowiada za rysowanie na ekranie naszego przycisku. Argumenty jakie przyjmuje to kolejno: Tekstura z naszym obrazkiem, zmienna typu Rectangle, która określa położenie naszego obrazka, oraz jego wielkość. Ostatnim argumentem jest kolor jaki ma przyjąć nasza tekstura – właśnie dlatego pisałem, że najlepiej jak obrazek będzie biały 😉 Kolejne linijki kodu to wywołanie kończące rysowanie klatki.

Pomimo całej naszej pracy, na tym etapie przycisk jeszcze nie będzie widoczny. To dlatego, że nie określiliśmy jego położenia, ani rozmiaru – koloru też nie. Jednak tym zajmiemy się w metodzie Update(), albowiem takie rzeczy właśnie tam się robi :).

Ożywiamy nasz przycisk

Pisałem przed chwilą, że przechodzimy do metody Update() i słusznie. Jednakże, w celu zachowania chociaż minimalnego porządku w kodzie, podzielimy go na kilka mniejszych metod, które właśnie w Update() tylko wywołamy. Do dzieła, więc!

Określamy pozycję naszego przycisku

Jako, że odblokowaliśmy możliwość rozszerzania/zmniejszania naszego okna z grą przydałoby się, żeby przycisk nie miał stałej pozycji, ani rozmiaru. Musi skalować się wraz ze zmianą rozmiaru okna. Tak, więc stwórzmy metody, które będą to robić. Najpierw może zajmijmy się tytułowym określaniem pozycji naszego przycisku, w zależności od wielkości okna:

Następnie jego wielkością:

GraphicsDevice.Viewport.Height/Width zwraca nam rozmiar naszego okna. Skoro już to wiesz, to chyba to co robi ten kod nie wymaga większego komentarza 😉

Śledzimy położenie kursora

Teraz musimy się zająć śledzeniem poczynań kursora. W tym celu stwórzmy sobie niewidzialny prostokąt, o rozmiarach 1x1px i przesuwajmy go wraz z naszym kursorem.

Kolizja przycisku z kursorem

Okej. Mamy już metodę, która będzie to robiła. Ostatnim i chyba najważniejszym krokiem jest reakcja na zderzenie się naszego kursora z przyciskiem. Stwórzmy metodę, która będzie to robiła:

Tutaj najpierw sprawdzamy czy nasz przycisk zderza się z naszym kursorem. Jeżeli tak, zmieniamy jego kolor na zielony. Jeżeli natomiast dodatkowo wciśnięty jest LPM to kolor zmieni się na czerwony. Tutaj też możemy podjąć stosowne kroki w celu np. wyświetlenia już samej sceny gry – czyli wyłączenia MENU i przejścia do niej. Jednak nie będę już tego tutaj opisywał, bo wpis i tak jest dosyć długi. Komu będzie się chciało tyle na raz czytać 😉 Dodam jeszcze, że kiedy kursor(właściwie nasz kwadracik chodzący za nim) nie dotyka przycisku to wykonuje się kod odpowiedzialny za zmianę koloru na biały.

Aha, należy jeszcze pamiętać, żeby wywołać wszystkie metody we wnątrzu metody Update()!

Na koniec cały projekt do pobrania: Download

585 total views, 3 views today