Faking depth in 2D

If you've been following the previous tutorials, we now have a simple 2D scene that the Player can move around in. However, you'll quickly find that they often appear beneath some of the background sprites:

Nor do they scale when moving up and down. Both of these issues occur because our Player is not actually moving closer to or further away from the camera, and both of these issues can be fixed with a Sorting Map.

When we were placing down our background sprites, we assigned the Order in Layer of each, in order to control which sprites displayed over others. Sorting Maps let us control the Order in layer of character sprites dynamically, based on their position in the scene.

In the Scene settings section of the Scene Manager, click Create beside Default Sorting map to auto-create and assign a new Sorting map:

The new Default SortingMap object will have been created and placed in the middle of the scene. Looking at it from above, position it so that it appears just above the highest point that the Player can walk to, as seen in the Scene window.

We need to define areas that mark the region our Sorting Map controls. In the Sorting Map Inspector, click Add area to create one.

A new gizmo will appear in the Scene window, which can only be moved in the direction that the SortingMap's object faces. Move it downward a little so that it is in line with the left side of the bench.

When the Player's Z position falls in between these two points, his sprite Order in layer will be set to this SortingMap area's Order field. In the Inspector, you can see that this is set to 1. Remember that our ParkGround sprite's order is -1, and the ParkBench sprite's order is 5. Since 1 falls between these two numbers, the Player sprite will be displayed correctly in this region.

However, when the Player moves down past the bench, he must be displayed on top of it - and so requires an order higher than 5. Create a new SortingMap area in the same way as before, and position it in line with the base of the tree.

Set the Order value of this new area to 7, which is higher than that of the bench, but less than that of the tree, which is 10. Create a final area, and place it beneath the lowest point that the player can reach, and give it an order of 12.

Your exact Positions may be different, but your SortingMap's Inspector should look like this:

If you now run the scene, you should find that the Player is now drawn correctly in relation to other the objects. If you select the character sprite, you can see how it's Order in layer number varies as you navigate the scene.


Not seeing any change? Make sure the Player's sprite child object has a Follow Sorting Map component, and that Follow default Sorting Map? is checked in its Inspector.

We still have the problem of the Player being of a constant size, but this is easy to fix - we can use the areas we've already defined to further control the Player's scale. In the SortingMap Inspector, check Affect Character scale. The various Scale (%) fields can be used to adjust the character's scale at each area's boundary.

For most cases, though, we need only be concerned with the top and bottom boundaries. The Start scale value relates to the character's sprite scale when positioned in line with the top-most gizmo. Set this to a lower value, such as 80. The last area's End scale relates to the character's sprite scale when positioned in line with the bottom-most. Set this to a higher value, such as 120.

We can set the other scale values automatically by clicking the Interpolate in-between scales button.

Re-running the scene should then see the Player resize as he moves along the Z-axis - making it appear like he is moving further from and closer to the camera.

Next, we'll improve the camera by making it follow the Player as they move.