How can i scale my ui with my 2D Cameras Zoom

[minor geyser]

Im trying to make zoom buttons but when i change my cameras zoom i cant get its attached UI to scale along with it as shown in the images below, iv tried the best i can to make it work but haven't been able to workout a way.
This is my buttons code

func _on_zoom_pressed(zoom):
    if zoom == 0:
        get_node("Camera2D").zoom.x += 0.25
        get_node("Camera2D").zoom.y += 0.25
    else:
        get_node("Camera2D").zoom.x -= 0.25
        get_node("Camera2D").zoom.y -= 0.25

and the layout of my camera and UI can be seen in the screenshots

[pallid solstice]

Put all the Ui stuff under a canvas layer node

[minor geyser]

Oki I’ll give it a go thank you

[minor geyser]

is this right? still not working sadly

[pallid solstice]

Move the canvas layer under the node2d

Canvas layers should keep Ui and such always in the foreground and fixed to the screen size

[minor geyser]

alright how should my camera be ssetup, just as a child of Node2D with no children of its own?

[pallid solstice]

Yes

[minor geyser]

still doesnt scale with zoom and now the ui isnt locked to the camera 😦

[dusty grail]

canvaslayer Documentation (Godot 4)

Online API Reference for canvaslayer. You can also use the offline documentation by pressing F1 in Godot and searching for a class name.

Aug 16, 2024, 10:43 AM

[pallid solstice]

Enable follow_viewport_enabled

[minor geyser]

already enabled it

[pallid solstice]

Do the control nodes have any offset in the editor?

[minor geyser]

dont think so, do you mean the position of it?

[pallid solstice]

Ye

[minor geyser]

then no it doesnt everything is at 0, 0 except the ui elements ofc

[vernal axle]

Not sure if I understand what you're after correctly, but have you anchored the UI properly? On the Panel node, it sounds like you want to use the Full Rect anchor mode.

When thinking about it, it might not be what you want. I always use a Control node as a child to the Canvas layer, then the rest of the UI elements as a child to the Control node. It's the Control node I set to Full Rect, then all the children inherit it.

[minor geyser]

this is my layout, canvaslayer and panel.

[minor geyser]

sadly neither of these worked, tried the full rect anchor on the panel and tried a control node.

[pallid solstice]

Do you have a vid of what’s happening?

[minor geyser]

This is with the setup shown here

[pallid solstice]

And you are only changing properties of the camera to move things around right?

[minor geyser]

indeed only code that effects the camera is this one for the zoom buttons

func _on_zoom_pressed(zoom_request):
    if zoom_request == 0:
        get_node(camera).zoom.x += 0.25
        get_node(camera).zoom.y += 0.25
    else:
        get_node(camera).zoom.x -= 0.25
        get_node(camera).zoom.y -= 0.25

and this one linked directly to the 2D Camera (allows for moving around)

extends Camera2D

var mouse_start_pos
var screen_start_position

var dragging = false

func _input(event):
    if event.is_action("drag"):
        if event.is_pressed():
            mouse_start_pos = event.position
            screen_start_position = position
            dragging = true
        else:
            dragging = false
    elif event is InputEventMouseMotion and dragging:
        position = zoom * (mouse_start_pos - event.position) + screen_start_position

The moving of the UI was originally done by having it as a child of the camera, this would make it move with it but it wouldn't scale with the camera.

[minor geyser]

bump

[minor geyser]

was able to get it working with this layout and code in the camera

func _process(_delta):
    get_node(".").scale = Vector2(1 / get_node(".").zoom.x, 1 / get_node(".").zoom.y)

[pallid solstice]

. Is just self or leaving it out

[minor geyser]

it was giving errors without the get_node(".")

is alright anyways camera moves and can zoom in and out without issues 🙂

[pallid solstice]

that seems weird. sounds like another or perhaps related issue 🤔