UI stuck behind 2D nodes

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By scooty

Hello. From my understanding, Control nodes should always be in front of all other nodes. I created some Control nodes to make UI, but they all appear behind the 2D nodes in my scene and have no Z Index values. Some help?

Can you post a picture of your node structure?

timothybrentwood | 2021-05-10 03:37

:bust_in_silhouette: Reply From: PunchablePlushie

Control nodes don’t always get drawn in front of other nodes. They still follow the scene tree, by that I mean the nodes that are lower in the scene tree get drawn on top of the other nodes, doesn’t matter if they’re Controls or Node2Ds.

The easiest (and IMO the best way) of fixing UI depth issues is to add a CanvasLayer node to the scene and name it GuiLayer or whatever you want. Then just add your control nodes to that layer.

From the docs:

CanvasItem nodes [AKA all Node2D and Control nodes] that are direct or indirect children of a CanvasLayer will be drawn in that layer. The layer [property] is a numeric index that defines the draw order. The default 2D scene renders with index 0, so a CanvasLayer with index -1 will be drawn below, and one with index 1 will be drawn above. This is very useful for HUDs (in layer 1+ or above), or backgrounds (in layer -1 or below).

:bust_in_silhouette: Reply From: snowcapp

You can have control nodes be the child of a CanvasLayer node if you want them to behave like UI and always in front. Official docs on Canvas Layer for more information.