playcanvas
Be able to control the rendering order of UI screens on the same layer
At the moment, there doesn't seem to be a way of controlling the order of rendering of multiple UI screens. Typical usecases are things like popup windows that would overlay over the standard HUD.
Currently the workaround is to use a separate layer or have the notion of sub screens (that are image groups) on a single UI screen in the scene.
Side note: be mindful of input processing order too. Related thread: https://forum.playcanvas.com/t/input-processing-from-engine-version-1-47-0/22501/
@jpauloruschel @yaustar A very quick solution is to determine render order of UI on the same layer with their order on the hierarchy panel. So the one on the top of the hierarchy will be rendered on top.
eg. hud 2d will always be overlaying world 3d screen and within hud 2d, time bar will be rendered over score
It doesn't quite work like that for the UI.
By default, the UI elements for a UI screen are rendered in the 'downward' order of the elements in the hierarchy. So on HUD - 2D Screen where it's a UI screen, Time Bar is rendered first for the screen, then it's children and last would be Score.
This works okay for the most part as elements should be contained by the screen.
However, for screens, developers may have them in different places in the hierarchy for organisation or because they are created/loaded dynamically so ordering them is a fiddly at runtime.
What we could do is to use what the cameras do and add a priority property so they render in that order if they are on the same render layer instead
Another idea after discussing with Jasper, we could have a ScreenGroup component where all the child screens are rendered in the order of the hierarchy depth in the graph (similar to child elements under a screen component)
At the moment, the order of rendering seems to be in the order that the screens were created (last one is on top) which means dynamically created screens (eg from Templates) would always be on top
Another idea after discussing with Jasper, we could have a ScreenGroup component where all the child screens are rendered in the order of the hierarchy depth in the graph (similar to child elements under a screen component)
I think this particular solution wouldn't be ideal because it would still mean users would not be able to organize their scenes as they want (as you mentioned in your previous comment).
At the moment, the order of rendering seems to be in the order that the screens were created (last one is on top) which means dynamically created screens (eg from Templates) would always be on top
Interesting finding! I'll look into this.
I do like the idea of a priority attribute which is used to sort the screens before rendering.
I do like the idea of a priority attribute which is used to sort the screens before rendering.
The downside of this is that it's hard to see the order of rendering in the Editor because this is only shown on each Entity.
However, this could be mitigated by having screen space rendering UI done correctly on the Camera Preview or a separate view for Screen space UI at Editor time.
Priority attribute on Screen is now merged, and will be available for use in the next Editor release. Closing ticket.