2D Screens in world space

So im having problems using 2D screens in world space.

The issue is that they seem transparent and when one is in front of the other both of them will show.

In editor:

in game:

As you can see from the images in the editor they are clearly separate with one being in front of the other. however in the game they overlap and you can see both.

If you don’t want the other one to be visible, why don’t you disable it until you do want it to be visible? I think PlayCanvas just does that as the screens are not 3D objects so they blend together. Other than that I don’t have an answer for you…

they both need to be visible. One needs to cover parts of the other

Wait so help me understand here. You want them both to be visible, but you also don’t want them to be visible for some reason? What are you trying to do here?

Sorry for being confusing. This is what im trying to do.

Ive done this by adding a plane to the screen. however this is not a viable solution for any ui that isnt an exact square

Ok I understand what you mean now. Yes, I’m afraid that I don’t know the answer to this… Perhaps someone from PlayCanvas will pipe up and explain what’s going on here.

Try swapping the order of the screens in the hierarchy. A question that has popped into my head tis whether it will render above a 3D above that is in front of the screen as well :thinking:

Ive swapped the order round and it has no effect

Can you post a link to the project please?


I had to recreate a public project since this is for work, but the issue is the same

Looks like expected behaviour to me?


What are you seeing?

If you move the white backwards it will still appear in front of the black

Yes, that is to do with the order of hierarchy.

I don’t know why, but the rendering order of the screens is dictated by the order in the hierarchy.

For example, if I change the order to:

It gets rendered as:

I’m guessing this isn’t desirable behaviour for you and to be honest, I’m not sure how you can change this behaviour to be based on distance from the camera.

So i have found that if you use a sprite this issue goes away and regardless of the hierarchy it will render correctly. Only issue would be that text is still reliant on the hierarchy

This seems like such a weird thing. Is this meant to be how world screens behave?

I think it is to do with the way screens are rendered behind the scenes or it could be a bug? @vaios Any ideas here?

While i wait for a response from @vaios i was wondering whether or not it was possible to create a sprite from a text element? since sprites seem to have depth

I do vaguely remember someone using UI elements without a screen and that rendered in 3D space. No inputs worked on that though.

Not having input should been fine since i can overlay a 2D Screen in screen space for the buttons.

Ive updated project to closer reflect what im after. Essentially its just a carousel of ui panels.



Is that the only view you will have for the UI (ie the camera is not going to move?). If so, you might be better off using screen space and resizing the elements as they move around the carousel and moving the panel that is in front to the top of the hierarchy.

From your other thread, I tried using materials instead and putting a material on them with the images being on the World layer instead of the UI layer and it gives you behaviour you originally wanted.