How do I get a buch of Node2Ds in a layer to be unaffected by a Camera2D's movement in another layer?

Question

My (touch-based) puzzle game's screen has a main space where the player can see the grid that s/he'll put pieces onto, and a "scroll area" on the bottom (about 1/4 of the screen) where all the available pieces are displayed. They're all Area2Ds arranged in a line, and I've made it so that when the player drags the screen (InputEventScreenDrag) inside the scroll area, the pieces move to the left or to the right.

Thing is, I plan on having large grids that eventually won't fit on the screen without zooming out, so I thought I'd get a Camera2D working. I can make it so that the GUI (including the scroll area) "sticks" to the screen no matter what the camera position is - but not the pieces. I've tried some different approaches using multiple CanvasLayers and even Viewports with no luck. How should I go about this?

Answer 1

https://docs.godotengine.org/en/stable/tutorials/viewports/viewports.html

i got it working using a viewport container, a viewport, and a camera for each layer

https://gotm.io/henry-software/pixelleveltest/

• background layer
• zoomable and pannable game layer
• foreground layer for mini-map and ui

Comments

This got me to learn a bit about how viewports work, which is great, but unfortunately doesn't seem to solve my problem.

From what I gather, your example has 3 layers, but the player only interacts with one of them. In my case, I want pieces to stay at the bottom of the screen independent of camera movement, but in such a way that the player is able to pick them up, drag them and drop them on the grid, which isn't independent of camera movement. So even if I get one Viewport with a movable camera to show the grid and another with a static camera to show the pieces, I guess I wouldn't be able to drag the pieces from one viewport to another.

---

i am pretty sure dragging from one 'layer' to another is fine i have ui on foreground that blocks interaction with layer below... and layers are just collections of nodes, can do what you like... i plan to drag around some items eventually...
and the root node is a viewport too... so it is just normal split into layers
but ya maybe a better way

---

I think I don't get it, then. Can you share the basic scene tree structure you used to achieve this?

I tried to implement something similar to this KidsCanCode splitscreen example, but ran into the problem I mentioned above. Should I have the grid be the child of one of the viewports and the available pieces the other's?

---

yes, i think it should work like that
i did watch that splitscreen video too while getting this to work
a link to the entire project on github is @ original link

but for simple interface you don't even need layers because you can attach any control to the screen and it will not move right?

also ensure you use global_position when you want to set position independent of parent

or maybe this CanvasLayer is a better option idk
https://godotengine.org/qa/396/gui-not-following-camera

---

i think I got it. Here's what happened:

I tried to get it to work like you did in your project, overlaying viewports on top of each other. Didn't work, because objects in one viewport wouldn't interact with those in the other.

Then I tried to make the pieces viewport smaller than the level viewport and place it on the bottom of the window. In that case, I couldn't drag the pieces between viewports.

Surprisingly, the CanvasLayer approach worked! I thought I couldn't have a Node2D working properly as a child of a control node inside a CanvasLayer, but turns out I can. So, in the end, I learned a lot of stuff and got it to work thanks to your answer, so thanks a lot!