interaktywna mapa świata gry Opcje

[t3ix]

Witajcie

Potrzebuję napisać taką mapkę do gry, problem jest w tym że nie wiem za bardzo jak się za to zabrać :/

Takie coś chciałbym osiągnąć ( mapa z plemion ):


- po kliknięciu w strzałeczkę mapka jest przesuwana i nowa zawartość się ładuje
- po najechaniu na wioskę wyświetlana jest tabelka z informacjami o niej np. Gracz, punkty i nazwa
- po kliknięciu w wioskę przenosi do innej podstrony

Informacje, które potrzebuję:
- czego się nauczyć żeby zrobić taką dynamiczną zawartość ( co trzeba w takim skrypcie wykorzystać ) ?
- jakieś przydatne linki ?

Jeżeli coś jest niejasne to proszę napisać

PS. Tą minimapkę po prawej już mam

dzięki

Ten post edytował t3ix 4.12.2011, 13:04:57

[kamil4u]

Problem z tym może być sporo. Wiedza na temat JS jest konieczna - moim zdaniem dość duża.
Masz 2 sensowne wyjścia:
- canvas + HTML5
- operacje na elementach - DOM

Napisz w czym się lepiej czujesz to wtedy postaram się opisać jeden ze sposobów dokładniej. Każdy ma wady i zalety, które były już opisywane wielokrotnie - poczytaj o tym wybierz.

[!*!]

Robiłem swego czasu coś podobnego pod własny engine gry. Masa z tym roboty. Osobiście odradzałbym używanie canvas, choć idealnie do tego pasuje. Dlaczego? To zależy od mapy, ale przy większych rozmiarach, jeśli nie masz pojęcia o JS, canvas po prostu jest mało wydajny i lepiej sprawdza się operowanie na DOM bezpośrednio.

Jest b. dużo map o podobnym działaniu napisanych w jQuery, są luźne skrypty jak i pluginy, jak dobrze poszukasz znajdziesz nawet coś podobnego do google maps z mini podglądem i nawigacją.

[kamil4u]

Canvas nie jest mało wydajny. Obecnie HTML5 + CSS3 + JS + Canvas daje zdumiewające efekty. Powstało wiele gier, animacji i aplikacji, które działają w oparciu te technologie i nie ma większych problemów z wydajnością. Nie mówię już o nowościach np. webGL.

Prawdą jest, że canvas jest trudniejsze do opanowania niż operowanie na DOM, ale można uzyskać dużo ciekawsze efekty.

Powinieneś moim zdaniem minimum przez pół roku poduczyć się JS, aby samemu napisać taki skrypt, więc w Twoim wypadku lepiej skorzystać z gotowca, czyli to co napisał ~!*!

------
Teraz doczytałem "jeśli nie masz pojęcia o JS,....", ale post zostawiam.

[!*!]

kamil4u - tak efekty może i są ah i oh, ale to nie znaczy że canvas jest wydajny co zresztą potwierdzają niejedne "testy na necie" np.

http://themaninblue.com/writing/perspective/2010/03/22/

Jeśli canvas w wydajności prześcignie flash, wtedy będzie można mówić że jest to dobre. (oczywiście to już nie jest kwestia samego elementu, a przeglądarek, choć tu jak np do webGL możnaby się przyczepić, z renderingiem 3d ma to tyle wspólnego co paint z profesjonalnym edytorem grafiki).

Ten post edytował !*! 4.12.2011, 16:53:12

[kamil4u]

Wszystko ok, ale w teście, którym pokazałeś canvas jest "lepsze", niż efekty na DOM.

canvas po prostu jest mało wydajny i lepiej sprawdza się operowanie na DOM bezpośrednio.

Może nie sprecyzowałem, ale chodziło mi właśnie o zestawienie tych 2 możliwości.

W tym miejscy tę dyskusję muszę niestety zakończyć, gdyż mało się bawiłem grafiką w JS. Mam względnie dużą wiedzę teoretyczną, ale praktyka u mnie leży. Dlatego pogląd wyrobiłem sobie czytając innych, więc mogę się mylić. Podsumowując moje zdanie:

Canvas może być szybszy od operacji na DOM i w tym przypadku się do tego nadaje. Jak pisałem, każda z metod ma swoje wady i zalety i w tym konkretnym przykładzie, moim zdaniem bardziej zależy to od umiejętności programisty, niż rzeczywistych zalet.

Pozdrawiam

[t3ix]

Chyba wybiorę canvas + HTML5, rozmiar tej mapki nie będzie ogromny, dzięki za odpowiedzi

kamil4u opiszesz dokładniej ?

[kamil4u]

Jak pisałem od strony praktycznej wiem mało

1. Musisz znać JS w dość dobrym stopniu, żeby w ogóle zabrać się za to
2. Bardzo ważne są zdarzenia w JS - to musisz opanować perfect
3. Musisz opanować AJAX
4. Dopiero później zabierz się za canvas podstawy: https://developer.mozilla.org/en/Canvas_tutorial
5. Linki - zrozumieć kod:
- http://joncom.be/code/excanvas-world-map/
- http://www.html5canvastutorials.com/advanc...image-tutorial/
- http://www.canvasdemos.com/ - ogarnij przykłady, które mogą Ci się przydać

