Mapa 2D - jak to zrobić?

Marek Szydełko
05.09.2015

Coraz częściej w grach via browser spotykamy wszelkiego rodzaju mapy. Jedne pokazują położenie graczy/wiosek inne są nieodłączaną częścią mechaniki gry. Pokrótce postaram się przybliżyć jak wygląda od środka mapa po której gracz będzie mógł się poruszać.

1. Wygląd mapy.
W standardowych grach komputerowych świat tworzony jest np. z wielu kafli które podczas wyświetlania krain są łączone w jedną całość. W grach via browser uważam to za kiepski pomysł jednak nie uważam że się nie da. Z swojej strony za proponuję inną metodę.

Mapa będzie podzielona na fragmenty, które będą zapisywane w postaci plików graficznych.

2. Wczytywanie mapy.
Skrypt PHP pokazuje mapę jako tło diva. Jak wyświetla? To zależy od struktury waszej gry. U mnie wygląda to mniej więcej tak:

  • z bazy danych pobierana jest lokacja gdzie znajduje się gracz,
  • mając informacje gdzie znajduje się użytkownik, generowana jest odpowiednia nazwa pliku graficznego(nazwa obrazka wyżej).
  • skrypt wyświetla mapę(czyli obrazek wyżej).


3. Czas się poruszyć
Teraz najwyższy czas by wyświetlić gracza. Pokazujemy go w osobnym divie znajdującym się we wnętrz warstwy gdzie znajduje się mapa. Za pomocą CSS: ustawiamy go w odpowiedniej pozycji. Współrzędne pobieramy z bazy danych.

Teraz czas na AJAX. Gdy gracz chce się poruszyć skrypt:

  • komunikuje się z bazą by zaktualizować nową pozycję.
  • wyświetla gracza w nowym miejscu. (Jeżeli przechowujemy położenie gracza jako numery pól to przelicza je na piksele)

4. Wykrywanie przeszkód.
W bazie danych zapisujemy położenie przeszkód. Do skryptu który umożliwia chodzenie dodajemy warunek sprawdzający:

  • "Jeżeli gracz chce wejść na pole gdzie istnieje przeszkoda wyświetl komunikat w innym wypadku pozwól mu wykonać ruch"


Mam nadzieję że wytłumaczyłem to na tyle jasno że bez problemu uda się wam to zaprogramować. Dużych umiejętności nie trzeba posiadać, wystarczą naprawdę podstawy JavaScript i PHP.

 
Zgłoś swój pomysł na artykuł

Więcej w tym dziale Zobacz wszystkie