[CSS][JavaScript][HTML]Mapa w canvas'ie Opcje

[bartek10]

Witam, chciałbym stworzyć mapę do gry przeglądarkowej. Chodzi o wyrysowanie jakiejś fikuśnej mapy i rozmieszczenie na niej kropek, które będą oznaczały miasta. Po kliknięciu na nią przechodzi się do wybranego miasta. Czy istnieje jakiś sposób aby wyrysować taką mapę w elemencie canvas? Dodatkowo w bazie będą przechowywane współrzędne danych miast i chciałbym je odpowiednio wtedy nanieść na mapę przy pomocy wspomnianych współrzędnych. Samo wyrysowanie mapy nie powinno chyba sprawić problemów ale już wyznaczenie miejsc rozmieszczenia miast przy pomocy współrzędnych chyba tak.. Ogólnie nie za bardzo wiem jak się za to zabrać. Czy ktoś miałby dla mnie jakiegoś rodzaju wskazówki, pomysły etc.?

[PrinceOfPersia]

Po kliknięciu na nią przechodzi się do wybranego miasta. Czy istnieje jakiś sposób aby wyrysować taką mapę w elemencie canvas?

Jest sposób, tylko, że czysty Canvas "nie pamięta" obiektów, a jedynie przyjmuje komendy typu "rysuj obrazek", "rysuj kółko", "rysuj krzywą", "czyść ekran" etc. więc nie podczepiłbyś bezpośrednio zdarzenia onclick pod konkretne miasto, a jedynie pod cały Canvas, i byś musiał przeliczyć ręcznie współrzędne, żeby ustalić, które miasto było kliknięte.

i dlatego powstały biblioteki do Canvasa (EaselJS, KineticJS, FabricJS, PaperJS etc.), które stwarzają wygodną abstrakcję obiektową (pozwalają doczepić zdarzenie bezpośrednio do obrazka, czyli coś, czego byś nie zrobił na czystym canvasie).

mógłbyś też - łatwy sposób - zrezygnować w ogóle z Canvasa i robić to na divach z position:absolute, animując je za pomocą jQuery.

No i żeby się za to w ogóle zabrać, musiałbyś znać oczywiście jako tako język JavaScript, łącznie z obiektówką.

ale już wyznaczenie miejsc rozmieszczenia miast przy pomocy współrzędnych chyba tak..

dopóki mapa jest prostokątna, a jednostki są w pikselach jest to łatwe... gorzej jakby mapa była okrągła (w formie a la globus), a jednostki byłyby szerokością i długością geograficzną (ciężko przeliczyć na piksele).

Aha, no i zakładam, że tę mapę już masz jakoś, w formie bitmapy, albo coś.

Ten post edytował PrinceOfPersia 4.05.2013, 14:42:48

[bartek10]

No właśnie nie mam jeszcze żadnej bitmapy... o KineticJS tylko słyszałem. Mapa niekoniecznie miałaby być prostokątna... jakiś "fikuśny" kształt;) no i mowa tutaj o jednostkach jako pixele.

[PrinceOfPersia]

bo te biblioteki co podałem są ogólnie do grafiki, natomiast nie zajmują się tworzeniem mapy, co byś musiał na własną rękę robić.

No właśnie nie mam jeszcze żadnej bitmapy...

ale docelowo czym miałaby być mapa? Jednolitym plikem graficznym png/jpg itp., czy raczej planujesz dynamicznie tworzyć teren? (chodzi mi o sam teren, jakby to miało wyglądać, czy np. rzeka byłaby narysowaną w Photoshopie całą rzeką czy raczej byś chciał budować ją programowo z mniejszych klocków, np. poziomy odcinek rzeki--- poziomy odcinek rzeki ---poziomy odcinek rzeki ).

[bartek10]

Mapę chciałbym generować programowo, nie przy użyciu gotowej grafiki. Użytkownik wczytaniu mapy widziałby ją w największym powiększeniu. Po dwukliku mapa się przybliża do miejsca, w którym została kliknięta. Wtedy dopiero wczytywałbym kawałek mapy z dodatkowym wczytaniem plików graficznych przedstawiających jakiś las, górę, jezioro etc... Przy największym powiększeniu widoczny jest tylko ogólny jakiś zarys mapy z wypełnieniem nad którym się jeszcze zastanawiam. Wiesz, żeby nie przedstawiać jej jako jedną zieloną mapę... Kiedyś pamiętam, że próbowałem wczytać mapę 100 na 100 składającą się z małych elementów symbolizujących miasta. Każdy "piksel" mapy był plikiem graficznym... No i wiem, że to nie zdaje egzaminu, bo mapa się długo wczytywała. Nie wiem jak to by wyglądało z canvasem - czy nadmiernie nie spowalniałby "wczytania" mapy?