11.03
2010

Mapa z programu RPG XP MakerDziś rozważymy sobie czysto teoretycznie czym jest oraz jak złożyć mapę z kafli kwadratowych oraz heksagonalnych. Zapewne często spotykaliście się różnego rodzaju grami 2D, gdzie na mapie, jaką wykreowali twórcy niektóre elementy nieraz się powtarzają. Wiele z takich map do gier jest złożone z tzw. tile’ów, czyli pudełek o najczęściej foremnych kształtach, które złożone w jedną całość wyglądają jak ładnie narysowany obrazek. Być może nie zwróciliście dotychczas na to uwagi, ale w ten sposób wykreowane zostały mapy takich gier jak Warcraft II, czy pierwsze gry C&C (kafle kwadratowe), Diablo, bądź Ultima (kafle przedstawione w rzucie izometrycznym – czy to dzięki transformacjom graficznym, czy kaflom w kształcie rombu), a także cała masa strategii (gdzie najczęściej można spotkać kafle o sześciu ściankach). Takie zabiegi stosuje się z kilku powodów.
Po pierwsze zastosowanie pojedynczej bitmapy z grafiką terenu to spore obciążenie dla komputera. Mapa z gry Strategic CommandTaka mapa nierzadko przekracza sporo ponad rozmiary 1000×1000 pikseli, stąd można wywnioskować, że cały obszar to grubo ponad milion pikseli. Każdy z nich zawiera informację o przechowywanym kolorze. Przykładowo w formacie RGB, gdzie każdy piksel jest charakteryzowany przez wartości trzech kolorów (pomijam tutaj czwartą wartość – przezroczystość, gdyż dla takich bitmap jest ona zbędna). Każdy kolor to liczba z zakresu 0-255. Taki zakres pamięci wystarcza, aby zająć jeden bajt, stąd można obliczyć: bajt koloru * trzy kolory na piksel * ilość pikseli, co daje nam wartość około 3MB.
Teraz wyobraźcie sobie, że taka mapa to niewiele więcej, ile wyświetla się Wam na monitorze, a mapy, które widzimy w grach są co najmniej 10 razy takie. Nie uważacie, że 30MB na sam wygląd mapy to zbyt dużo? Tym bardziej, że wiele z tych elementów przecież się powtarza! Dlatego właśnie takie mapy rozbija się na klocki (często nazywane kaflami), które tak często się powtarzają. W ten sposób wczytując grafikę, która ma załóżmy 500×500 pikseli można stworzyć mapę o niewiarygodnie dużych rozmiarach, podczas, gdy w pamięci będziemy mieć tylko tą niewielką mapę.

Może czas przedstawić jak to działa. Otóż kafle ułożone są w tzw. tilesetach, czyli grafice, w której ułożone są kafelki jeden, przy drugim. O ile przy kwadratowych kaflach nie ma kłopotu – po prostu ustawiamy kwadraciki obok siebie, o tyle w tilesecie do mapy heksagonalnej można ułożyć na dwa sposoby. Pierwszy z nich to ustawić tak, jak w mapie kwadratowej (jeden obok drugiego – jest to gorszy sposób, bo marnujemy sporą część grafiki), a drugi to ułożyć części w takim systemie, w jakim będzie mapa (z przesunięciem).

Mapa Kwadratowa

