Depth sorting of elements drawn on the screen

Question

I have small program here in which I am drawing some elements on the window.

class CustomPointer{
void draw(); //draw png image on the screen
};

class CustomRectangle{
void draw(){
drawRect(); //draw Rectangle with a certain color
drawbtnImage(); //draw png image to the top right of rectangle (alphaBlending enabled)
}
};

main.cpp

CustomRectangle customRectangle;
CustomPointer customPointer;

void draw(){
drawBackgroundImage();
customRectangle.draw();
customPointer.draw();
}

When I draw my elements using the above code, I was expecting the customPointer to be drawn over all other elements on the screen since pointer is being drawn everything else. But my pointer is appearing over the background but goes behind the customRectangle/btnImage.

How do I get my customPointer to actually always remain over all other elements on the window?
Additionally, I was also expecting my btnImage.draw() to be drawn over the custom shape (like a circular button at the top right of a control). The btnImage is a png and has some transparency on its sides. However, instead of appearing over the rectangle, it is appearing behind it. Similar issue to fix. Any suggestions?

I'm not seeing any OpenGL code here, you should probably show us that. It's likely to be how you have set up your depth buffer, and/or how you actually draw things. — JasonD

fen fen · Accepted Answer · 2013-01-30T07:14:52

I think you should some Z-Sorting zalgorithm for 2D space. Every object should have its own Z value (it can be an integer) and in global Draw method you sort using this Z order.

For top most rectangles you can set Z to some large value so that it will be always first/last .

This will also help when using transparency.

void drawAll() {
    sort_by_z_order();
    foreach rect in sorted_rect_list {
        draw_rect(rect)
    }
}

Depth sorting of elements drawn on the screen

2 Answers