• Advertisement
Sign in to follow this  

Unity [web] Map display loading images very slowly

This topic is 4040 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
Quote:
Original post by Sander
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.


Yes, that is the solution that I used. I added a file_exists test and image save to my existing code and browsed the map to create the images. About 1,200 images later, all is good as far as I can tell.

Share this post


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

  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By GytisDev
      Hello,
      without going into any details I am looking for any articles or blogs or advice about city building and RTS games in general. I tried to search for these on my own, but would like to see your input also. I want to make a very simple version of a game like Banished or Kingdoms and Castles,  where I would be able to place like two types of buildings, make farms and cut trees for resources while controlling a single worker. I have some problem understanding how these games works in the back-end: how various data can be stored about the map and objects, how grids works, implementing work system (like a little cube (human) walks to a tree and cuts it) and so on. I am also pretty confident in my programming capabilities for such a game. Sorry if I make any mistakes, English is not my native language.
      Thank you in advance.
    • By Ovicior
      Hey,
      So I'm currently working on a rogue-like top-down game that features melee combat. Getting basic weapon stats like power, weight, and range is not a problem. I am, however, having a problem with coming up with a flexible and dynamic system to allow me to quickly create unique effects for the weapons. I want to essentially create a sort of API that is called when appropriate and gives whatever information is necessary (For example, I could opt to use methods called OnPlayerHit() or IfPlayerBleeding() to implement behavior for each weapon). The issue is, I've never actually made a system as flexible as this.
      My current idea is to make a base abstract weapon class, and then have calls to all the methods when appropriate in there (OnPlayerHit() would be called whenever the player's health is subtracted from, for example). This would involve creating a sub-class for every weapon type and overriding each method to make sure the behavior works appropriately. This does not feel very efficient or clean at all. I was thinking of using interfaces to allow for the implementation of whatever "event" is needed (such as having an interface for OnPlayerAttack(), which would force the creation of a method that is called whenever the player attacks something).
       
      Here's a couple unique weapon ideas I have:
      Explosion sword: Create explosion in attack direction.
      Cold sword: Chance to freeze enemies when they are hit.
      Electric sword: On attack, electricity chains damage to nearby enemies.
       
      I'm basically trying to create a sort of API that'll allow me to easily inherit from a base weapon class and add additional behaviors somehow. One thing to know is that I'm on Unity, and swapping the weapon object's weapon component whenever the weapon changes is not at all a good idea. I need some way to contain all this varying data in one Unity component that can contain a Weapon field to hold all this data. Any ideas?
       
      I'm currently considering having a WeaponController class that can contain a Weapon class, which calls all the methods I use to create unique effects in the weapon (Such as OnPlayerAttack()) when appropriate.
    • By Vu Chi Thien
      Hi fellow game devs,
      First, I would like to apologize for the wall of text.
      As you may notice I have been digging in vehicle simulation for some times now through my clutch question posts. And thanks to the generous help of you guys, especially @CombatWombat I have finished my clutch model (Really CombatWombat you deserve much more than a post upvote, I would buy you a drink if I could ha ha). 
      Now the final piece in my vehicle physic model is the differential. For now I have an open-differential model working quite well by just outputting torque 50-50 to left and right wheel. Now I would like to implement a Limited Slip Differential. I have very limited knowledge about LSD, and what I know about LSD is through readings on racer.nl documentation, watching Youtube videos, and playing around with games like Assetto Corsa and Project Cars. So this is what I understand so far:
      - The LSD acts like an open-diff when there is no torque from engine applied to the input shaft of the diff. However, in clutch-type LSD there is still an amount of binding between the left and right wheel due to preload spring.
      - When there is torque to the input shaft (on power and off power in 2 ways LSD), in ramp LSD, the ramp will push the clutch patch together, creating binding force. The amount of binding force depends on the amount of clutch patch and ramp angle, so the diff will not completely locked up and there is still difference in wheel speed between left and right wheel, but when the locking force is enough the diff will lock.
      - There also something I'm not sure is the amount of torque ratio based on road resistance torque (rolling resistance I guess)., but since I cannot extract rolling resistance from the tire model I'm using (Unity wheelCollider), I think I would not use this approach. Instead I'm going to use the speed difference in left and right wheel, similar to torsen diff. Below is my rough model with the clutch type LSD:
      speedDiff = leftWheelSpeed - rightWheelSpeed; //torque to differential input shaft. //first treat the diff as an open diff with equal torque to both wheels inputTorque = gearBoxTorque * 0.5f; //then modify torque to each wheel based on wheel speed difference //the difference in torque depends on speed difference, throttleInput (on/off power) //amount of locking force wanted at different amount of speed difference, //and preload force //torque to left wheel leftWheelTorque = inputTorque - (speedDiff * preLoadForce + lockingForce * throttleInput); //torque to right wheel rightWheelTorque = inputTorque + (speedDiff * preLoadForce + lockingForce * throttleInput); I'm putting throttle input in because from what I've read the amount of locking also depends on the amount of throttle input (harder throttle -> higher  torque input -> stronger locking). The model is nowhere near good, so please jump in and correct me.
      Also I have a few questions:
      - In torsen/geared LSD, is it correct that the diff actually never lock but only split torque based on bias ratio, which also based on speed difference between wheels? And does the bias only happen when the speed difference reaches the ratio (say 2:1 or 3:1) and below that it will act like an open diff, which basically like an open diff with an if statement to switch state?
      - Is it correct that the amount of locking force in clutch LSD depends on amount of input torque? If so, what is the threshold of the input torque to "activate" the diff (start splitting torque)? How can I get the amount of torque bias ratio (in wheelTorque = inputTorque * biasRatio) based on the speed difference or rolling resistance at wheel?
      - Is the speed at the input shaft of the diff always equals to the average speed of 2 wheels ie (left + right) / 2?
      Please help me out with this. I haven't found any topic about this yet on gamedev, and this is my final piece of the puzzle. Thank you guys very very much.
    • By Estra
      Memory Trees is a PC game and Life+Farming simulation game. Harvest Moon and Rune Factory , the game will be quite big. I believe that this will take a long time to finish
      Looking for
      Programmer
      1 experience using Unity/C++
      2 have a portfolio of Programmer
      3 like RPG game ( Rune rune factory / zelda series / FF series )
      4 Have responsibility + Time Management
      and friendly easy working with others Programmer willing to use Skype for communication with team please E-mail me if you're interested
      Split %: Revenue share. We can discuss. Fully Funded servers and contents
      and friendly easy working with others willing to use Skype for communication with team please E-mail me if you're interested
      we can talk more detail in Estherfanworld@gmail.com Don't comment here
      Thank you so much for reading
      More about our game
      Memory Trees : forget me not

      Thank you so much for reading
      Ps.Please make sure that you have unity skill and Have responsibility + Time Management,
      because If not it will waste time not one but both of us
       

  • Advertisement