[Solved] Fade to black with new layer system

Hello Play canvas forums,
I am doing a look around VR application which you can move from area to area, with a simple full screen fade to black every-time this happens. Before the recent update this was working without an issue, as there was no ui elements being shown and just a black screen. Now when this transition happens world space UI elements will render on top of the black screen, which is not intended. How would I use the layer system to retain my previous functionality?

Here are the results in the project, during the transition phase, with some captions

I’ve tried to create a new layer, overlayui, and assign the transition black screen, as shown below.

I’ve deleted the transition black screen from the ui and it doesn’t show up even though its on the overlayui layer.

Below is the scene hiearchy

I have other questions about getting the layer system to work with the current application, however if I can understand the system more here, I should be able to resolve those issues with little issue.

Thank you for your time

I noticed on another project that UI elements were sorted in a different order than before ( not sure if parenting was an issue ).

I was able to resolve my situation easily by swapping colours, and didn’t look too much further into it, but it looks like we are both seeing the same issue with the new system.

Element components are rendered in the order they exist in the scene hierarchy. I think you should probably move the black screen after your other elements.

If you want to use a new layer for an element component make sure the layer properties are like the properties of the builtin UI layer and also you need to add the layer to the render order and add your camera to that new layer too.

Vaios, on the old UI system I had parented a shadow text entity to a normal text entity ( cloned entity, coloured black ), and moved it slightly back. This worked, so depth was taken into account rather than order.

In the new system change, the shadow was in front of the normal text, so order seemed to override the depth.

In this simple case, I just swapped the colour of the two entities, but in Phil’s example things need a bit of re-ordering.

The main point here is something changed in UI rendering order.

I managed to find a solution to my problem which involved changing the layers of all the world space ui element from the ui layer to the world layer. This is fine for this situation these world space ui elements should be rendered underneath the screen space ui elements.

For reordering, I’ve tried to change around the scene hierarchy with moving the fade to black screen to the top of the hierarchy or bottom with no effect on the resulted output.

It would help if you could add me to your project so I can have a look, it’s hard to tell without seeing something… My username is vaios.

Looking at the suggestions for your previous comment I noticed I was missing a step in getting the camera working. I was missing the step of adding up the new layer to camera, which did explain why I didn’t see the black screen transition some times.
Sorry I skimmed over that step, but now everything seems to be working fine now.

1 Like