[SOLVED] How to change rendering order in guiNode

Troubleshooting gui
1

Dear all,

The question is in the title: How to change the rendering order in the guiNode?
To be more specific and give an example, imagine having 2 images on the guiNode. image1 is attached first and image2 is attached after. JME will render both images with image2 covering the image1 if there are on collision. But what if, after a certain action, I want to change that order and have the image1 overlapping the image2?

I could detach all and the reattached all childs taking note of there position in the node index but this seems to be complicated when the hub will be displayed with many text and images.

I also found this topic but it is related to Nifty and the only answer not Nifly related mentionned a “UIElement” that I could not found in the javadoc…

Many thanks in advance for your help.

2

GUI is sorted by z value… like every other GUI.

3

From the Wiki:

Positioning HUD Elements

  • When positioning GUI text and images in 2D, the bottom left corner of the screen is (0f,0f), and the top right corner is at (settings.getWidth(),settings.getHeight()).
  • If you have several 2D elements in the GUI bucket that overlap, define their depth order by specifying a Z value. For example use pic.move(x, y, -1) to move the picture to the background, or hudText.setLocalTranslation(x,y,1) to move text to the foreground.
  • Size and length values in the orthogonal render queue are treated like pixels. A 20*20-wu big quad is rendered 20 pixels wide.
2 Likes
4

Thanks.
Because I read on this topic that z value did not worked, I did not try it… But indeed, it is the solution.
I should have read the wiki first.
Thanks again.

1 Like
5

a) that thread was from 2010… so not even the same engine. That was pre-version 3.
b) it was specific to NiftyGUI and indeed if you use NiftyGUI you will have some trouble getting things in the order you want sometimes. (best avoided these days)

1 Like