GDquest has started a new kickstarter campaign to create a professional tutorial for Godot, focused on 2d games.
"Learn to create 2d games with the award-winning, Open Source engine Godot 3. Free daily tutorials on Youtube during the campaign!" "You will learn to create your own top-down game inspired by Zelda"

Anchoring issue with scaled Control

camelCasecamelCase Posts: 8Member

Hello. I'm trying to get anchoring to work properly with a scaled (2x) GUI. To exemplify, I made a regular Control node (scale: 1) with two buttons, one with a begin anchor and another with end. Works properly, this is how it looks:

Then, if I scale the control, things don't work as expected. Begin anchor works, but end doesn't. The buttons move twice as fast as the window.

I tried to scale the canvasLayer instead of the control, the same happens. The only way around seems to be scaling the buttons themselves.

This is how my Control looks like in the editor:

Is there any way to solve this? I appreciate any help!

Answers

  • AlbedoAlbedo Posts: 1Member

    Hello! Relatively new user to Godot, but I have worked with other game engine UI editors.

    From playing around with the nodes, and from what I gather anchors work with margins to define the position and size of the control nodes (See also Control Nodes Docs Page). These margins are in relation to their parent. So when you scale the entire UI, it causes the margins to count 2 pixels for every 1 that the window gets resized by.

    And since margins define position, you get the moving buttons.

    Comparison, https://media.giphy.com/media/OvkNDT5dCiVd6/giphy.gif

    As you mention, the quickest solution is to scale the UI nodes individually instead of the whole. What I did was making parents at each anchor point that each elements use. I kept the Parent control as a "full rect" anchor with each direct child to match in size but with the anchors set to their respective positions. Then build the UI inside of them.

    Node heirarchy, http://i.imgur.com/gwF9B1C.png

    Then when you go to scale up the UI, you scale the Anchor parents. Probably not the solution you were looking for, but I hope this helps!
    Below is my code I used to adjust the scale on the Control Node.

    extends Control
    var UIScale = 2 # Set the UI scale here
    var UIAnchors # Node Container
    #
    func _ready():
     # Add Anchor Parents to the container
     UIAnchors = [get_node("TopRight"),
     get_node("TopLeft"), 
     get_node("BotRight"), 
     get_node("BotLeft")]
     # Rescale the Anchors
     for i in UIAnchors:
         scaleFunction(i)
    #
    func scaleFunction(UIAnchor):
     UIAnchor.set_scale(Vector2(UIScale, UIScale))
     UIAnchor.set_size(get_viewport_rect().size/UIScale)
  • camelCasecamelCase Posts: 8Member
    edited April 30

    @Albedo, sorry for not responding before, I missed your response completely (kind of gave the thread up since it was already more than a month old, lol). Would like to thank you and let you know that I'm using your solution, which is working great for me!

Sign In or Register to comment.