Z-Order problem while displaying isometric tiles

Question

I have a little problem while displaying isometric tiles in my school game. The fact is that I suppose everything is ok with my code...

Here is how it's organised:

• architecture: MVC + ECS
• everything is displayed in my render method of the GameView class
• I use bases and vetors to make conversions between the two bases (orthogonal one and isometric one)

Here is the code:

public void render() {
    try {
        final Entity[] entities = this.controller.getEntities();

        // Sort entities by isometric depth
        Arrays.sort(entities, (e1, e2) -> {
            PositionComponent p1 = e1.getComponent(PositionComponent.class);
            PositionComponent p2 = e2.getComponent(PositionComponent.class);

            // Calculate depth as the sum of cartesian x + y
            double depth1 = p1.getX() + p1.getY();
            double depth2 = p2.getX() + p2.getY();

            // Primary sorting criterion: depth
            int result = Double.compare(depth1, depth2);

            // Secondary sorting: cartesian Y coordinate
            if (result == 0) {
                result = Double.compare(p1.getY(), p2.getY());
            }

            // Tertiary sorting: cartesian X coordinate
            if (result == 0) {
                result = Double.compare(p1.getX(), p2.getX());
            }

            // Fallback sorting: hashCode
            if (result == 0) {
                result = Integer.compare(e1.hashCode(), e2.hashCode());
            }

            return result;
        });

        for (Entity entity : entities) {
            // Get position component
            PositionComponent position = entity.getComponent(PositionComponent.class);

            // Convert to isometric coordinates
            Vector isoPos = this.gameBase.mulByVect(
                new Vector2D(position.getX(), position.getY())
            );

            // Debug: print isometric position
            // System.out.println("Isometric Position: " + isoPos);

            // Get texture component
            ImageIcon image = entity.getComponent(TextureComponent.class).getTexture();

            // Create label for the entity
            JLabel label = new JLabel(image);

            // Set bounds based on isometric position
            label.setBounds(
                (int) isoPos.getEntry(0),
                (int) isoPos.getEntry(1),
                image.getIconWidth(),
                image.getIconHeight()
            );

            this.panel.add(label);
        }

        // Revalidate and repaint after adding all entities
        this.panel.revalidate();
        this.panel.repaint();

    } catch (Exception e) {
        e.printStackTrace();
    }
}

However, the tiles are not displaying well. In fact the farthest one are displayed after the closest so it seems flipped...

Do you have any idea ?

Of course if needed, feel free to ask as many questions as you want!

Thanks a lot!

---

EDIT: It works !!!

Well, there was 2 problems, the first one was the continuous display of my tiles displaying them one over the other one, so even if the sort was working, the farthest tiles were displayed on the closest... Second, the sort wasn't working, so I just sort by Y then by X.

And here it is !!!

public void render() {
    try {
        final Entity[] entities = this.controller.getEntities();

        // Sort entities by isometric depth
        Arrays.sort(entities, (e1, e2) -> {
            PositionComponent p1 = e1.getComponent(PositionComponent.class);
            PositionComponent p2 = e2.getComponent(PositionComponent.class);

            int result = -Double.compare(p1.getY(), p2.getY());

            if (result == 0) {
                result = -Double.compare(p1.getX(), p2.getX());
            }

            // Fallback sorting: hashCode
            if (result == 0) {
                result = Integer.compare(e1.hashCode(), e2.hashCode());
            }

            return result;
        });

        this.panel.removeAll();

        for (int i = 0; i < entities.length; i++) {
            Entity entity = entities[i];

            // Get position component
            PositionComponent position = entity.getComponent(PositionComponent.class);

            // Convert to isometric coordinates
            Vector isoPos = this.gameBase.mulByVect(
                new Vector2D(position.getX(), position.getY())
            );
            
            // Get texture component
            ImageIcon image = entity.getComponent(TextureComponent.class).getTexture();

            // Create label for the entity
            JLabel label = new JLabel(image);

            // Set bounds based on isometric position
            label.setBounds(
                (int) isoPos.getEntry(0),
                (int) isoPos.getEntry(1),
                image.getIconWidth(),
                image.getIconHeight()
            );

            this.panel.add(label);
        }

        // Revalidate and repaint after adding all entities
        this.panel.revalidate();
        this.panel.repaint();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Answer 1

The issue you're facing is likely caused by how you're calculating and comparing the depth of your entities for sorting. Since you're working with isometric tiles, the rendering order should ensure that tiles closer to the screen (or bottom-right) are drawn after tiles farther away (or top-left).

In your current code, you calculate the depth as the sum of Cartesian x+yx+y, but this might not correctly capture the isometric depth ordering for rendering purposes. This depth can be calculated as depth =p1.getY()−p1.getX() depth =p1.getY()−p1.getX(), assuming your isometric transformation aligns with this logic.

// Sort entities by isometric depth
Arrays.sort(entities, (e1, e2) -> {
    PositionComponent p1 = e1.getComponent(PositionComponent.class);
    PositionComponent p2 = e2.getComponent(PositionComponent.class);

    // Calculate depth based on isometric Y-X
    double depth1 = p1.getY() - p1.getX();
    double depth2 = p2.getY() - p2.getX();

    // Primary sorting criterion: depth
    int result = Double.compare(depth1, depth2);

    // Secondary sorting: cartesian Y coordinate
    if (result == 0) {
        result = Double.compare(p1.getY(), p2.getY());
    }

    // Tertiary sorting: cartesian X coordinate
    if (result == 0) {
        result = Double.compare(p1.getX(), p2.getX());
    }

    // Fallback sorting: hashCode
    if (result == 0) {
        result = Integer.compare(e1.hashCode(), e2.hashCode());
    }

    return result;
});

Answer 2

I completly agree on what you wrote me. However, the sorting method is still not working and the display still seems flipped...

Here is the result:

If you need any details on the coordinates or the base, feel free to ask!

---

You said that the calculus has to correspond to my transformation. I don't know how to check that, here is the base:

this.gameBase = new Base2D(
    new Vector2D(1.0 * 64 / 2, 0.5 * 64 / 2),
    new Vector2D(-1.0 * 64 / 2, 0.5 * 64 / 2)
);