How do I keep a layout in the background?

I'm gradually starting to create my video game, and I'd love to receive some help with the next feature I'd like to add.

The idea is:

There's a level select layout.

There are many level layouts.

I'd like that whenever a level layout is launched, it only takes up part of the screen, not the entirety, while the level select layout remains frozen in the background during the time the level layout is open.

Here's a picture to explain: Yellow represents the level select, and Red represents the levels.

Thank you for your help!

i'm not sure if you can have two layouts loaded at once

this is just my first idea, but you could create your level select as a global layer, set it as the highest layer with 0 parallax, then make sure that layer is included in every layout. when you move between layouts the layer will be the same across layouts. then you just need to make sure there's a transparent area in your level select layer to allow the player to see through to the selected level. 0 parallax on a layer means that everything will stay in place visually. this is also a good way to do the UI, to show health and stuff without having it slide off screen when you start moving

Thanks for your answer !

I did thought of this but i'm pretty scared about doing a layout with 200+ layers...

Wouldn't that cause many lags ?

I used to think about taking a picture of the level selector right before entering any level, and put that picture as the background of the level's layout. Is there any event that could do this ?

I did thought of this but i'm pretty scared about doing a layout with 200+ layers...

Layers actually have pretty much no performance impact unless they are set to "force own texture" or there are HTML Layers inbetween.

You can also create/remove layers at runtime, so you could just create the layer when needed.

I used to think about taking a picture of the level selector right before entering any level, and put that picture as the background of the level's layout. Is there any event that could do this ?

Yes, you can take a canvas screenshot before the level transition. Like this

github.com/Wackytoaster/c3examples/raw/main/snapshotBackground.c3p

There's a brief moment that the image takes to load, but you can hide that with some kind of transition animation (a fade for example)

Hi,

Thanks a lot for this !

I used the event you shared in your project to create mine. It's almost perfect, however, I face one last issue...

No matter the size of the canva, it looks like that the canvas snapshot is slighty zoomed in.

Here's pic (in levels selector, and then in the level) :

Same with different canvas size :

I'd be so thankful if you know how to solve this.

I managed to solved it.

Thanks again to you two for your help ! :)