Mapa w grze przeglądarkowej

pytanie zadane 20 grudnia 2017 w JavaScript przez fanpajny Obywatel (1,610 p.)

Cześć, chciałbym użyć takiej mapy w grze, którą chcę stworzyć przy pomocy HTML 5 i JS głównie. Zastanawiałem się nad użyciem canvas, svg lub tagów <area>. Oczywiście zależy mi na tym aby była możliwość klikania na poszczególne obszary na mapie( dlatego canvas tak naprawdę odpada). Czy istnieją jeszcze inne sposoby na zaimplementowanie takiej grafiki do gry?

3 odpowiedzi

odpowiedź 20 grudnia 2017 przez Comandeer Guru (601,110 p.)

Dlaczego canvas odpada? Przecież na podstawie współrzędnych kliknięcia można określić kliknięty obszar.

Chociaż IMO najłatwiej byłoby to zrobić na SVG, np http://wasyl.eu/games/compact-conflict/play.html#

komentarz 20 grudnia 2017 przez fanpajny Obywatel (1,610 p.)

Jeśli do rysowanych figur chcemy podpiąć obsługę zdarzeń, to zastanowiłbym się, czy aby nie byłoby wygodniej wykorzystać do tego SVG, który pozwoliłby do każdego kształtu dopiąć dowolne zdarzenie.

Wiem, już napotkałem podobną twoją odpowiedź w innym temacie.

A co sądzisz o użyciu tagu <area>?

komentarz 20 grudnia 2017 przez Ehlert Ekspert (212,670 p.)

Coraz wolniej piszę

komentarz 20 grudnia 2017 przez Comandeer Guru (601,110 p.)

A co sądzisz o użyciu tagu <area>?

Szkoda zachodu. To najsłabsze z rozważanych rozwiązań, bardzo trudne choćby do ostylowania.

odpowiedź 20 grudnia 2017 przez Ehlert Ekspert (212,670 p.)

dlatego canvas tak naprawdę odpada

Na jakiej podstawie tak twierdzisz? Ba, w przypadku canvasa IMHO byłoby to najłatwiejsze. Pobierasz kolor pixela, który został kliknięty i możesz powiązać go z obszarem. Pamiętaj, że takie wejście danych nigdy nie jest pewne. Walidacja i logika gdy ZAWSZE po stronie serwera.

komentarz 20 grudnia 2017 przez fanpajny Obywatel (1,610 p.)

Trochę źle to napisałem. Chodziło mi o coś w stylu, że w canvasie jest to trudniej zrobić niż w svg

komentarz 21 grudnia 2017 przez obl Maniak (51,280 p.)

Masz rację, ale żeby to tak obsłużyć to każdy stan musi mieć unikatowy kolor. Co w tym przypadku może być upierdliwe bo to 50 różnych kolorów trzeba.

odpowiedź 21 grudnia 2017 przez obl Maniak (51,280 p.)

Narysowanie takiej mapki w Inkscapi-e to około pół godziny roboty. Problem polega na tym, że dużo obszarów składa się z krzywych a do tego trzeba sporej ilości danych użyć aby je w miarę racjonalnie narysować. Dochodzi do tego konieczność nadania każdemu elementowi mapy unikatowego i opisowego ID, żebyś mógł się po ludzku odwołać do danego elementu to dodatkowa robota. Ale jak to zrobisz to nie będziesz musiał się babrać z kolorami.

Pytanie więc ile taka grafika będzie ważyła. Po narysowaniu można jeszcze odchudzić plik svg, ja napisałem sobie mały skrypt w Pythonie, który to robi i czasami rozmiar pliku zmienia się nawet o połowę.