   [web] Ways to build world map?
  Hello all,First of all, sorry if I don't make sense at some point but English isn't my native language.We are a team of two web developers building a small strategy browser-game, mostly for learning purposes, using PHP & &#106avascript.For now, our map is just a background image where we place units, cities etc, based on some coordinates using &#106avascript. One (simple) idea for the complete map of the game's world is to be a number of background images with the corresponding coordinates for each one of them. For example, when the user wants to move the map to the left the next image will be loaded and the cities etc will be placed.Do you have any other ways to propose to build the world map of the game? As an example, I like the way the map operates in the West (http://www.the-west.net/) but I cannot find any resources of how to build such an interactive map.Thank you very much for your time.PS: Sorry if I've posted this in a wrong section.   
Quote:Original post by KillBeer...Do you have any other ways to propose to build the world map of the game? As an example, I like the way the map operates in the West (http://www.the-west.net/) but I cannot find any resources of how to build such an interactive map...Search for "tile based map" and "tile engine" on Google or here at gamedev and implement these techniques in HTML with CSS (static) and after that in &#106avascript as DHTML (= DOM manipulation) or with the HTML canvas tag (dynamic) or build the map image with PHP on the server dynamicly and use that.   ;Quote:Original post by AnntorSearch for "tile based map" and "tile engine" on Google or here at gamedev and implement these techniques in HTML with CSS (static) and after that in &#106avascript as DHTML (= DOM manipulation) or with the HTML canvas tag (dynamic) or build the map image with PHP on the server dynamicly and use that.Thank you for the reply. I've searched a little bit about those terms and they are close to the idea we already had. I found a lot of interesting info though so I'll continue the reading.A solution of how to create a google-maps-like draggable map (like the west map I mentioned in my previous post) will be strongly welcome.   ;  Hello,I just posted a small article about creating isometric maps for games. As for the dynamic loading, it's actually fairly easy.You could add a function to move the map by adding mousedown event and mousemove. Then while moving you could check the position and also use the :in-viewport selector (http://plugins.jquery.com/project/viewport). Then you could just load the new content via ajax and finish. Actually fairly easy.My article can be found here: http://www.cw-internetdienste.de/2010/05/creating-a-basic-isometric-map/Best Regards,ChrisEDIT:By the way... creating the map via PHP can be nice when doing it rarely, but if you plan to create this on movement etc. it's definantly a no go. gdlib is slow and processor intense.The canvas solution might sound great, but I wouldn't use it. If you plan to have many animated things and often changing elements, you're much faster in rewriting the inner dom of the map element then redrawing it using canvas. browsers are very fast in basic dom rendering, but canvas is still very slow in relation to this. We had also been using canvas to draw our map, after making it basic xhtml with canvas as tool, we gained around 60% of performance. Canvas can be used for creating some kind of transparency map for objects so you can select them, where pixels are and not where the image itself is.[Edited by - Bahlor on May 7, 2010 5:10:39 AM];  Thank you very much for the article Chris, it's very interestYesterday I managed to complete a small (non-isometric) draggable map and now I'm trying to figure out how to load new data based on the position revealed while someone moves it. I'll try your tips.The isometric map looks tempting but I'll try to complete the one I'm building first. One step at a time!I'm not going to create the map dynamically using gdlibrary or something like that. The idea is to use something like the spritesheet you mentioned in your article and by altering the DOM.   ;  Glad you liked it. :) However those things with php / canvas had been more related to Anntor as he suggested those.This might also be useful for you http://remysharp.com/2009/01/26/element-in-view-event-plugin/ Of course this is only for the whole viewport, but you might be able to use some of the code to make it related to a divs view.I hope this helps a bit. If you're creating a map that fills the whole screen, you actually don't even need to recode it and might use it as it is. Just add the in-viewport event to your tiles and load them as they come to the viewport. Maybe unload the elements as they go off the screen to save memory. This is of course application related, but pretty simple to achieve. :)   ;  Hi Chris I wanted to ask your opinion on something. I was thiking of creating a map using the in-viewport event as you describe it. What I was thinking was to load the whole map in plain divs in the beggining and then use in-viewport to load only the elements that are visible to the user. Then, as the maps gets dragged around the new elements that are coming in the viewport get loaded and those going out of the viewport unload. Do you find this a good idea or a big map with thousands of divs will make the browser get bogged down? I will try this later anyway but I wanted someone else's opinion too. Thank you for any help!Quote:Original post by BahlorGlad you liked it. :) However those things with php / canvas had been more related to Anntor as he suggested those.This might also be useful for you http://remysharp.com/2009/01/26/element-in-view-event-plugin/ Of course this is only for the whole viewport, but you might be able to use some of the code to make it related to a divs view.I hope this helps a bit. If you're creating a map that fills the whole screen, you actually don't even need to recode it and might use it as it is. Just add the in-viewport event to your tiles and load them as they come to the viewport. Maybe unload the elements as they go off the screen to save memory. This is of course application related, but pretty simple to achieve. :);  Theres a slight hit when having thousands of div's moving around inside one div. Noticable when moving the map constantly. Out of the thousands of divs, only about 120ish are actually shown in user's current location. The rest are hidden.THis is on firefox/chrome. IE is much worse. Its mainly DOM performance. I would try 10k to 20k divs and see if it affects the browser badly. Or just not load the whole map at once and have it recalculate every so often.   