Map system

[travo]

Ive ben thinking about how to implement tis, I do not want a request for every time the map is moved, if I can

Ive been thinking of storing al village data in javascript arays, and then upon trying to move the map, javascript will check for any maps not yet stored, and send a json request containing the coordinates not yet saved. If all are in the aray, the villages simply show.

I forgot to mention the empty spaces will also have data stored.

The server will send a json response, which will be parsed into the array, and the appropriate villages will be shown.

Has anyone done a map sstem before, was your method similar to this, and could you make this system better?


Also to save another thread, this is already my 2nd in the last 5 minutes, does anyone have ideas on making the map scroll smoothly?

Thanks

[Nox]

Well, can't the javascript be modified or influenced? I would be worried about security issues

does anyone have ideas on making the map scroll smoothly?

You can use jQuery UI: http://jqueryui.com/demos/draggable/
Seem larger but gzip can reduce that a LOT

[jannesiera]

does anyone have ideas on making the map scroll smoothly?

You can use jQuery UI: http://jqueryui.com/demos/draggable/
Seem larger but gzip can reduce that a LOT

Good idea. I looked into jQuery UI but didn't come up with the idea of using dragable for maps.

[lolninja]

Hey, I wrote a html mapping system a while back, http://loot.httpmmo.com/iso/?seed=1 which generates random maps, so changing the seed gives you different maps. The problem I found with this, when generating large maps it requires a large amount of processing time, which causes the server to lag when under any kind of load.

In an attempt to solve this I implemented a caching system, so all the tile information was dropping into a database. The problem with this was when drawing a section of the world it required me to select often 100s if not 1000s of rows and process them into html, which again caused the server to lag when under load.

The solution I found was to pre-process the maps into areas, an area would then be serialized and saved in a text document, this allowed me to quickly unserialize the processed map and generate the html. And because the tile information was already stored in the database I retained the ability to select specific tiles when I needed to.
What you could do, is when you serialize the map data down, you could also generate a json version, that way grabbing additional mapping information is purely a case of fetching a static file from the server

For my current development I have opted for pre-processed/pre-rendered tiles, so I store several tiles in one 512x512 image, and I stream these tiles down, much like how Google maps works , though this isn't suitable for a tile based village/Civilisation game, as you lose a lot of flexibility on the client.


==edit==
To make the map scroll smoothly, you need to store all your tiles in a controlling div, which you position absolutely in a view port, you then change the top/left and it appears to move, this is the smoothest way I have found.

You end up with html kinda like...

Code: [Select]

<style type="text/css" media="screen">
#viewport{
position: relative;
width: 320px;
height: 240px;
overflow: hidden;
}
#map{
position: absolute;
top: 0;
left: 0;
}

.tile{position: absolute;}

.y1{top: 0px;}
.y2{top: 64px;}
.y3{top: 128px;}
/* ... */

.x1{top: 0px;}
.x2{top: 64px;}
.x3{top: 128px;}
/* ... */
</style>
<div id="viewport">
<div id="map">
<div class="tile y1 x1"></div>
<div class="tile y1 x2"></div>
<div class="tile y1 x3"></div>
<div class="tile y1 x4"></div>
<div class="tile y1 x5"></div>
...
</div>
</div>


[travo]

Well, can't the javascript be modified or influenced? I would be worried about security issues

How would this be a security issue?

If anyone wants to play around with the javascript, they will be only destroying the information for whatever village... They might have a little fun, but it will do noting. The next time they load the page, everything will be restored... It is purely just reduce the need for requests.

I already have jQuery and Scriptaculous in the game, and plan on using them. However to use the draggable class, wouldnt I have to load the entire map before it would work?


@lolninja I cant preprocess the maps because they will cntain al of the players villages, and will (hopefully) have new villages being added constantly.

[lolninja]

The terrain could be pre-processed, then just select the villages within a given region, so you get two arrays in the json, one being the map tiles, and the second being the village tiles

[Nox]

I think I misunderstood that about the javascript and map so ok

I don't exactly know what you mean by scrolling map so I posted what hit my mind. Another way might just be using setTimeout and changing coordinates, if that is what you intend. Or use jQuery's animate function.

"wouldnt I have to load the entire map before it would work?"
well...I guess I understand a bit more... no draggable then, but see above

