Depth problem in Multi-tile Sized Objects in Isometric Engine

[alikapadia]

Hi,

Introduction:

Im developing an isometric map builder. This will allow users to make their own isometric envioenments. This is how i have done this, I have 3 layers. The bottom one has a movie clip 'grid ' that gets populated with tiles, starting from top left to bottom right, with every next tile having the next higher depth starting from 0. Above the grid layer, I have the 'floorTiling' movie clip. Whenever a user clicks on a grid tile with floor tiling selected, a tile is placed in the 'floorTiling' clip with the same x,y cordinates as that of the tile clicked in the grid, AND the same depth. Similarly, on the layer above this, I have a movie clip that will contain furniture and pillars, when you select a furniture or pillar, it gets placed in this movie clip named 'placedObjects' (with the same x,y and depth value as that of the grid)

Now according to the above, every next tile/object placed in the map (right or first in the next line) has the Depth value above the previous one. This is done so that every single tile object placed shows in the right way, i-e the front ones higher depth value as the behind ones.

<1><2><3><4>
  <5><6><7><8>

The Problem

Everything works fine as long as my object width are within the tile width. If they have a high height, even that looks all fine. Now the problem arises that when in the 'placedObjects' clip, when I place a Table, which is suppose to take up space higher than 1 tile (6 in this case - 2x3) It shows like this. I am placing the table at a lowest depth or highest depth it may occupy (by simply shift the center of the movie clip to upper or lower area of the table), in both cases, i get this problem.




As you can see, this is because the depth value the table is getting too high or too low to fit in properly. Im kinda stuck, anyone got any tips on how to get this right. If you've got any other questions, feel free to ask.

There are only 2 solutions i can think of, both seem kinda troubling.
1 - Break the table into 6 different tiles (very messy if i wanna go into low quality mode) n place these tiles on different depths according to the grid.
2 - Mess up my depth chart n swap depths with the maximum/minimum depth that can mess with my table.

Any comments, tips, techniques... anything?

[tonypa]

Its theorethically impossible to make it work using the tiles and depths like you have set it up.

Only way you could do such things would be using completely different system. I have examples here:
http://www.flashkit.com/board/showthread.php?t=667296
Basically for each object you create mask which contains every object with x and y bigger or equal then current object has. Those x and y are not from iso view, but before you place it them on screen. There is no depth sorting whatsoever because the masking creates illusion of objects covering each other.

[The Helmsman]

Try to divide your table to pieces

[alikapadia]

Its theorethically impossible to make it work using the tiles and depths like you have set it up.

then what kind of depth setup will work? I saw the link you provided Tonypa, the bitmapdata technique is very interesting but this seems to be a new feature in Flash 8. How have others been able to pull off a completely functional isometric engine that supports proper depth management of multi-tiled objects? the solution must be in the correction of my depth sorting setup. Can anyone help me plz, to get this done without bitmapdata, the old fashion way?

[tonypa]

How have others been able to pull off a completely functional isometric engine that supports proper depth management of multi-tiled objects?

Show me an example. I believe its not possible until I see it has been done.

[mr_malee]

I've never worked with iso tiles before, but with normal tiles can't you grab the width and height of the tile and modify the swapDepths with these values.

i can't remember how but something like this i think

depth = ((_x*_y)+(_width+_height)*1000)

whats your swapDepths code look like at the moment?

[alikapadia]

one example is http://www.dofus.com, then there is http://www.dubit.co.uk The one with the most examples is http://www.*****hotel.com , however this one is not flash based (director) but i think the logic it uses can be applied in flash too, since its all about depths with the rule given that each object will have a unique depth value.

[LittleRed]

my engine supports multi-tiled objects. It's primarily based on the actual screen coordinates. (I use a function to return the depth based on the ._y position of the graphic multiplied by the maximum ._x value and then adding the tile's ._x value, this gives every position a unique depth value). Since every tile has its furthest left point at the 0,0 point in the containing clip, then even if the shape extends beyond a tile, it's still depth sorted correctly.

[jobemjobem]

Hi alikapadia,

I've encountered this issue before as well. While I think that there is an algorithm to be figured out for a graceful solution, that is not how I handled it. I encountered this issue when creating battleship in an isometric space. The final solution was to dice up all objects that are bigger than 1 tile, into multiple objects. So a ship that takes up 4 spaces, is actually four movie clips. It looks the same when tiled together, but gives you ability to sort part of it using the isometric sorting algorithm found in my book.

Good luck!

[alikapadia]

hey thanks

