Jump to content
  • Advertisement
Sign in to follow this  
ID Merlin

Unity [web] Map display loading images very slowly

This topic is 4134 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

There was suggestion made in this thread http://www.gamedev.net/community/forums/topic.asp?topic_id=432679 to have the client-side javascript create the repetitive map tiles. I implemented this approach, and my page size was reduced dramtically, which is really good for my server bandwith usage. But now the map loads each tile individually, it seems, ignoring the fact that most of the tiles are duplicates (and are already in the browser cache). I'm sure I'm missing something elementary. Or, is the javascript really taking 30 seconds to create about 700 image tags in the page? A tidbit of data that might help: the tiles are created dynamically with a php script (the expires header is set to ten days), and these are the ones that load really slowly. The static graphics (such as trees) load almost instantly. Any ideas? If you want source, I could post a snippet or two.

Share this post


Link to post
Share on other sites
Advertisement
Here's the JS code:

function init_map(editable) {

// Thumb doesnt need this code
if (scale > 3) return;

var folders = ['dungeon','tactical','region','world'];

var div_map = $('div_map');

for (var x = 0; x < 25; x++)
for (var y = 0; y < 25; y++) {

terr = document.createElement('img');
terr.src = 'tile.php?t=' + map[x][y][0];
terr.id = 't_'+x+'_'+y;
terr.style.border = 0;
terr.style.position = 'absolute';
terr.style.left = x * 32;
terr.style.top = terrain_scrn_y(x,y);
terr.style.zIndex = y * 10;

var topmost = terr;

var feature = map[x][y][1];
if (feature.length == 0 && editable == 0) {
feat = null;
} else if (feature.length || editable) {
feat = document.createElement('img');
feat.id = 'f_'+x+'_'+y;
var y_adj = 0;
feat.src = './grafix/world/hum/' + feature + '.png';
feat.style.border = 0;
feat.style.position = 'absolute';
feat.style.left = x * 32;
feat.style.top = feature_scrn_y(x,y) + y_adj;
feat.style.zIndex = y * 10 + 1;

var topmost = feat;
}

// if (x==0 && y<=6) alert("Cell:"+cell.id+" usemap:"+cell.getAttribute('useMap'));

topmost.setAttribute('useMap', '#m_'+x+'_'+y);

var elm = document.createElement('map');
elm.setAttribute('id', 'm_'+x+'_'+y);
if (y > 0) { // this provides clickability for the hex above because of overlap
var area = document.createElement('area');
area.setAttribute('href', 'javascript:do_click('+x+','+(y-1)+')');
area.setAttribute('shape', 'rect');
area.setAttribute('coords', '3,0,28,9');

elm.appendChild(area);
}
var area = document.createElement('area');
area.setAttribute('href', 'javascript:do_click('+x+','+y+')');
area.setAttribute('shape', 'rect');
area.setAttribute('coords', '3,11,28,38');

elm.appendChild(area);

div_map.appendChild(terr);
if (typeof feat != "undefined") div_map.appendChild(feat);
div_map.appendChild(elm);
}
}


http://interactivedungeon.com/aragon

Share this post


Link to post
Share on other sites
There are several things I can recommend:

1. As you're serving the tiles by a PHP script, ensure that it's sending headers which are compatible with client-side caching of those tiles.
2. Make sure that you always use the same URL for the same tile- it's not clear from this example whether you are doing this.
3. Consider preloading the tiles into the browser cache (This only works if you've got the right cache headers).

If your PHP script serving the tiles uses sessions, this automatically makes it uncacheable- don't do this!

I can't accept that there is any real need to have your tile images served by PHP in the first place - I recommend that you change to flat files if possible.

You can adjust caching behaviour by setting the "Expires:" header typically. If you set "Expires" some way in the future (Weeks, maybe), the browser shouldn't go and get the tiles so often.

I can't find where on your web site this is happening; your link above tells me to register, which I'm not going to do just to try to diagnose this problem.

Mark

Share this post


Link to post
Share on other sites
Quote:
Original post by markr
There are several things I can recommend:

1. As you're serving the tiles by a PHP script, ensure that it's sending headers which are compatible with client-side caching of those tiles.
2. Make sure that you always use the same URL for the same tile- it's not clear from this example whether you are doing this.
3. Consider preloading the tiles into the browser cache (This only works if you've got the right cache headers).

If your PHP script serving the tiles uses sessions, this automatically makes it uncacheable- don't do this!

I can't accept that there is any real need to have your tile images served by PHP in the first place - I recommend that you change to flat files if possible.

You can adjust caching behaviour by setting the "Expires:" header typically. If you set "Expires" some way in the future (Weeks, maybe), the browser shouldn't go and get the tiles so often.

I can't find where on your web site this is happening; your link above tells me to register, which I'm not going to do just to try to diagnose this problem.

Mark

Thank you. That helps.

The tile script doesn't use sessions, but the main page does. That is probably it - as it seems to load the tiles the first time I visit the page. Expires is set to 864000 - ten days.

I'll probably go to static images. The only reason php is used is that there are a zillion combinations, and I got tired of "drawing" them manually.

(Sorry about the register redirect -- I forgot that it redirected unregistered users.)

Share this post


Link to post
Share on other sites
I fixed the register redirect, but it seems to vary from user to user. I ues IE 6.x, and have no trouble. My partner also uses IE 6, and the images don't cache. One other tester uses Avant, and images don't cache for him, either.

Is there a browser secret I am unaware of?

Share this post


Link to post
Share on other sites
I've registered but it still tells me to register.

Also the tile drawing script doesn't work properly at all - all the tiles are on top of each other in the top left hand corner of the play field.

You seem to have failed to notice that a style definition for "top" or "left" needs to be in pixel units (e.g. 50px) not just a number "50".

You haven't tested this in multiple browsers, have you?

The integration with the bulletin board authentication is screwed up - I'm registered and logged on and it still asks me to register.

The whole application smells like it's been poorly tested. Before you open it to the public you should at least test it locally on every browser you intend to support. No javascript errors should be produced by any of them.

Mark

Share this post


Link to post
Share on other sites
I also recommend:

1. Use an external style sheet rather than an inline one
2. Put all javascript code in an external .js file - you'll find that makes it easier to write (as it won't be mixed with PHP) and more maintainable, as well as being cached by the browser
3. If you're going to render some of the map by javascript, do the whole lot this way. Consider passing some kind of data structure through from the PHP to javascript (e.g. in JSON), then having it interpret that.

But the essential problem is lack of testing I feel

Mark

Share this post


Link to post
Share on other sites
Quote:

I'll probably go to static images. The only reason php is used is that there are a zillion combinations, and I got tired of "drawing" them manually.


You can use PHP to generate static images. Simply give a filename as second argument to the imagegif or imagepng functions. Generate them once on the server and use the generated static images from the map editor.

Share this post


Link to post
Share on other sites
Quote:
Original post by markr
I also recommend:

1. Use an external style sheet rather than an inline one
2. Put all javascript code in an external .js file - you'll find that makes it easier to write (as it won't be mixed with PHP) and more maintainable, as well as being cached by the browser
3. If you're going to render some of the map by javascript, do the whole lot this way. Consider passing some kind of data structure through from the PHP to javascript (e.g. in JSON), then having it interpret that.

But the essential problem is lack of testing I feel

Mark


1. The style sheet comes from vBulletin, which is rendered inside the page for some reason. (I'd guess so the style can be changed by the user?)
2. Most of the js is in external files -- the map code is somewhat chaotic right now as I'm working out the performance issues.
3. I'm in the process of doing that right now, which leads to some of the problems you see now. When it was straight HTML, the map worked fine, but the file was huge.

What browser are you using? And yes, I haven't advertised this at all, except a couple of pleas for help here, because I have yet to test on a non-IE browser.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!