No i to tyle na dobry początek
Za kilka tygodni/miesięcy się zgłoś i napisz z czym masz największy problem to opiszemy go dokładniej. Na razie zadałeś zbyt ogólne pytania, aby można było napisać konkretną odpowiedź.

Pozdrawiam i życzę powodzenia

[!*!]

Dodam jeszcze do tego co napisał wyżej kamil4u... Jak już osiągniesz swój efekt, sprawdź go pod każdą przeglądarką i zoptymalizuj, bo nie ważne czy działa, ważne jak np. czasami jest lepiej upchnąć dane w tablicy niż odwoływać się do elementu bezpośrednio... tak mi się przypomniało, gdy sam tworzyłem mapy, wydajność tego była zauważalna.

[johny_s]

moze to Ci sie przyda, co prawda to nie canvas ale porjekt ladnie roziwniety

http://openlayers.org/

[livinghatret]

http://openlayers.org/

Zdecydowanie najlepsze rozwiązanie! W zeszłym roku robiłem podobny projekt, w którym wyświetlana była mapa pewnego dużego obiektu. Po kilku dniach zabawy z JS i ciągłych problemów, zabrałem się openlayers i poszło jak z płatka

[#luq]

(oczywiście to już nie jest kwestia samego elementu, a przeglądarek, choć tu jak np do webGL możnaby się przyczepić, z renderingiem 3d ma to tyle wspólnego co paint z profesjonalnym edytorem grafiki).

Nie zgodzę się Brandon Jones prelegent tegorocznego onGameStart napisał hm... zobacz sam :] http://vimeo.com/32173164 - minuta 36:00 ~60 FPS.
Po zatym nowe iPhony podobno przyśpieszyły ~13 razy jeśli chodzi o szybkość canvasa w stosunku do poprzedniej wersji ;)

Jeśli chciałbyś to napisać jednak sam to ja poleciłbym zobaczenie Crafty ostatnio testowałem i całkiem ciekawy framework. Mogę jeszcze dodać od siebie spojrzenie na mojego bloga - o tutaj

[!*!]

Nie zgodzę się Brandon Jones prelegent tegorocznego onGameStart napisał hm... zobacz sam :] http://vimeo.com/32173164 - minuta 36:00 ~60 FPS.
Po zatym nowe iPhony podobno przyśpieszyły ~13 razy jeśli chodzi o szybkość canvasa w stosunku do poprzedniej wersji

vimeo to syf, daj to na YT. Zresztą nie ważne co napisał/powiedział. Nawet nie jest ważne co zrobił, bo mógł wykonać GTA4. Chodzi o to że webGL/canvas mają dość duże ograniczenia w stosunku do tworzenia grafiki 3d, tak jak to się robi tradycyjnie. Większość rzeczy robisz sztucznie, jak choćby oświetlenie, czy płaszczyzny świata. Chyba że to poprawili, choć nigdzie o tym nie słyszałem. Jeśli to się nie zmieni, to webGL leży, bo poza paroma demkami, nic większego nie będzie miało sensu powstać, bo nikt nie będzie się z tym męczył za darmo, a koszty przy produkcji przy dzisiejszym stanie są duże.

W samym JS też możesz zrobić gre w 3d i co z tego? Tak samo jest z webGL, choć kibicuję temu projektowi, jednak myślę że z chmurą nie ma szans.

Ten post edytował !*! 8.12.2011, 10:58:51

[t3ix]

bardzo dziękuję za wszystkie odpowiedzi i zainteresowanie tematem, przejrzę to wszystko i powalczę w wolnym czasie

Wczoraj przez przypadek natknąłem się na znacznik <area> i <map> i dzięki niemu zrobiłem to co chciałem
Jakby ktoś chciał rozwiązanie problemu:
- skrypt generuje duży obrazek na podstawie podanego X i Y
- skrypt generuje znaczniki <map> i <area>
- jak kliknę strzałkę to zamieniam obrazek na nowy (jquery) i generuję nowe znaczniki

dzięki, można zamknąć

[kilas88]

vimeo to syf, daj to na YT. Zresztą nie ważne co napisał/powiedział. Nawet nie jest ważne co zrobił, bo mógł wykonać GTA4. Chodzi o to że webGL/canvas mają dość duże ograniczenia w stosunku do tworzenia grafiki 3d, tak jak to się robi tradycyjnie. Większość rzeczy robisz sztucznie, jak choćby oświetlenie, czy płaszczyzny świata. Chyba że to poprawili, choć nigdzie o tym nie słyszałem. Jeśli to się nie zmieni, to webGL leży, bo poza paroma demkami, nic większego nie będzie miało sensu powstać, bo nikt nie będzie się z tym męczył za darmo, a koszty przy produkcji przy dzisiejszym stanie są duże.

W samym JS też możesz zrobić gre w 3d i co z tego? Tak samo jest z webGL, choć kibicuję temu projektowi, jednak myślę że z chmurą nie ma szans.

Eee... chyba nie bardzo wiesz o czym piszesz. "Tak samo jest z webGL, choć kibicuję temu projektowi, jednak myślę że z chmurą nie ma szans." - wtf? WebGL nie ma szans z chmurą, czyli że co?

A tak przy okazji, WebGL bazuje na OpenGL. Mówi Ci coś ta technologia?