• 2D

  • trouble understanding viewports and canvas layers

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.

I found the culprit! It has nothing to do with viewports and transforms apparently. I suspected it did since I tested a button by making it a child of my viewport and its hit area started moving around when the camera moved.

Opting for the nuclear route, I replaced every node with a Node2D one by one and the problem went away when I removed a ColorRect that was a child of an Area2D node. The Area2D is fine with various other child nodes, and it's fine with the ColorRect as long as it's invisible, but once it's visible it's like it's always covering the top of the screen somehow, even when it's not even on screen. I'm guessing it has something to do with it being a Control node, like my buttons. I have several other ColorRects that I use for fullscreen effects and they don't have that problem. If I place the ColorRect as a child of the Viewport and it's visible, the problem occurs. If I make it a child of the root node, but not a child of the Viewport, the problem doesn't occur, even when visible or as a child of the menu. It ought to be on top, blocking the menu then, but the menu pushes it out of the way somehow. Right, I also don't understand Control nodes.

Writing it out here really helped sort my thoughts though.