Ability to tween between anchors

Help
, ,
1

Godot Version

4.2.1

Question

Hey, I’m looking to do a fun menu effect when switching between menus. I currently have my pause menu centered (via the V Center Wide anchor) and I was curious if it’s possible to tween it to the left (Left Wide anchor) and then tween it back to the center. Is an effect like this possible?

2

There’s a built-in tweening function in Godot.

I don’t know the specifics of your needs, but you can use Tweening like so:

===============================

Step 1
Create a Tweener.
var tween = create_tween();

Keep in mind that no matter what you do, this tween function will remove itself by the next frame. So this line should be used in functions 99.99% of the time.

Step 2
Specify what object and which of its properties you want to tween.
tween.tween_property(self, "global_position", Vector2.ZERO, 0.5);

In this example, the Node (self) running this code will move (change its global_position) towards [0, 0] (Vector2.ZERO) over 0.5 seconds (the final parameter is how long do you want it to take to achieve the final result).

===============================

That’s it really.

Some other things to note about tweening is if you call multiple tween.tween_property(), they’re queued.

So if you were to do…

tween.tween_property(self, "global_position", Vector2.ZERO, 0.5);
tween.tween_property(self, "global_rotation", 180, 0.5);

self would go to [0, 0] THEN rotate itself 180.

But sometimes, you want things to run simultaneously.
In that case, you would call .parallel():

tween.tween_property(self, "global_position", Vector2.ZERO, 0.5);
tween.parallel().tween_property(self, "global_rotation", 180, 0.5);

Obviously, this is just a basic run-down for what you seem to need at the moment, but if you need more advanced uses: Tween — Godot Engine (stable) documentation in English

3

I’d be shocked if this was possible since anchor system is supposed to be rigid like a grid and has no in-between values. But…

You can fake it by putting the menu inside a margin container and then tweening left-side margin. If it starts in the center then you set the left margin to start at

get_viewport_rect().size.x / 2 - menu.size.x / 2

or something and then tween it down 0.

This works fine for 1 button but can have other issues depending what the overall scene tree looks like.

I did see someone do a menu plugin here in the forums, with menus moving off-screen and back on-screen. Find that and check their source code.