How to control Z order of elements in GUI? (SOLVED)

Questions
#1

I’m doing experiments with gui script, and i don’t understand how the z value of nodes is treated.

function init(self)
  local box_z = -0.5
  box = gui.new_box_node(vmath.vector3(100,500,box_z), vmath.vector3(200,20,0))
  gui.set_color(box, vmath.vector3(1/6,1/3,1/2,1))
  for i=1,10 do
     gui.new_text_node(vmath.vector3(100,600-i*20,0), "this is text node " .. i)
  end
end

This code creates some lines of text, and add a box for highlighting one of them.
It works, but when i change the variable box_z to positive 0.5, i expect that this box will be above the line.
But it stays under, whatever value i put to box_z.

It’s very strange.

Thank you for reading :slight_smile:

1 Like
#2

In GUI files, I believe that it’s the creation order, the hierarchy or the layer property that controls the z-order, not the z-value.

1 Like
#3

Z is not used with GUI.

Use layers and gui.set_render_order()

3 Likes
#4

Read more about the render order of guis in the manual: https://www.defold.com/manuals/gui/#_index:_rendering_order

4 Likes
#5

Thank you for your answers.

So i’ve read the manual once again , and i must say that the first time had been a bit fast (i was sure that layers was used for optimizing batching, but didn’t knew they were influencing drawing order).

But alas, i’m still stuck. I’ve tried this, this time:

function init(self)
  for i=1,10 do
     local t = gui.new_text_node(vmath.vector3(100,600-i*20,0), "this is text node " .. i)
     gui.set_layer(t, "text_layer")
  end
  box = gui.new_box_node(vmath.vector3(100,500,0), vmath.vector3(200,20,0))
  gui.set_color(box, vmath.vector3(1/6,1/3,1/2,1))
  gui.set_layer(box, "box_layer")
end

And in the gui node, i’ve created two layers in this order:
text_layer
box_layer

But text is still on top of the box.

I’ve included my debug project here, if you want to see this by yourself.

gui_script.zip (17.5 KB)

Thank you for reading :slight_smile:

1 Like
#6

You are using the system font for the text nodes. The system font is treated a bit differently and rendered in a separate pass at the end of your render script. If you create your own font (perhaps using the provided vera_mo_bd.ttf in builtins) and assign that to the text nodes it will work.

PS I noticed in the editor that it actually respects the layer settings when using text nodes with the system font but while running it draws the text nodes with the system font on top of the box node as is to be expected.

2 Likes
#7

Indeed, it works by just changing the default built-in font to one i’ve created.

Thank you @britzl, this one was hard to find !

#8

If someone else like me just wanted to find a way to change the z-index / drawing order in the GUI outline, this is the solution:

Select a node and press Alt + Up/Down to move a node up or down and change its index order.

6 Likes
#9

Thank you, jonas! This tip saved me an hour of frustration.

2 Likes
#10

You’re welcome! Another thing that could lead to frustration is that sometimes you can’t move a node with child down, then you can instead move the others under it up. You can also open the file in a code editor an manually move things around. This also works for things like the atlas file for moving around animation declarations (something that is currently not possible in the editor).

2 Likes