hmm i see, so nobody has ever been able to pull this thing off within an isometric engine without breaking the object apart. i was trying to avoid breaking my multi-tiled object because I intend to provide a 'low quality' mode and a zoom in out tool in my final application which can result in little space distortion between the sub-objects, causing it to look broken. any tips on how to avoid this? does working with GIF images instead of vectors help in reducing this distortion?

LittleRed, can u please share some code example for the execution of ur depth sorting that also supports automatic proper placement of multi-tiled objects? it would be very helpful

anyone got any other ideas abt efficient depth sorting technique for such a scenario?

[LittleRed]

the functions I use are these:

code:

---

function calculatedepth(tilecoordx:Number, tilecoordy:Number) {

	// calculates depth for tiles according to position on map

	var tiledepth:Number = (tilecoordx*(maplengthy))+(((maplengthy)-tilecoordy));

	return Math.floor(tiledepth);

}

function calculateobjectdepth(objcoordx:Number, objcoordy:Number) {

	// calculates depth for hero, NPCS, objects etc according to _y position

	// 720 is the largest objcoordy value that can be passed, this will affect the 721, and 720 values:

	var objectdepth:Number = (((objcoordx+2*objcoordy)/2)*721)+((720-((objcoordx-2*objcoordy)/2))*720)+tilemaxdepth;

	// the ...*720) gives a heavier weight to the _y

	return Math.floor(objectdepth);

}

---

all 'floor' tiles (ie. pavement and grass etc) are placed using calculatedepth so that they are always underneath. I pass the grid position of the tile to this function. maplengthx and maplengthy are the lengths of the current map in the 2 directions.
Any structures or NPCs are placed using calculateobjectdepth. I pass in the x and y coordinates of whichever object I'm placing or moving and then swapDepth that object with the returned result.
As I said, all of my graphics have the centres at the furthest left point of their base:


hope this helps - it has been working very reliably for me.

[LeechmasterB]

Hey i did not read through all posts and everything but may be, may be this problem is similar to one of my problems:

http://www.flashkit.com/board/showthread.php?t=667117

The difference is that you only might have a quarter of my problem .
Lets say if you could define the very top right corner as the most behind and then all tiles are rising in depth towards the lower left corner and same low depth level alon the higher and lower edge.

Dunno... may be if so it can pobably be solved.

Edit: I think i had a solution in a test file if that can solve it. From what it looks like that might just be the case. So you d have to space the tiles by a couple of depths apart and place the objects within these depth ranges. So that they can be betwen higher tiles and on same level tiles.

[tonypa]

all 'floor' tiles (ie. pavement and grass etc) are placed using calculatedepth so that they are always underneath. I pass the grid position of the tile to this function. maplengthx and maplengthy are the lengths of the current map in the 2 directions.
Any structures or NPCs are placed using calculateobjectdepth. I pass in the x and y coordinates of whichever object I'm placing or moving and then swapDepth that object with the returned result.
As I said, all of my graphics have the centres at the furthest left point of their base:

No, doesnt look right to me:

the red block is 1 single object, but it covers the wall tiles right which should all cover it like the first one. The red block is placed on its leftmost tile.

if(t.walkable){
	t.depth=calculatedepth(xt, yt);
}else{
	t.depth=calculateobjectdepth(xt*tileW, yt*tileW);
}
function calculatedepth(tilecoordx, tilecoordy) {
	maplengthy=6;
	var tiledepth = (tilecoordx*(maplengthy))+(((maplengthy)-tilecoordy));
	return Math.floor(tiledepth);
}
function calculateobjectdepth(objcoordx, objcoordy) {
	tilemaxdepth=100;
	var objectdepth = (((objcoordx+2*objcoordy)/2)*721)+((720-((objcoordx-2*objcoordy)/2))*720)+tilemaxdepth;
	return Math.floor(objectdepth);
}

[tonypa]

one example is http://www.dofus.com, then there is http://www.dubit.co.uk The one with the most examples is http://www.*****hotel.com , however this one is not flash based (director) but i think the logic it uses can be applied in flash too, since its all about depths with the rule given that each object will have a unique depth value.

What makes you think they dont use masks or break down the objects onto single tile? For example dofus, as far I can see, uses masks for all big objects like houses and everything else is on single tile.

[LittleRed]

tonypa - hmm, you could well have spotted an error there. to be honest, I'd only briefly tried using wider-than-tile graphics and it seemed to have worked.
I'll try and re-create your example in my engine over the weekend and see if I can work it out...

[LittleRed]

tonypa - yup, you're absolutely right. my engine *doesn't* support multi-tiled objects.


sorry about saying it could - I thought I'd tested it and it worked in the past...