GUI objects seemingly z-ordered at random

[dart_theg]

I am creating simple GUI objects for a simple HUD, but I find that sometimes objects order themselves out of order of creation instead of in the order I created them in, with some appearing on top of ones I created after them. This seems to just happen whenever it wants. Is there a concrete fix to this? I'm on Irrlicht 1.8.5.

[CuteAlien]

Main order is parents drawn before children (so children are on top). And children should be drawn in the order in which they are added (so last one added ends up on top). There are functions like bringToFront/sendToBack to change it, but unless you call those the order of creating is the drawing order. If that is not the case then there is something suspicous going on. I mean you can look at "virtual void draw()" function in IGUIElement.h - it's pretty trivial - just looping over the children.

edit: Maybe you draw custom ui elements? Those need to have IGUIElement::draw(); as last line for this to work

[dart_theg]

Hm. I'm just using the basic Irrlicht elements, I have a button created after I create an Image and sometimes the button appears behind the Image and vice versa.

[CuteAlien]

Please show an example then. I'm pretty certain this is a bug in your code. All Irrlicht does is go over the list in a simple loop. And that list isn't re-ordered anywhere. Edit: Maybe you do set a custom 2d material? In that case you have be careful not to change the ZBuffer, ZWriteEnable flags.

[dart_theg]

Sorry for the late reply.

https://i.imgur.com/0JjfPLg.png

I reset the z buffer, I've tried using a driver material and disable zbuffer and zwrite etc... Still it sometimes gets the order wrong. The GUI graph prints out the creation order but the actual output is wrong. Stache should be behind the other image but sometimes it isn't. The images don't flicker either, once they're in an order they stay put. I haven't had issues when I render it to a quad (as far as I know) but I want it to work with just the raw draw gui call to the screen. Happens on both D3D9 and OpenGL from my testing.

[CuteAlien]

Sorry, but with example I don't mean a screenshot but a code example so I can reproduce it.

[dart_theg]

I fear that because it's part of a bigger engine project (and maybe there's some underlying little issue somewhere else) it's kind of hard to give an example.

I use this to create a GUI Image and return it:
irr::gui::IGUIImage* img = i_gui->addImage(irr::core::recti(0, 0, 64, 64), i_gui->getRootGUIElement());

Rendering the GUI is done here:
bool GUIManager::Render() {
device->getVideoDriver()->clearZBuffer();
guienv->drawAll();

return true;
}

And where the begin/end scene is...
i_driver->beginScene(true, true, irr::video::SColor(bgColor.w, bgColor.x, bgColor.y, bgColor.z));
i_smgr->drawAll();
guiManager->Render();
i_driver->endScene()

I don't have an idea for the problem other than it being some z issue or some render state leak? Again, it doesn't flicker. I've had this issue for forever (even my older Irrlicht projects)

[CuteAlien]

Unless you use as custom 2d material it's not a z issue and you don't have to do any resets. And I've not run into such a problem ever. And Irrlicht doesn't do anything complicated there - it goes over a list from start to end - no re-ordering or anything. Which is why I'm pretty certain the bug is in your code and I can't give you any hints unless I see what you do.

My best guess without knowing more is that you are adding/removing elements and maybe don't realize you are doing that. Reduce your complicated project to a simple example by kicking out everything not related to the bug and you'll likely find it on the way.

[dart_theg]

My best guess is a 2d material issue or something of the like on my end. Because Irrlicht's gui graph says they're in the right order but they sometimes appear out of order. I'll let you know if I find anything.

[CuteAlien]

I just had another idea - maybe they are ordered correctly but because the gui objects have transparency it looks like they are in wrong order? If you have 2 transparent UI objects on top of each other it can be really hard to tell which one is on top. Try what happens if you set transparency very low/off for all gui objects (gui-example in Irrlicht shows how to do that).