UI canvas layer issue

godot 4

ive been following this tutorial https://youtu.be/nAh_Kx5Zh5Q?si=sNb1VNurm4Uv1_9F and up to this point its been great. however ive run into an issue when trying to implement the canvas layer for user interface, whichever control node whether the grenade counter, laser counter, or even the margin container is directly under the canvas layer in the scene tree results in either the first number in the counter not appearing or for the background color of the health bar to be skewed to the right and above the rest of the image, no code or any stock settings were changed aside from using the anchors to move the laser counter and grenade counter to the bottom left yet issue existed before any changes were made

Regarding how I understood the problem. If an element is created and present on the scene, but not visible, it might be worth adding a value to the z-index in ordering to move the element “closer” to the screen. And about the problem with positioning, perhaps in the project settings → window, you have incorrect settings in the stretch department or screen resolution, I personally use a combination of stretch-mode - viewport, stretch-aspect - expand.

can you show the screenshot of your run-time game ?

all other nodes work as expected unless they are moved in the scene tree, whichever node is directly below the canvas experiences an error (with either the laser or grenade counter the first digit doesnt show) when the margin container is placed in the scene tree below the canvas layer the digits for the laser and grenade counter work just fine but the background layer for the margin container is skewed. the issue is directly connected to being placed below the canvas node in the scene tree as when the node is not in that spot on the tree it functions as expected

Screenshot 2023-12-18 191228
ignore locations of icons as thats my doing and unrelated to the issue

you can try debugging during runtime by checking on the remote tab, as for the bullet at 0, if it’s really 0 or just the width is too small to show whole thing, check at the remote tab of that label, if it’s really 0 or not

it is only the first digit in the sequence that does not appear when played in the debugger, it does not matter what symbol, letter number, etc is first. the issue only occurs if the node is directly below the canvas parant, when moved to any other spot in the scene tree the problem does not occur and whichever node is directly below the canvas parent has a problem only when placed below the parent

if it was a width or height issue it would be prevalent regardless of location on the scene tree, the issue only occurs when the node is placed directly below the canvas node, if it is moved further down the tree so that its physically lower on the list there is no issue, except with whichever node is directly below the canvas parent

did you try to switch on and off visibility of the second child/third child of Canvas layer (grenade counter node) to see if it fix the problem of your first child node having issues

switching hierarchy order of a child (controls) on canvas layer only just affect who and who got infront or behind someone
the lower it get, the more infront it is

ui issue
from this pic the laser counter is below the UI canvas layer in blue, in the location on the tree it experiences the issue with the digits, if i move the node circled in blue and swap its location for the red or green node, whichever node is directly below the UI in the blue circled spot on the pic has the problem, if its not in that spot on the scene tree it works just fine. i am not sure how else i can explain that the issue is solely dependent on the location in the scene tree and not any specific settings under any of the nodes

issue is there from the start before any other nodes or code or changes to any settings were made

ye like those 3 wont be affecting each other, because they are separate entities or nodes.
my guts feeling said it could be your anchor problem

from blank scene i add the canvas layer with vbox container as child and a label as child to that. i make NO CHANGES to anchor, position, transform, code, etc… nothing is changed. i put “1234” in label and run debug… only “234” is shown on screen. i add all that for grenade counter and it works, then i physcially move the grenade counter so that in the scene tree it is below the canvas layer instead of the laser counter and run debug, laser counter now shows all digits and grenade counter does not show first digit.

ok, please try change the font size on theme override → font sizes

also try to change the font color to red, there is this weird bug i just found First Character of Label Text Gets Drawn in the Middle of the Screen · Issue #74529 · godotengine/godot · GitHub

changing font size does not change the fact that the issue only occurs with whatever node is “below” all the other nodes childed to the layer mesh. the issue only occurs with whichever node is physically under the layer mesh, when its moved “above” any other node it will work, except for whichever node was then directly placed under the layer mesh.

i have changed font size and even changed font styles… that only changes the font size and style it does not alter the fact that whichever node is physically below the layer mesh experiences an issue.

that’s the bug that’s not fixed from the link i sent just now. if it’s that bug then the first number of your label text should be somewhere teleported

it could be inside the bullet icon or grenade, so why i asked to change color

ill give the color change a try

changed color to bright yellow as the game is rather dark, no yellow “1” is located anywhere on the screen