• 2D

  • Sprites behind and in front of objects

Hi, i am developing a game with friends and we have a situation that we don't exactly know how to deal with it.

When you have a character sprite walking in front or behind some object, say a tree, how do you make it possible that the sprite can appear in front and also behind basically the same pixles? This seems to be happening in other 2D games. So far we just tried to restrict character movement to only be able to walk in front or behind certain pixles. (Like in front of the lower part of a tree and behind the upper part of a tree) When adding shadows, this problem occured where the shadow reached the lower part of the tree that was in a layer behind the character. Now instead of reducing the character height or restricting movement even further, we would like to learn how to simply make it possible for a character to exist in front and behind the same pixles.

![](<img src="https://i.ibb.co/WBXvscz/Inkedhh-LI.jpg" alt="Inkedhh-LI" border="0"> "")

Sprites, and in fact all 2d nodes have z_index property which determines their draw order. Nodes with larger z_index are drawn over those with smaller z_index.

You can use this property when building a map to set apparent depth of each graphical element. When player sprite walks up-down you can then dynamically adjust its z_index based on vertical position. That way it'd appear the player went from "in front" to "behind" of something, or vice versa.

You just need to cleverly organize z_index values of your map elements and switch player's z_index value at appropriate times.

Yes, the z_index is key to this. You can have it do it automatically (y sort) which works well for most stuff, but not everything. In the example you give, you probably want the tree truck and the tree branches/leaves to be 2 different sprites. Otherwise there would be no way for the character to be in front of the truck, but behind the leaves.

@cybereality said: In the example you give, you probably want the tree truck and the tree branches/leaves to be 2 different sprites. Otherwise there would be no way for the character to be in front of the truck, but behind the leaves.

i mean that would be even more advanced than what we have planned but good idea :D

we will play around with it, thx.

17 days later

@cybereality said: Yes, the z_index is key to this. You can have it do it automatically (y sort) which works well for most stuff,

we have tried that now but we would like to swap the origin to the bottom of tiles (obviously because most things are standing on the ground) but it doesnt seem to work and it keeps using the top left position to determine the Z position

this might sound dumb but .. for the tree would it work better if you separated the trunk and the top of the tree? Then you could be under the brush (leaves) and in front of the bark. You could also then match different trunks to different tops. Can you believe my grandpa was a forester and I can't find the vocab to explain my tree thoughts.

I was pretty sure that was the Tile Origin property but it looks like you have it correct.

5 days later

@cybereality said: I was pretty sure that was the Tile Origin property but it looks like you have it correct.

but isn't there a possibility to have the origin of the tile at the bottom line and not on top? the way it's handled in here is not working for most objects this setting on the right is obviously not working

Yes, that is how it's supposed to work but maybe there is something else you have to change, or some bug somewhere.