creating 2.5d objects in tiled?

Extended
1

Basically, I want to learn how to make a character walk around a map object like this:
https://hathor.tinytake.com/sf/NjQ5MzU0XzMxNDc3MjI

I want to use Tiled to make the map.

I just want to know how to do collusion detection so that I don’t walk through the tree, and how to have the character show up in front of the tree when in front of it and behind the tree when behind it.

Here is what I have so far:
https://hathor.tinytake.com/sf/NjQ5Mzc5XzMxNDc4MTE

Once I figure out how to do this I’m happy to contribute an official Extended Demo.

It looks like in Stardew they have the tIDE maps with different layers for “back”, “buildings”, “front” and “paths”:

https://hathor.tinytake.com/sf/NjQ5Mzg0XzMxNDc4OTY
https://hathor.tinytake.com/sf/NjQ5Mzg1XzMxNDc4OTc
https://hathor.tinytake.com/sf/NjQ5Mzg2XzMxNDc4OTg
https://hathor.tinytake.com/sf/NjQ5Mzg3XzMxNDc4OTk

I’m guessing that they’re doing some kind of collusion detection and z-ordering based on the map layer?

2

I’ve previously used a seperate (invisible) layer to mark how drawing and collision should be handled. Added benefit is that you can easily draw out the layer for debugging purposes. Or you could use such a layer just for collision and for drawing sort your sprites based on y-coordinate (assuming their origin is at the bottom of the sprites).

I’m guessing the paths layer in Stardew is a marker layer like that too, but I can’t make out from the screenshots what it’s for (sounds like collision detection or maybe warping to other areas?). If you do it like Stardew it makes sense to just draw the layers in the right order (back -> buildings -> players/npc’s -> front) and use the buildings layer or a marker layer to see where the player can/can’t walk. You don’t have to do the sorting then.

3

This is an interesting problem. It will probably require changes to the renderer because currently you can only render your own sprites between layers, not the specific order of the tiles.

I think what we’d need to do is provide a way to customize the rendering so that your own rendering code can be injected in somehow. There’s a number of different ways to do this. It’ll require some more thought.

4

As long as your camera is not going to be spinning around.

Then think of this like the z ordering but in reality since its 2d
then by your example video your doing Y ordering.

With Z ordered drawing, its the farthest object, which is drawn first, then closer objects are drawn over things occluding them, (though maybe in 3d there is a little more to it nowday’s) its a sufficient way to say it. With your example video and doing Y ordering, then things at the top of your screen are drawn first then things below them are drawn next occluding them. That will give you the proper drawing order to give the illusion of depth.

This may get a bit long winded but its sort of necessary to be clear so ill sort of repeat this idea.

For that to work out correctly, you will need specify a collision height for each object that will match up well with each other to avoid any problems. This is not only used to prevent the player from moving onto a area were a object obviously would not let him or her, but for defining what is above or below each other which will determine which is drawn first then next.

The one place were all things are occluded is the ground, to say the feet of a player cant be inside a trunk of a tree nor can there really be grass, if the feet are behind it in 3d, they are also above that point on your screens Y position so the player will be drawn then the tree drawn over the player. If the players feet are below the trunk of the tree then the tree trunk collision area is above the player and reverse occurs and it looks proper.

I would choose the feet of the player were his shadow lays on the ground.
Were the tree meets the ground, i would make a square there to define were the trees collision area is, and for each object including the player, you need a collision map that lines up with your tile map. When you place things onto tiles each object like a tree though it is tall, in this case only needs to mark the part that touches the ground as occupied.
The drawing order is based on that tile wise from top to bottom which gives the appearance of depth.

Im not familiar with the tile map extended however tile maps are extremely easy to roll yourself.
As well maybe he can add this it for you as part of it, as it naturally goes with a tile map anyways.
This all based on the principal of the “Painters Algorithm” which in this case has no or only edge case overlapping problems, so its fine to use it as a example to understand things.

If its not clear ill draw a quick picture or maybe toss up some simple code if you would like.

5

@SoundGoddess

So there are two problems it sounds like you are trying to solve:

  1. Collision Detection
  2. Render Order of Sprites

For number 2, you could have a Y value, a horizontal line, for each object that specifies when the object in question should “flip” render order relative to the player. Then it’s a simple process of sorting the objects for rendering by the player’s Y position and and objects “flipping” Y values.

6

I did some of 2d tilemap stuff a while back with overlapping scaling blended hex tile mapping. Im not sure what i have is fit to post without a tutorial in itself just to explain it, I can post up a simple spacial collision rectangle class that is basically a collision map but that might take a little explaining too, anyways.

The map should just be drawn from top to bottom and things added or moved around the map according to there collision position the tiled map determines drawing order typically but it also should be adjusted to specify a objects primary drawing tile position to say a tree the size of 9 blocks in this approach as far as the tile map is concerned has a positional rectangle of the size of a single tile maybe 50 x 50 that is tile 5,5 say, the image itself might be 150 by 150 pixels in size and that extends upwards when drawn we might have grass above that which doesn’t cause collision as well as the upper area of the tree that is drawn that causes no collision…

While the actual bottom of the drawing position lines up to bottom of the collision position, were we are ensuring the bottom of the destination rectangle matches the collision rectangles bottom
To say for the drawing of the object itself. The drawing vector aligns to the collision position - the images height so that its y + its height will line up to the actual drawing position regardless of its size, that can also occlude previously drawn objects above it.
We would use that collision area as well to disallow the player from moving into that tile.

However this is just one approach there are a couple of different ways you could do this equally valid and with different implications for what is required to be done.

Here is a nice pic if you look on the bottom right to get the idea, the blue highlighted area is the collision area. As would be around a players feet in the same way.
There is probably a thousand concept demos of this on the web i just lift it off one of them.
He allows one object to fill multiple map grids as collision areas and draws to multiple more as non collision areas though this is more computationally expensive it coveys the same basic idea, he may even be drawing more then once to the same tile for the ground then a object.

firstmap3.png1102×755 376 KB

If you do this in 3d with just images on squares the technique is known as billboarding.

1 Like
7

Thanks for pointing me in the right direction…I have some company coming in from out of town tomorrow so I won’t be able to play with the code much for a few days but I am very interested in rolling my own open source Link To The Past / Stardew Valley type engine.