[jannesiera]

"wouldnt I have to load the entire map before it would work?"
well...I guess I understand a bit more... no draggable then, but see above

Couldn't you load a big part of the map and send an AJAX request if you need to load a part out of reach?

[Nox]

If the server can handle it...may happen that user might trigger three AJAX requests at once simply by moving for example to the right top corner of map and there might be a visible pause when loading, the latter not being a big issue so ... it may work, but imho might be more demanding (I was under impression travo wants to optimize it to as less querys). Well, there might be some optimization I don't see now, just pointing out possible cons...

[travo]

Nox I didnt think about it like that...

Im think that sending a big part of the map will be the way to go... Mabe send data for 30x30 around the player, as thay ae most likely ging to use the map to view villages around them, not people miles away.


Ive been looking at this site http://en41.tribalwarsmap.com/

Looking at this, they also use JSON to store all of the data, except they dont have smooth map changes... I think it still works well though... What do you guys think?

[Scion]

I guess it depends on how your scrolling works. heres three simple techniques im sure that there are many more as well.

if you have buttons that you click to scroll left or right then you will need to have one square off to that side of your map available when you redraw the map

if you allow the user to click somewhere in the map and have it recenter on that point then, you will need to have up to up to half the width of your visible map available when you redraw.

If you allow the user to click in the map and drag that point to another location in the map then you will need to have up to all the width of your map available when you redraw.

You can decide to retrieve the additional map pieces in response to the user event, or you can decide to retrieve them in expectation of the user event. There is ofcourse a tradeoff between these, in the first your user has to wait for the required map to download, in the second you may end up sending significantly more information than is ever actually required.

for the last option with full map width scrolling then you need to send 9 times the amount of information to the user just to have the required extra width all around the maps current displayed position.

whats best in your case is difficult to know, it may be that sending the full 9 times the data....or even a double ring around the current map position is best....New players may use the map and scroll around upto 2-3 map widths around their current position, where as experienced players may select their targets bassed on tables or lists of village names that theyve alread interacted with and jump straight to them without using the map.

[lolninja]

If you pre-process the map data into .json files on the server that are publicly accessible you can enable caching, which means if there browser is primed you don't have to worry about using bandwidth, and this also eliminates waiting for the ajax to fire.

If your caching the map data then all you have left to do is download village information, this could be dynamically created on request, or it could event be generated by a forever script which then sets up a unique file name based upon some rule, and enable caching on that as well

The draw backs of this system is that it requires you to execute two ajax requests initially, so you will notice a larger hit when your users load, but once they have primed their cache the load will diminish. You could also send some commands to the client to start caching information around there village, so when they start moving around the data is already on there machine.

Though if your mapping data is pretty simple then this approach is pretty pointless, most of my research into mapping systems, and getting them to dynamically load and unload is based on pretty complex maps, and if your world basically consists of grass and random trees with lots of villages using one of the methods Scion mentioned would be more effective.

[travo]

I dont think I will be ale to preprocess the data into filoes, it will be constantly changing. From the map, players will be able to see the information about the villages such as name, points, owner, army, etc... These will be changing, so I cannot have them saved locally...

[RangerSheck]

does anyone have ideas on making the map scroll smoothly?

You can use jQuery UI: http://jqueryui.com/demos/draggable/
Seem larger but gzip can reduce that a LOT

Good idea. I looked into jQuery UI but didn't come up with the idea of using dragable for maps.

If you're looking for a way to drag a map around in a viewport, check out MoveableMap:
http://offtheline.net/2008/3/13/moveablemap-or-anything-else-in-a-viewport

It uses prototype - been meaning to write a jquery port, but haven't had time to...
(also seems to be a little weird in Firefox 3.5 - works fine in Aethora, but I have to fix those examples in the article...)

[karnedge]

I don't know if you thought about this... but why not use Google Maps API which allows you to use tiles. This will make the map obviously movable and only load the necessary tiles. At the same time it also has a coordinate system for placing villages and the such.

Check out www.bigdoodles.com to see what I mean. She scans very high resolutions of her drawings then dices them up into tiles and loads them through the API so you can drag it around.

I think it's an excellent way to do any map that is just for point and click.

[zykal]

