[SOLVED] Problems With layers in UI

I have a problem with a Layers of the UI in my project. I try show images front another image, but the image don’t show me when this image is put on a scrollView although the layer is the correctly. Can help me somebody?
image
Link to project PlayCanvas | HTML5 Game Engine

I’m not sure what the end result you are aiming for but there are some potential issues I see in the project

PromotionPanel is on both layers UI and LoadUI, is that deliberate to render on two layers?

The Camera isn’t rendering LoadUI

The LoadUI layer mesh sorting is set to back to front instead of manual like the UI layer. This means that UI elements aren’t rendered in the order of hierarchy like they are on the UI layer

1 Like

Thanks for your answer.
My intention its like similar this, but without change hierarchy
image
I change “Back to front” to “Manual” and look just as before


Could there be any solution?

I generally recommend using the hierarchy over layers to order UI elements that are part of the same screen as it can get complicated in the rendering where I think the parent mask of the element to render also have to have the same layers otherwise the mask doesn’t work.

Here’s a fixed version using layers: https://playcanvas.com/editor/scene/1410860

With the example you have given, it was easier to just use UI layer and move FrontiMAGE to be the first child in the children of the screen as shown in the project below

https://playcanvas.com/editor/scene/1410888
image

2 Likes

Thanks for your tips @yaustar


I found the error The element Viewport hasn’t been layer LoadUI. Thanks for your time, and have a good day

Hi @yaustar ,

I seem to have a similar issue where a mask is preventing a child element to show in the front. However I am not using a scrollview with viewport, just a regular image element as a mask.

I made a very basic example to show what is going on.

https://playcanvas.com/editor/project/1231464
In this project the image element under the mask should be shown in front.
It, the mask and the camera have the layer ‘FrontLayer’ but it is not showing.

Could you take a look?

Thanks!

Sorry, I’m no longer at PlayCanvas and don’t really have the bandwidth to investigate

Hi Ramon I’ve resolved that but I don’t remember exactly how, the post have more time, I reccomend you search a similar layout and copy that. Greeetings

1 Like

Oh that reminds me, I think the problem here is that Front Layer is not set to sort order to manual

The sort for both Opaque and Transparent should be in Manual so that it renders by the order given by the UI system (hierarchy order)

Edit: Yeah, I mentioned this before :sweat_smile:

You are right. Sorry for that.

Anyway, it’s a shame you are no longer working at PlayCanvas. But all the best!

1 Like