Two Canvases

Hey guys,
still very new to all this so tell me I’m stupid in a nice way :wink:

Ok, so I’m making a 2D minigame that uses a canvas for different stuff ingame. But I also want a menu before the actual game starts, which I put in its own canvas simply because putting it all in one seems very ugly. The idea is of course to have the menu canvas rendered in front of everything and then deactivated when the menu closes.

As I found online somewhere I used

Vector3 temp = new Vector3(0, 0, -0.5f);
menu.transform.position += temp;

to set the Menu’s z position to -0.5. This works and the inspector shows it to correctly be at -0.5 while the other canvas correctly is at z=0 (at runtime of course).
Yet the two canvases are still drawn on top of each other.

Is this changing the z position actually the way to go and I’m just missing some small thing? Or should this be done totally differently?

Thanks :slight_smile:

In case anyone else had the same issue, this here solved it:

(so all child elements needed to have their own Graphic Raycaster. I’m not even sure what that does but it works :stuck_out_tongue: )

If you are using Canvas, you can set the canvas sort order to determine what order they are displayed in. Otherwise, if they are all the same sort order, they are rendered the order in the hierarchy. Whatever is towards the top is drawn first, so the lower on the hierarchy, the later it is drawn. Or “on top”

The same holds true on UI elements. Anything that is a child of the canvas is drawn in order from top down, so you just have to sort it with that in mind. The lower on the list, the later it is drawn. Child elements should also stay with their canvas.

I’m a bit curious about your situation, since I have not found a need to add a graphics raycaster to anything else. (one comes with the canvas when created by default).

There are also ways to move child elements around with code if you need stuff to be moved to being drawn on top.

1 Like

Well, the problem was that due to the way I set this up (keep in mind I’m a beginner with unity) the main canvas couldn’t be deactivated or I’d get NullReference Exceptions and other stuff was constantly updating numbers etc. in that canvas. So even though my menu canvas was lower in the hierarchy, being in the same plane you’d constantly see some of the stuff.
Again, probably something that could have been avoided if I had known this beforehand, but the way it was it just seemed easier to really get the second canvas in front of the first on…

Anyway, thanks for the tip about the rendering order, I wasn’t aware it worked like that :slight_smile: