Issues with combining tweens

Help
,
1

Godot Version

4.4.1

Question

So, I’m looking into how to use tweens for UI. I’m honestly probably going to switch to an animationplayer node soon, but I would love to know why this isn’t working the way I’d imagined first.

Essentially, I have a UI where a button is clicked, and what I would like to have happen is the panel growing vertically while the buttons are sliding to the right. I’ve gotten the panel to grow the way I wanted, and I’ve gotten the buttons to slide the way I wanted, but not at the same time. The panel grows the first time I click, and it takes clicking a second time to get the buttons to move. I would like this to all be one fluid motion.

func _on_button_button_up():
	
	var tween = create_tween()
	tween.set_parallel(true)
	tween.tween_property(self, "position", Vector2(self.position.x, screenSize.y - itemMenuHeight), .5)
	tween.tween_property(self, "size", Vector2(self.size.x, itemMenuHeight), 0.5)
	
	
	var buttons = buttonContainer.buttons # Array of buttons in the menu
	var tween2 = create_tween()
	tween2.set_parallel(true)
	for button in buttons:
		tween2.tween_property(button, "position", Vector2(200,button.position.y), .3)

Here’s my scene tree

image
image266×508 14.9 KB

Before the first click:

image
image242×306 1.1 KB

After first click/before second click:

image
image244×470 1.34 KB

After second click (buttons slide right):

image
image246×453 1.23 KB

Some observations:

  • I found that if I were to switch the second tween’s property to “modulate” to make it disappear, that will work at the same time. Its only when the tween affects the buttons’ position that it seems to need to wait until the other tween is done.
  • I’ve tried having them all be the same tween but that doesn’t seem to work which is why I tried making a second tween.
  • The closest I’ve gotten is to do tween.chain() to allow the buttons to move directly after the other animation is done, but I’d prefer if they could move at the same time.

Any help is appreciated. I know my code is an absolute disaster, I’m just kind of throwing whatever in here and seeing what happens at this point.

2

The buttons are children of the container right? They will be automatically positioned within the container, this is probably triggering as the container changes it’s size it constantly attempts to reposition it’s children. Are you animating the BtnAnimHandl nodes?

1 Like
3

Since modulate works just fine. Maybe it is because both tweens
change the buttons’ positions and cause some kind of conflicts?

It is definitely weired though.

1 Like
4

That’s what I’m leaning towards as well. Its strange though since I was hoping since I was adjusting different objects that it would be okay.

As for the BtnAnimHandler node, it used to have more in it, but while I was trying to get the tweens to play nice at some point I moved most of it to the BattleMenu node. Right now what it does is move the button highlight when you hover over the button. It does also use tweens, though I’ve actually tried commenting out that whole script to see if that made a difference but unfortunately it didn’t solve anything.

Oh and I don’t know if I specified in my initial post but the code I posted is from the BattleMenu parent node script.

I honestly imagine I’ll have a lot less trouble wrangling the UI with an animation player (knock on wood) I’ve never really sat down and added this level of polish to my UI so I’m a bit out of my depth with it.

5

Buttons are inside a container in which case the container controls their position. Every update of the container size will trigger the recalculation of contained element’s layout.

You may be able to do what you want if you set up your layout in a way that panel resizing doesn’t affect the container size, for example if container layout mode is “position” or if its anchor mode is not “full rect”.

Note that this will still be a bit hacky as contained elements are not really supposed to be moved “manually”.

1 Like
6

I’ve been thinking about this a bit myself, and what I’m going to try is make every button a child of a margin container, and then use the tween to animate the margins in order to throb the size. That should mean the vbox container’s immediate children are constant size, and I won’t have to screw around with button position to keep it centered.

1 Like
7

Thank you to everyone who responded! I wanted to give a small update. I’m moving mostly everything to use animation player, and its effectively solved my problem. I don’t know why I was under the impression that you couldn’t use the animation player for UI at first, but since trying it, its so much easier to work with.

I don’t have concrete evidence on what was wrong with the tweens but what normalized said strikes me as the most likely reason things were going haywire.

I might keep tweens on the slide animation, since after moving the panel animation to an animation player, the button slide tween seems to be working as intended, but I’ll have to give it some thought.

1 Like