isometric scrolling, (z axis)
Author
Hi dudes,
Ive been developping a map server, and two isometric clients for it. the first is an openGL client which is still very alpha, and the second is a DHTML engine.
The code which works out the right x-y coordinates from the map''s x-y and z coordinates works like a charm,
But since the browser can''t handle any reasonably large map size because of the amount of layers (3800), i need to trim down this amount.
I can offcource do this by destroying any non-vissible tiles, and by doing this i will make the map smaller to lets say 20x30 tiles.
This isn;t a problem either, the problem is when you need to scroll to a different piece of the map, this piece of the map has not been loaded from the server yet (or has been destroyed) and i don''t know which tiles i need to fetch from the server to fill up the scrolled area.
Since my map uses a Z axis, my tiles can be very unpredictable,if the user scrolls to the left or right, i can simply add all the tiles needed to fill the left or right gap plus and minus 10 to allow for the z axis the be taken care of asswell.
But when i scroll up or down i might, or might not need to fetch an whole list of tiles to fill up the screen.
Since guessing isn''t going to be good enough, i need a better way.
look at the following url for the current map;
http://pc-gamers.com/webgame/iso_js.php
(AND NO, YOUR BROWSER ISN''T CRASHING!!!, ITS JUST SLOW!)
like it?
All of the tiles you see are generated and flatshaded by php!
That''s amazing, and scary.
As for your problem, perhaps you can do some server-side precalculation?
Like split your map(screenwise) into 10x10 blocks, and tell the client something like:
Block 1: Tiles 0,0 through 20,20 visible
Block 2: Tiles 20,0 through 40,20 visible
Where each block isn''t in map coords, but screen coords.
As for your problem, perhaps you can do some server-side precalculation?
Like split your map(screenwise) into 10x10 blocks, and tell the client something like:
Block 1: Tiles 0,0 through 20,20 visible
Block 2: Tiles 20,0 through 40,20 visible
Where each block isn''t in map coords, but screen coords.
I agree. Amazing and scary.
I get gray borders around every tile, using latest ver. of Mozilla. I''m presuming a bug in your transparency?
Also, does the map have to contain every vertical tile beneath the ground? Perhaps just the ones on the near-to-camera edges, and down to the first opaque ones under the apparently translucent (wicked!) water?
I get gray borders around every tile, using latest ver. of Mozilla. I''m presuming a bug in your transparency?
Also, does the map have to contain every vertical tile beneath the ground? Perhaps just the ones on the near-to-camera edges, and down to the first opaque ones under the apparently translucent (wicked!) water?
the water is nice isn''it?
Im using the transparancy css modifier for the translucency, using 3 layers of water will then give me the effect of deeper and shallower water i like, (my goal was to have nicer water than the tropical levels in Rollercoastertycoon2)
What do you mean about every vertical tile?
And could you show me a screenshot of the grey borders?
Maybe there''s a bug, but im using moz 1.7 and firefox 0.8 (on linux) to look at it, but im not seeing any grey borders.
The map which should be loaded in the browser should only contain the tiles actually visible on screen. This way i would not have any extra load on the browser.
As soon as the user scrolls (i build a very nice dhtml scroller for the entire map) it would go and fetch the tiles which would show up in the browser. This way i could reduce stress on the browser.
Caching of the map could be done by using .js files of parts of the map which would be stored in browser cache.
The idea of generating quadrants which hold 100 tiles or something is interesting, although this also implies i would still be sending quit large maps the browser to play with.
ps, if anyone is interested (and knows his php) i am looking for someone to build a tree rederer (using an l-systems algorithm) which would allow us to generate hundreds of nice tree''s from only a limited amount of input files.
Im using the transparancy css modifier for the translucency, using 3 layers of water will then give me the effect of deeper and shallower water i like, (my goal was to have nicer water than the tropical levels in Rollercoastertycoon2)
What do you mean about every vertical tile?
And could you show me a screenshot of the grey borders?
Maybe there''s a bug, but im using moz 1.7 and firefox 0.8 (on linux) to look at it, but im not seeing any grey borders.
The map which should be loaded in the browser should only contain the tiles actually visible on screen. This way i would not have any extra load on the browser.
As soon as the user scrolls (i build a very nice dhtml scroller for the entire map) it would go and fetch the tiles which would show up in the browser. This way i could reduce stress on the browser.
Caching of the map could be done by using .js files of parts of the map which would be stored in browser cache.
The idea of generating quadrants which hold 100 tiles or something is interesting, although this also implies i would still be sending quit large maps the browser to play with.
ps, if anyone is interested (and knows his php) i am looking for someone to build a tree rederer (using an l-systems algorithm) which would allow us to generate hundreds of nice tree''s from only a limited amount of input files.
Okay, I''m not getting the grey borders anymore. Must''ve been a wierd one-time bug.
Anyways, but "every vertical tile" I meant the ones below ground-level. If you look at the bottom edges of your map, you can see not just the surface-level tiles, but a really tall stack of tiles "underground" of them. I''m wondering if you really need these?
Also, on the number of layers you need... don''t you really only need at most one per elevation per screen-space-horizontal row of tiles? And then just don''t send empty layers to the browser?
If you have a 4 by 4 tile diamond like this...
... you just need one layer per scanline (each number here) per elevation. You know that no two tiles in a given layer are going to overlap, unless your tiles extend horizontally out the sides. And you can place objects in their own individual layers overtop the tile-layer they are on and beneath the tile-layers below.
I presume you''re using, at the moment, one layer per tile. This technique would cut your layers down by at least 50%, more likely 75%, by my somewhat-educated guess.
Anyways, but "every vertical tile" I meant the ones below ground-level. If you look at the bottom edges of your map, you can see not just the surface-level tiles, but a really tall stack of tiles "underground" of them. I''m wondering if you really need these?
Also, on the number of layers you need... don''t you really only need at most one per elevation per screen-space-horizontal row of tiles? And then just don''t send empty layers to the browser?
If you have a 4 by 4 tile diamond like this...
1 2 2 3 3 3 4 4 4 4 5 5 5 6 6 7 ... you just need one layer per scanline (each number here) per elevation. You know that no two tiles in a given layer are going to overlap, unless your tiles extend horizontally out the sides. And you can place objects in their own individual layers overtop the tile-layer they are on and beneath the tile-layers below.
I presume you''re using, at the moment, one layer per tile. This technique would cut your layers down by at least 50%, more likely 75%, by my somewhat-educated guess.
Author
I could use one layer for a whole scanline of tiles if i had tiles which would sit next to each other, but as you can see most of them have an elevevation which lifts them out of the scanline.
I will see if i can use larger grouped layers for small parts though.
As for the underground tiles, no i don't need them
As soon as the scrollling works i just cut of the screen with a nice gui or something, i just wanted to see i could create the fillup games like simcity use.
I do need the tiles you see in there, to fill up any gaps in them map, This map was generated from a greyscale png, and them smoothed, so this map doesn't have any gaps.
ps, could an admin combine my two accounts?
I noticed i still had an account when i accidentaly logged in with killercow and the same password.
[edited by - janklopper on June 1, 2004 3:30:08 AM]
I will see if i can use larger grouped layers for small parts though.
As for the underground tiles, no i don't need them
As soon as the scrollling works i just cut of the screen with a nice gui or something, i just wanted to see i could create the fillup games like simcity use.
I do need the tiles you see in there, to fill up any gaps in them map, This map was generated from a greyscale png, and them smoothed, so this map doesn't have any gaps.
ps, could an admin combine my two accounts?
I noticed i still had an account when i accidentaly logged in with killercow and the same password.
[edited by - janklopper on June 1, 2004 3:30:08 AM]
Wait, what am I smoking?
Each screen-horizontal line of tiles never overlap. Even where they are at different altitudes from one tile to the next. Right? So there, no need for more than 1 layer per scanline.
Assuming X and Y are down the right and left sides of your diamond, respectively, you can determine which layer to insert a tile into by L = X+Y. And again, unless you have terrain tiles which stick out horizontally beyond the diamond''s side corners, you won''t have problems. Objects still go in layer X+Y+0.5, or however you need to implement it.
Each screen-horizontal line of tiles never overlap. Even where they are at different altitudes from one tile to the next. Right? So there, no need for more than 1 layer per scanline.
Assuming X and Y are down the right and left sides of your diamond, respectively, you can determine which layer to insert a tile into by L = X+Y. And again, unless you have terrain tiles which stick out horizontally beyond the diamond''s side corners, you won''t have problems. Objects still go in layer X+Y+0.5, or however you need to implement it.
Just realized what you mean by "gaps". You mean cliffs, where there is no smooth gradation of height, but a solid cliff face instead. Like SimCity2000. Had I been thinking, I''d have figured that out.
In which case, I suggest only placing those in a layer (X+Y-0.5), and only placing them in where needed. You only really need them where the X+1 or Y+1 tiles don''t have a side matching the current tile''s surface height, so it''s not a difficult check.
Hope this helps!
In which case, I suggest only placing those in a layer (X+Y-0.5), and only placing them in where needed. You only really need them where the X+1 or Y+1 tiles don''t have a side matching the current tile''s surface height, so it''s not a difficult check.
Hope this helps!
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement