Problem: I reposition a context menu and the top button is not accessible. It doesn't respond to the mouse.
I've been stuck on this for a couple of weeks (ignored it for a while) I have the following setup:
root node (Node2D)
- ViewPortContainer (child of root)
- - Viewport (ViewPortContainer)
- - - various nodes, including my player sprite (children of Viewport)
- Camera2D (child of root node. If I make the Camera a child of the Viewport it no longer scrolls)
- CanvasLayer (child of root node, not child of viewportcontainer), layer 10, follow viewport is off, scale is 1, offset is (0, 0)
- - nested UI elements, menu
When I press the "menu" key the visible menu, which is nested in the UI CanvasLayer, is made visible and positioned near my player sprite, like a context menu. This works, but my top most buttons doesn't respond to the mouse (hover, click). I noticed I can access it if I move the entire menu below my character sprite on screen (higher Y position), not when the y position of the button is less. I'm suspecting it has something to do with the setup, canvas and transforms.
The UI Canvas Layer is rendered on top of everything else. Within my tree view it's the lowest layer. Nothing is on top of it. But it acts as though something's on top of it, blocking access, until the 0 position of the character.
I tried the following :
offset the menu position by offsetting the menu position
offset the menu position by offsetting the origin of the canvas layer position
offset the menu position by offsetting the offset of the canvas layer
offset the menu position by offsetting the y position of the buttons themselves
Same result for all: as soon as a button is higher on the screen than the character the button is no longer accessible. As if the y position of the character is the top of the UI layer and placing anything higher on the screen is visible, but unaccessible.
I don't want to spawn my context menu lower on the screen than my character. If I move my character down, the problem goes with it since the camera follows the character. The menu is rendered on top of the character. Part of the character is obstructed by the menu.
I print the positions:
the transform.origin of the UI canvas layer is set to the one of the root node. Both state (0, -233) since I moved the cam down. If I don't match them the origin of the canvas layer remains (0, 0), the origin of the root node moves with the camera.
camera position (transform.origin) is (176, 368)
the global position and position of the player character is also (176, 368)
the y position og the highest button on screen is (0, 0) within the menu root node
I tried making the UI canvas layer a child of the viewport, but the same problem occurs. Does it need its own viewport ? Own camera ? Not sure how to go about it.