Edytor Map

W dzisiejszym wpisie postaramy się dodać edytor map do projektu. Poprzednio podczas planowania jednym z założeń jakie wynotowaliśmy było aby gra posiadała wiele poziomów, map, w celu uczynienia rozrywki bardziej różnorodnej i atrakcyjniejszej. Mapy są niczym innym jak elementami porozmieszczanymi po całym świecie, którego zaś fragment widzimy w naszym widoku. Teraz zastanówmy się jakby możliwe byłoby dodawanie wszystkich tych  wymienionych elementów takich jak: platformy, teleporty, przeszkody poprzednio tak „twórczo” wymyślone.

Podejście A

Pierwszym z pomysłów które może przyjść to aby przedmioty umieszczać po wysokości i szerokości wielkości naszego ekranu świata gry, gdzieś tam zaznaczając to w kodzie. Ale pytanie czy byłoby to wygodne? Akurat to pytanie nie jest z kategorii do zastanowienia, wydaje się dla nas oczywiste, żyjemy w święcie gier od młodych lat. Opiszmy to pierwsze podejście. Każdy z elementów mógłby być zahardkodowany, czyli wpisany na sztywno bezpośrednio w kodzie wysokość i szerokość. Można tworzyć zmienne typu Integer czyli przechowujące wartość liczbową i te zmienne później używać w metodach, które odpowiedzialne są za rysowanie tych obiektów. Do rysowania bloków stosowane byłyby różne pętle które jak wiemy wykonują się w ściśle określonych regułach, warunkach np. liczba powtórzeń, czy konkretne zakresy współrzędnych. To podejście jak najbardziej zadziała, ale jest zbyt uciążliwe i czasochłonne w realizacji, co chcemy oczywiście uniknąć.

Podejście B

Wyobraźmy sobie mamy ekran naszej planszy i myszką zaznaczamy miejsca w których chcemy umieścić dany obiekt, bądź obiekty. Dodatkowo od razu widzimy jak będzie to wyglądać w praktyce. Podobne obiekty np. platformy jednego typu możemy wrzucać w kontenery, czyli coś co przechowuje wiele wartości. I następnie wyświetlać całość kontenera jako jedną warstwę do której możemy podpiąć logikę, np. chcemy aby po najściu na tą warstwę postać straciła punkt życia w wyniku wejścia w płomienie.

Kontenery to taka struktura danych która umożliwia przechowywanie obiektów w sposób zorganizowany. Umożliwia ponadto operacje na tych zbiorach, takie jak przeszukiwanie, usuwanie i inne.

Rozwiązanie takie możliwe jest właśnie dzięki edytorom map. Są to narzędzia które znacząco przyspieszają cały proces tworzenia map. Całość zapisana jest do formatu wyjściowego który przy użyciu odpowiednich bibliotek można wczytać do aplikacji w przeróżnych aplikacjach i różnych językach programowania. Jeden z takich popularnych edytorów nosi nazwę Tiled i użyjemy go w projekcie. Jest on edytorem do grafiki w dwóch wymiarach, czyli posiadających wysokość i szerokość.

Źródło: http://www.mathsisfun.com/geometry/images/dimensions.gif

Rzuty

Elementy na mapie mogą występować w postaci prostokątów, elips, krzywych,  czy obrazków. Tiled wspomaga tworzenie zarówno ortogonalnych, izometrycznych i hexagonalnych map.

Przy okazji wyjaśnijmy co mówią te rzuty po kolei. O ortogonalności mówi się w miejscach gdzie występuje prostopadłość, może wystąpić zarówno w rzucie 2d jak i 3d. Projekcje ortogonalną cechuje także że wielkość obiektu nie jest zależna od odległości od kamery. Można to rozwiązanie spotkać w takich grach jak Tibia, bądź Simcity. 

Źródło: http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/SimCity%204%20Deluxe%20Screenshot%202_656x369.jpg?cb=1412974766

Rzut izometryczny odzwierciedla przestrzeń 3d na płaszczyźnie, rzuty mają zawsze równą miarę kątów 120° między parami osi. Jest również przykładem rzutu równoległego. Świetnie prezentuje to rysunek poniżej

Żródło: https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/IsometricFlaw_2.svg/240px-IsometricFlaw_2.svg.png

Hexygonalna mapa stworzona z sześciokątów, najczęściej można zobaczyć ją w grach wojennych, przykładem jest znana gra Heroes. Jeżeli nic wam nie mówią wymienione tytuły warto spojrzeć w google, są to klasyki gier.

Żródło: http://www.heroes3.eu/images/hota/hota1.3-screen5.jpg

Pobieramy Tiled

Pobieramy przechodząc na stronę w linku klikamy kolejno Download via itch.io, po przejściu do kolejnej strony klikamy Download Now. W Widocznym oknie mamy możliwość dotować developerów twórców tego narzędzia. Same zaś narzędzie jest co można przeczytać darmowe. Chcąc tylko pobrać bez dotowania klikamy na napis widoczny na obrazku poniżej.

Dalej możemy wybrać wersję pasującą do naszego systemu operacyjnego (windows, linux, mac) klikając przycisk Download przy odpowiedniej wersji. Powinien pojawić się okno pobierania instalatora.

Proces instalacji wygląda jak standardowy każdej aplikacji, nie ma przy tym żadnej konfiguracji. Lokalizacja miejsca instalacji nie ma właściwie znaczenia. Na końcu klikamy Finish i powinno automatycznie otworzyć się okno programu.

Nowa Mapa

W celu stworzenia nowego pliku mapy klikamy w lewym rogu na przycisku menu Plik, z listy wybieramy Nowy… Pojawia się okno tego rodzaju