Kafel kwadratowyMapa ułożona z kwadratowych kafli wbrew pozorom nie musi być wcale kwadratowa, jednak każdy z obu wymiarów musi być wielokrotnością rozmiaru boku cegiełki. Najczęściej spotyka się kafle o rozmiarze 32 pikseli na 32 pikseli, ale zdarzają się boki o rozmiarach 16, 24, czy 64 – tak naprawdę nie ma to znaczenia, bo można zrobić je w dowolnym rozmiarze (byle wszystkie były takiej samej wielkości).
Pierwsza rzecz jaką powinniśmy zrobić to rozbić grafikę z kaflami na poszczególne grafiki kafli. Można to zrobić na dwa sposoby: albo uciąć w pamięci obrazek i go później wyświetlać, albo zapisać współrzędne grafiki i wyświetlać tylko część rysunku. Jak się zapewne domyślacie – druga opcja jest o wiele lepsza.
Załóżmy zatem, że chcemy wczytać kafle do tablicy, aby później łatwiej było je sczytywać podczas wyświetlania. Co jest nam do tego potrzebne? Wbrew pozorom niewiele – wystarczy nam długość boku kafla oraz ilość kafli w rzędzie, w tilesecie. Aby było łatwiej ponumerujmy Mapa kafli kwadratowychsobie kafle poczynając od lewego górnego rogu i idąc horyzontalnie w prawo. Tak więc pierwsza cegiełka będzie miała numer 1, druga 2 itd., a gdy trafimy na koniec rzędu wracamy z powrotem i liczymy dalej. Przykładowo, gdy mamy 10 kafli w rzędzie, część, znajdująca się w trzecim rzędzie i drugim wierszu będzie miała numer 2*10 + 3 = 23. Tak więc, gdy zostaniemy poproszeni o kafel numer 62 naszego tilesetu to wybieramy ten z drugiego rzędu, z szóstego wiersza. Skąd w takim razie jednak mamy wiedzieć jaką część naszej grafiki wyświetlić? Wystarczy, że pójdziemy w odpowiednie miejsce i wyświetlimy fragment grafiki o rozmiarze boku kafla (dla nas np. 32 piksele). Natomiast miejsce, w którym powinniśmy zacząć rysowanie znajduje się 64 (2*32) piksele od góry oraz 192 (6*32) piksele od lewej. Proste, prawda? =)
Teraz wystarczy wczytać samą mapę i wyświetlić jej elementy po kolei. Najłatwiej stworzyć taką mapę jako plik, w którym zapisujemy w jakim miejscu ma się znaleźć jaki numer kafla, przy czym każdy numer oddzielony jest jakimś znakiem (przykładowo spacją), a znak nowej linii oznacza także na mapie przejście do nowego wiersza wyświetlania kafli. Załóżmy więc, że plik naszej mapy wygląda następująco:
[code lang=”html” firstline=”0″]Przykładowy plik mapy:
1 4 5 12 2 3 1 1 2 1
3 1 11 10 4 1 1 7 4 5[/code]
Jak więc widzimy mapa będzie miała wielkość 10×2 kafli, co daje nam grafikę o rozmiarze 320×64 pikseli. Po wczytaniu takiego pliku wystarczy zamienić liczby na odpowiadające im klocki w tilesecie. Co prawda takie ręczne wpisywanie liczb może być męczące i mało efektywne, ale to nie tutorial o tym jak robić edytor map. =p

Mapa Heksagonalna

Kafel heksagonalnyNiestety mapa złożona z sześciokątów foremnych to całkiem inna, trudniejsza bajka ze względu na bardziej skomplikowane kształty kafli. Każdy z klocków powinien składać się z sześciu boków identycznej długości (na rysunku obok – S), połączonych ze sobą pod kątem 120 stopni. Właśnie ta długość jest najistotniejsza i to dzięki niej możemy bez problemu wyliczyć inne, potrzebne nam wielkości:

  • R = sin (30°) * S
  • H = cos (30°) * S
  • A = 2 * R + S
  • B = 2 * H
  • Ułożenie kafli mapy (oraz najlepiej grafiki tilesetu) powinno wyglądać mniej więcej tak, jak jest to pokazane na rysunku. Często możecie się też spotkać z innym ułożeniem kafli (np. gdy są one obrócone o 90°), ale zasada jest taka sama, a jedyne co się w takim wypadku zmienia to położenie osi X oraz Y (które zamieniają się miejscami). Nic nie stoi na przeszkodzie, aby numerować kafle tak, jak poprzednio zarówno w tilesecie, jak i na mapie. W takim jednak wypadku musicie pamiętać, że co drugi wiersz jest przesunięty o R i zgodnie z tą wiedzą rysować. Mapa kafli heksagonalnychDla nieparzystych wierszy rysowanie kafli powinno odbywać się zgodnie ze wzorami:

  • PikselX = NRX * ( R + S )
  • PikselY = NRY * ( 2 * H )
  • Natomiast dla wierszy parzystych należałoby zastosować inne wzory, uwzględniające przesunięcia:

  • PikselX = NRX * ( R + S )
  • PikselY = NRY * ( 2 * H ) + H
  • W ten właśnie sposób można w łatwy sposób można wyświetlić mapę kafli złożoną z cegiełek heksagonalnych. Jak widać wszystko sprowadza się do kilku prostych wzorów, które po użyciu w pętli i rozróżnieniu, czy wiesz (lub rząd) jest parzysty, w łatwy sposób pozwalają wyświetlić skomplikowane mapy dla np. gier strategicznych.

    Komentarze: