Godot Version
4.4.1
Question
So I have a project which consists mostly of UI nodes, and the popup system I’ve designed uses 3 CanvasLayers in the root scene - CL0, which holds the background image of the entire app; CL1, which holds everything else above the background, consisting of text, lines, buttons, boxes, etcetera - everything the user sees and interacts with, aside from popups; and CL2, which can hold a centered popup panel which is added and deleted depending on the buttons the user presses.
What I want to happen here is that when a popup panel is created on CL2, all of the area under that panel which exists on CL1 is made invisible - so the background on CL0 still shows under the popup, but not anything on CL1. The animation demonstrates what I want to happen, where the green background is visible at all times but the popup clips any of the white UI content beneath it on C1.
I’ve tried using lighting masks, SubViewports with cull masks, among other things and couldn’t come to a solution.
I imagine you could put a subviewport texture that only renders the background in the CL1 layer, and then the popup serves as the camera for it.
I’ve done a few similar things but I’ve never structured my projects the way you are, I don’t know if it’s the easiest way but could you just code if statements to track what the user is clicking on and determine what needs to become invisible and then $Node.visible = false ?
Thats about the best I can come up with, not sure if it would be feasible for your implementation
1 Like
I don’t think that would work for this guy because he needs it to be like a window to the background. So a fraction of any given element might be visible/hidden, not the whole thing.
2 Likes
I found a solution - I familiarized myself with the CanvasGroup node, added one under CL1, and under this new CanvasGroup I have two parts - first is all of the white UI elements under a single PanelContainer, and second is a Node2D folder; whenever I instantiate a popup on CL2, I also add to this folder a Panel with a solid white Material with blend mode “Subtract”, and the Panel’s size and global_position are set to that of the current popup instance; so the UI stuff is drawn on CL1, and then the subtract panel is also drawn when instantiated, and since they’re all in the same CanvasGroup the subtract panel renders all of the drawn UI elements in it’s area invisible.
Thanks for the replies mates