WOW that is awesome the google maps API that could be very useful. kinda a cool idea it'd probably work out rather well if you were able to get it to work out.

[Darklandz]

If you're looking for a way to drag a map around in a viewport, check out MoveableMap:
http://offtheline.net/2008/3/13/moveablemap-or-anything-else-in-a-viewport

It uses prototype - been meaning to write a jquery port, but haven't had time to...
(also seems to be a little weird in Firefox 3.5 - works fine in Aethora, but I have to fix those examples in the article...)

It would be very nice to see a jQuery version of this, i've been looking for this for ages ...

[lolninja]

Hey, sorry about the thread necromancy, but its kind of relevant to topic.

Earlier in the post I was recommending using pre-processed blocks of mapping information, which is stored in a json file on the server, this information then gets downloaded and used to render a map, well I've finished some demo code using my mappy code as a base, its largely untested, so may do some random things, or be horrifically slow, but I think its call, and it demonstrates how you can use pre-processed map data to build some pretty awesome looking maps (imho)

http://demo.httpmmo.com/mappy/

I've still got to implement the dynamic building placement bit, but this shows off the geometry side of life.

[Xavier]

Hey, sorry about the thread necromancy, but its kind of relevant to topic.

Earlier in the post I was recommending using pre-processed blocks of mapping information, which is stored in a json file on the server, this information then gets downloaded and used to render a map, well I've finished some demo code using my mappy code as a base, its largely untested, so may do some random things, or be horrifically slow, but I think its call, and it demonstrates how you can use pre-processed map data to build some pretty awesome looking maps (imho)

http://demo.httpmmo.com/mappy/

I've still got to implement the dynamic building placement bit, but this shows off the geometry side of life.

That's quite impressive. Did you provide any info about how did you implement it somewhere on the net?

[lolninja]

Hey Xavier, unfortunately I've not gotten around to writing any of this mapping stuff down, though the majority of what I have implemented is very much the same as implementing an isometric renderer using a more traditional games development language.
Once I have the core technology working correctly I may have a bash at writing an article or two discussing how I went about implementing different sections of Mappy, but for now I feel that its a more productive use of my tim focusing on making awesome happen
Also being a hardcore geek, I often have problems explaining how stuff I've written works, so any article I do write is likely to be a nonsensical mess

[raestlyn]

If you're looking for a way to drag a map around in a viewport, check out MoveableMap:
http://offtheline.net/2008/3/13/moveablemap-or-anything-else-in-a-viewport

It uses prototype - been meaning to write a jquery port, but haven't had time to...
(also seems to be a little weird in Firefox 3.5 - works fine in Aethora, but I have to fix those examples in the article...)

It would be very nice to see a jQuery version of this, i've been looking for this for ages ...

There is a jQuery plugin.

[travo]

lolninja that looks awesome... My map will just be plain overhead view, more simple.

However with the json file part, I want my map to be up to date, because people will most likely base their attacks off the stats they see. As far as I can see, writing to the database and a file on every update wouldnt be too good.

Ive still been looking at that tribalwars map site. Getting through slowly, because exams are coming, but I think Ill use a system like that.

on each map move the server returns a page like this http://en42.tribalwarsmap.com/ajaxmap.php?x=492&y=494&x2=507&y2=505 approx 2-3kb (unless that bit is cached in js), so should load quickly even on dialup. Can anyone see flaws I cannot with this system?

Also Ive decided I dont need a fancy scrolling map, at least not for now.

[Chris]

You don't need x2, y2, just make a constant radius (a bit shorter URL, better for bandwidth).

[travo]

Oh that was me posting a link as an example, looks like i messed up the bbcode, that system is alredy in place, I aim to make mine similar

[lolninja]

They way I'm planning on implementing dynamic data in my game is to place multiple json requests, one for the static terrain, and 1 for the buildings and units that exist around the world.

Using something like Amazons S3 service I can quickly serve the mapping data to the client, with zero hit on my server, meaning I should be able to serve more people. Though it may suck for people with a slower connection

But this method may not work for everyone, as with Tribal wars, their map is vastly less complex that what I have implemented, rendering hills adds a lot to the complexity and thus the amount of data that needs to be transmitted, and when I start adding trees, rivers and other terrain details it will get even worse :S