How do I make animated buttons?

Help Animation
1

Godot version 4.3

Hi! I made a main menu for my game, and I want to animate the “Play” and “Exit” buttons. I’ve tried many things but nothing seems to work. Is there a way to do it?

I want buttons to feature a little image, and when you hover over them with your mouse they should play a small animation that will end if your move away the cursor or if you click on them.

Thanks in advance!

1 Like
2

I would use tweens to make this system if the animation you want to make is not too complicated, otherwise I would create a animation with an animation player where I can modify the node properties better.

tween:
in the image node link the signal of the mouse entering to a script, in this func create a tween

func _on_image_mouse_entered() -> void:
	var tween: Tween = get_tree().create_tween()
	tween.set_parallel(false)
	tween.set_ease(Tween.EASE_IN_OUT)
	tween.set_trans(Tween.TRANS_CUBIC)
	tween.tween_property(%image_node, "scale", Vector2(1.5, 1.5), 0.4)
	tween.tween_property(%image_node, "scale", Vector2(1.4, 1.4), 0.1)
	tween.tween_property(%image_node, "scale", Vector2(1.6, 1.6), 0.2)
	tween.play()
	await tween.finished

use mouse exited signal to make the opposite animation

I’m a godot beginner so there are probably better ways to add this feature

3 Likes
3

usually we do tweens.
for this I would combine some nodes or use an icon spritesheet for the button, and set it to atlas.
and then you can use a tween to change the value of the atlas texture, or use an AnimationPlayer to create the animation and play it.

as stated, you need to use the mouse_entered and mouse_exited signals and connect them to your functions that play the animations or a tween.

1 Like
4

Thank you! But I’ve found a different, easier way to do it. So many tweens were scary anyway.

First, I created an animated sprite 2d for the couple of frames I wanted to animate, and then…

In my main menu scene, where I have all the buttons, I did this:

@onready var animation = $VBoxContainer/Button/AnimatedSprite2D

func _on_button_mouse_entered() → void:
animation.play()

func _on_button_mouse_exited() → void:
animation.stop()

That seems to work just fine but with a lot less code.

Thanks anyway! I really appreciate it.

2 Likes
5

you are not supposed to combine Controls and 2D nodes. you will realize when you have to scale the game to a different resolution and everything breaks. this is because they use completely different systems for figuring out where they should be on the scene, and putting one as children of the other resets the transform.