How to make an animated button

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By flagg

Hello,

I’m a bit stuck when trying to implement an animated button. I feel like there is something easy that I’m missing.
What I’d like to achieve is something like presented in this video:

This is done in unity with a simple label with a rectangle behind and a bit of code to handle all the events. The background rectangle is animated using an animationplayer on hover or select.

Using Godot, I think I should use a Button node to handle all the events, avoid containers to allow for resizing and maybe a NinePatchRect for the background.
But this would never be reusable as the rectangle would need to be sized according to the text of the button. And the button itself must be hidden so it doesn’t hide the background.
What do you think? Is there a better way that is maybe less complicated?

Thanks!

:bust_in_silhouette: Reply From: flagg

I’ve just found a way which seem reusable and efficient.

I created a new scene with the following structure:

Button (script)
->TextureRect
->AnimationPlayer

the textureRect has its layout set to fullrect so it matches the button’s size and is set to appear behind its parent
The button itself has all its styles set to StyleBoxEmpty so we don’t see its background but we can see its text.
All the necessary events are connected in the script and trigger the animations which affect the scale and modulate of the textureRect.

This scene being a button, I can change its label/size, etc from where it’s instantiated and it reacts correctly to any layout container.

:bust_in_silhouette: Reply From: deaton64

Hi,

How about a Touchscreen button? I’ve only used static textures for normal & pressed, but there’s an option to have animated textures.

I’ve never used TouchScreenButton. I’ll give it a look in case of but I feel like the solution I posted up there ticks all the boxes.

Thanks for your feeback!

flagg | 2021-06-24 07:16