Po kolei poustawiajmy i przeanalizujmy jakie możliwości mamy.

Na początku wybieramy orientacje ortogonalną, taka właśnie jest używana w platformówkach. Format warstwy kafelków ustawmy na Base64 (kompresowany zlib).

W format warstwy kafelków do wyboru mamy dwa formaty CSV i Bas64. CSV jest formatem gdzie dane przechowywane są w plikach tekstowych, a wartości rozdziela się przecinkami. Base64 jest formatem gdzie bajty koduje się ciągami znaków. Wybiera się 64 znaki którym przypisuje się wartości 0-63, 63 ponieważ 0 również uznaje się za wartość którą bierze się pod uwagę. Znaki zamieniane są na ciągi binarne, i następnie taki utworzony ciąg dzieli się na liczne podciągi. Jest powszechnie stosowany do kodowania poczty email, a jego charakterystyczną cechą jest że, zbiór wyjściowy jest o 33% większy od zbioru wejściowego.

Pojawia się tu słowo kodowanie i bajty, można jeszcze podciągnąć co to znaczy bit.

Kodowanie to przede wszystkim taka transformacja tekstu jawnego aby stał się nie dostępny niepowołanym osobom trzecim. Stosuje się tu zamiennie pojęcia kod i szyfr. Jednak istnieją subtelne różnice które je rozróżniają, a dotyczą głównie stopnia przekształcenia.

Kolejność renderowania kafelków domyślnie ustawiona jest na Prawy Dół i tak możemy zostawić. W rozmiarze mapy ustawiamy szerokość i wysokość w ilościach kafelek mieszczących się na mapie. Początkowo ustawimy 20 kafelek wysokości i 40 szerokości, co w późniejszych etapach może ulec zmianie. Rozmiar kafelka ustawiamy również na 70x70 px, co głównej mierze zależy jakie wielkości tekstury posiadamy bądź stworzymy w przyszłości. Samo 70px mówi ile pikseli mieści się w jednym „kartoniku”. Im jest ich więcej tym tekstury są ładniejsze i bardziej szczegółowe. Obecnie większość gier stosuje większą nowocześniejszą rozdzielczość, mówi się wtedy że są bardziej „mangowe”, a 16 px określa się jako „retro”. Po wybraniu obu wielkości możemy zobaczyć jaką rozdzielczość w pikselach będzie miała cała mapa (2800x1400 pikseli).

Pierwsze co należy zrobić to załadować pliki graficzne z teksturami które będziemy używać do tworzenia map. Można do tego używać pojedyncze grafiki albo całe zestawy zwane tilesety. W Internecie można znaleźć sporo stron na których można je znaleźć. Zawsze jednak należy patrzeć jaką licencje posiada dany plik. Jednym dość popularnym źródłem jest opengameart.org, gdzie większość jest na licencji creative commons, co znaczy tyle że autor przekazał je domeny publicznej i można robić z nimi wszystko bez ograniczeń, bez żadnej wymaganej zgody. Te które wpadły mi akurat w oko to link. Należy rozpakować i w folderze Tiled zestaw nosi nazwę tiles_spritesheet.png.

Dodanie tekstury do Tiled

W aplikacji Tiled klikamy na znaczek dodaj w dolnym prawym rogu

W oknie w miejscu gdzie wybieramy źródło klikamy przeglądaj i wskazujemy rozpakowany wcześniej tiles_spritesheet.png. Szerokość i wysokość kafelka ustawiamy na 70 px, identyczne jakie zawiera plik tile który posiadamy. Margines mówi o odległości od wszystkich zewnętrznych krawędzi obrazka, u nas nie ma więc ustawiamy na 0 px. Konieczne jest natomiast ustawienie Rozstawu na 2 px, takie zawiera nasz przykładowy zbiór. Można kliknąć OK.

„Wyklikujemy” mapę

W prawy rogu mamy okno z warstwami. Warstwy można traktować jako elementy tego samego typu. Przykładem może być podłoże tego samego typu, bądź monety do zebrania. Każdej warstwie można będzie w naszej grze przypisać inną logikę, jaka ma być wykonywana podczas interakcji naszej postaci z daną warstwą, bądź warstw między sobą. Na początku stworzymy tło, podłoże i kilka platform tego samego typu aby później można było naszą postacią po tym chodzić i skakać. Klikamy dwukrotnie na Warstwa Kafelków 1 i zmieniamy nazwę na background.

Teraz z zestawu kafelków wybieramy taki jaki chcemy użyć do tła, pełny niebieski kwadracik z zestawu wygląda na odpowiedni na tymczasowe tło. Z menu klikamy na ikonę wypełniania i klikamy na obszarze całej mapy. Powinno wypełnić nią całość obszaru.

Teraz pora na podłoże. W tym celu klikamy na ikonę białej kartki z żółtym słoneczkiem w górnym okienku z warstwami, tak jak na rysunku powyżej. Po kliknięciu rozwinie się lista z której wybieramy Object Layer i nadajemy nazwę ground. Teraz zaznaczając warstwę i wybierając kafelkę jaką wybraliśmy dla niej i możemy umieszczać je na mapie klikając. Tu zostawiam wam dowolność. Ten który stworzyłem znajdzie się później na githubie przy kolejnej aktualizacji projektu.

Aha to co można zauważyć to że podłoża są typem obiektowym, chyba domyślacie się dlaczego. Potrzebna będzie jeszcze logika do tego Na dziś wystarczy tyle, pokazany był proces tworzenia mapy, następnie trzeba będzie go podpiąć do projektu, to już wkrótce. Nie zapomnijcie zapisać tego co zrobiliście do tego momentu.

Do zobaczenia.