Gra 2D, część 12: Edytor poziomów cz. 2
15.03.2011 - Marcin Milewski
Nieodłącznym elementem każdego edytora poziomów jest graficzny interfejs, zatem dodamy go także do naszej gry. W artykule zajmiemy się opracowaniem klas do obsługi graficznego interfejsu użytkownika. Dzięki temu edytowanie poziomów będzie łatwe i przyjemne. Poprzedni artykuł - Edytor poziomów cz. 1 Następny artykuł - Edytor poziomów cz. 3 Pobierz początkowy kod źródłowy do tego artykułu. W poprzedniej części cyklu o tworzeniu gry platformowej zajmowaliśmy się implementacją mechaniki edytora poziomów. W tym artykule dodamy do niego graficzny interfejs użytkownika. Użytkownik, przy pomocy myszki, będzie mógł wybierać jakie elementy chce dodawać do poziomu klikając w wybrane miejsce na planszy. Dodamy także możliwość usuwania pól z poziomu. Od strony wizualnej, widoczny będzie tak naprawdę tylko jeden rodzaj elementu -- przycisk. Zadbamy jednak o to, aby można było łatwo dodawać kolejne kontrolki (zwane także widżetami, z ang. widget). Do reprezentacji przycisków wykorzystamy animowane sprite'y obiektów, które się pod nimi kryją. Poniżej możemy zobaczyć film prezentujący naszą grę wzbogaconą o graficzny interfejs użytkownika w edytorze. Graficzny interfejs użytkownikaJak dotąd nie potrzebowaliśmy mechanizmu GUI (Graphical User Interface). Aby się o tym przekonać, wystarczy sięgnąć pamięcią do poprzednich części cyklu tworzenia gry w stylu Mario. Wydaje się jednak, że z czasem przybędzie elementów do wyświetlania, zatem warto wydzielić klasy odpowiedzialne za obsługę poszczególnych elementów graficznego interfejsu użytkownika. Abstrakcyjna klasa bazowa Gui będzie wykonywała zadanie analogiczne do AppState, dlatego znajdziemy tutaj takie metody czysto wirtualne, jak Init, Draw czy Update. Ponadto udostępnimy kilka publicznych (ale także wirtualnych) funkcji do obsługi urządzeń wejścia -- klawiatury oraz myszy. Deklarację (i jednocześnie definicję) klasy Gui umieszczamy w podkatalogu gui/ w pliku Gui.h:
Podstawową jednostką wyświetlaną w GUI będzie widżet. Będziemy reprezentować go klasą GuiWidget, która dostarcza podstawowych metod do rysowania, aktualizacji, manipulacji pozycją oraz rozmiarem kontrolki na ekranie. Metoda GetPosition zwraca położenie lewego dolnego narożnika widżetu, a GetSizedPosition -- prawego górnego. Możliwa jest także manipulacja widocznością kontrolki przez wykorzystanie metody SetVisible. Oto pełny kod klasy GuiWidget:
GuiWidget jest jedynie klasą bazową dla wszystkich kontrolek. Poniżej przedstawiamy kod bardzo prostego elementu graficznego interfejsu użytkownika -- przycisk wyświetlany w postaci sprite'a: To proste opakowanie sprite'a jest klasą wyjściową dla przycisku przedstawiającego konkretne pędzle. W konstruktorze podajemy sprite, który będzie reprezentacją pędzla na ekranie, położenie oraz rozmiar przycisku, a także wskaźnik na przechowywany pędzel. Całość zajmuje jedynie kilka wierszy kodu. Ponieważ jest to element GUI specyficzny dla edytora, dlatego plik BrushButton.h umieszczamy w katalogu editor. Hierarchia dziedziczenia dla przycisku.
|
Copyright © 2008-2010 Wrocławski Portal Informatyczny
design: rafalpolito.com