Text node covered by nodes rendered before the text node

Questions
#1

I have read that GUI nodes ignore their z position and instead follow a draw order where the first node in the nodes folder is rendered first, so the node after the first node is rendered next, leaving the the second node to be in front of the first node.

I have 3 nodes: a transparent grey box node, a white box and a text node. The transparent grey box node is first in the nodes folder while the text node is last. All have a z position of 0.
image

In the editor, the white box node and the text node is above the transparent grey box node:
image

However, when running the game, the text node that is supposed to be rendered last is behind the transparent grey box:

image
image380Ă—633 2.26 KB

How do I make it so that the text node is above the transparent grey box?

1 Like
#2

Add it as a child of the transparent box node.

1 Like
#3

Hello, thank you for replying. This is me replying from another account.

I have tried that before and tried again but still did not work.

When in the editor:
image

Outline of the GUI:
image

When the game is run:

image
image537Ă—774 2.59 KB

It is still the same as before. I have also tried increasing the position of the text node by 0.1 thinking that it will become in front of the transparent box node but it did not work. Also as setting the z position of the game object that the GUI is in as -1 because I had the same issue with labels in another game object where labels cannot be seen unless the position of the game object is lower. But also as setting the z position of the game object that the GUI is in as 1 instead of -1. Nothing worked. I tried everything I can before making this post but I cannot seem to figure out the reason why the text node is covered when it should have been rendered last.

1 Like
#4

you could try it with layers:
add 2 layers named “back” and “front” (front below back) and assign all fonts to the front layer and all boxes to back layer.

#5

Make sure to not modify the z-value when working with gui nodes. Draw order is controlled through the node hierarchy: GUI scenes in Defold

#6

I have tried that, with the front layer below the black layer as you said:
image

And I have set the layer property of the text as the front layer and the other two box nodes as back. However, the result is completely the same .

#7

that’s strange, can you share your project?

2 Likes
#8

Hello, sorry for the late reply.

I have uploaded the project on GitHub if that’s how I can share my project:
text-node/Game project at main · thisguy109/text-node (github.com)

This is a copy but the same problem still remains.

#9

It’s the font you use.
Open the font in your main folder by double clicking on it, then in the properties panel look for “Material”. To the right you will see a icon (arrow pointing to the right), click on it to open the material.
Scroll down to “Tags” and change the value to “text” and run the project.

2 Likes
#10

thank you very much! It also solved an issue where the text nodes are not where they are supposed to be when the game is run in a different computer.

I also came around a problem before uploading the game on GitHub. I was looking for what is only needed to upload on GitHub on Defold but when I tried to open the same GUI that has the 3 nodes, this showed:
image

I cannot remember doing anything to it that caused this and the other GUIs that I had did not seem to have this problem. So, I just deleted this GUI and create a new one that looks like this GUI and now it can be opened. I still have a copy that have this problem if needed. Do you know what may have caused this?

1 Like