Top-down 2/2.5D template with sorting objects by depth

[discoeater]

Defold top-down template

Top-down game template using rendercam and kenney.

Browser demo

• [x] Collisions
• [x] 2/2.5D camera view
• [x] Overlapping sprites depending on the pivot

2D	2.5D

Camera modes

To switch the camera view (orthogonal and perspective), enable the desired script on the main scene of the player’s game object.

Rotation of objects towards the camera is carried out using a script (enabled only if a perspective camera is used). The launch command is given from the camera’s script, the rotation angle is taken from the rotation of the parent game object (player).

Sorting objects on the screen

Sorting of objects is carried out due to the rotation of the parent object of the camera along the x-axis. In orthogonal mode, it will be enough to set a small value, for example 0.001, or not change it at all. This does not affect the final look of the game.

GitHub - abbdulbinladen/topdown: Top-down 2d template for the Defold game engine

[britzl]

Nice! Thank you for sharing.

[Haath]

I would like some help if you can!
Looking through your project, I cannot understand how you are making the objects appropriately appear in front of or behind each other when using an orthographic projection.

So far my understanding was that it is necessary in this projection to update the z position of each object according to its y position (for example). But in your project I cannot see you doing that anywhere.

This y → z approach has been causing me some performance headaches, so I’m very intrigued to know if there’s a better alternative I’ve been missing out on

[discoeater]

All the magic lies in the rotation of the camera object. To be honest, I don’t know how bad or good this method is, but so far I haven’t found a way to do it better.

I’ve been experimenting with the perspective camera and found that turning it changes the order in which the sprites are rendered. It turns out that this also affects the orthographic camera. At the same time, the orthogonal view shows the same picture at any x-axis rotation angles, only black bars are added at the top and bottom when set to large values ​​(in the example project above, this starts at 0.3-0.4).
Maybe someone here can explain this mechanism better than me.

This trick also works with Orthographic

[Haath]

This is pretty interesting, and it does make some sense.

With two sprites on the same canvas (z-level), the lower one would be closer depth-wise to the camera with this slight rotation.

---

Now the trick I guess is to keep this rotation big enough that it is never “lost” to floating point arithmetic, but also small enough that it doesn’t cause any visual issues like what you described.