[DevLog] #02 Object Sorting in Top-Down View [1/2]

[It has been translated from Korean]

Hello! We are Team OOPArts, developing Frostory.

Our game is a top-down view game, a perspective widely used in game development for decades. Therefore, many of the technical issues we faced with the top-down view were unexpected.

The first challenge we encountered was the issue of object sorting. This is a fundamental element to ensure that the game world is correctly represented in a top-down view.

1. Basic Sorting Issue Resolution

We started with the most basic method of sorting by comparing y-values. This means that the larger the y-coordinate of an image, the farther back it is drawn.

This GIF shows how y-value sorting works in the actual game. Even with just y-value sorting, you can see that the overlapping of characters with other objects is naturally handled as they move.

1. Adding the Concept of Height

Introducing the concept of height to the game complicated the situation. In a 2D top-down view game, an increase in height means an increase in the y-axis, which conflicts with the existing sorting logic.

As seen in this GIF, simply sorting by y-values is insufficient when objects with height are added. An object in the air can be drawn behind a foreground object due to its higher y-value.

To solve this issue, we set the sorting axis in the engine to a (0,1,1) vector. This method considers both the y-axis and the z-axis simultaneously.

By decreasing the z-axis value as an object rises, it is drawn 'higher' on the screen as its height increases. This method allowed us to naturally represent objects floating in the air.

1. Sorting Tiles and Objects

The next hurdle was sorting between tiles and objects.

Ultimately, we managed to handle it naturally as shown above, but various attempts were made in the process.

Initially, we were inspired by The Legend of Zelda and tried to handle slopes gently. This method allowed us to avoid the overlapping issue but did not give the terrain feel we wanted.

We also referred to the game Wizard of Legend and tried separating the tile map into multiple layers. This method was simple and efficient but didn't give the desired feel in terms of sorting with 'walls' rather than 'ceilings'.

In the end, we chose to adjust the z-value of the tile's hill parts to ensure the character gets obscured. (The parts within the red/blue/purple/orange borders in the screenshot)

When viewed from a 3D camera, it looks like this.

We thought we had resolved all sorting issues with this method. However, as development progressed, we realized there were significant problems with this approach.

To be continued!