Hey guys!
I am a Godot n00b and working on my first game coming from an artist’s angle.
I would like to play a hover animation (png sequence) upon the mouse-cursor or the focus entering my button and preferable the same when exiting the button. I have a few assumptions as to how to go about this but no point of entry really. Assuming that I would have to use the mouse_entered()- and mouse-exited()-Node somehow. Here’s a screenshot of my scene-setup:
I’d appreciate if someone can offer direct help or point me to a source.
Thanks a ton!
When you want to play an animation with several frames, you have to use Sprite2D or AnimatedSprite2D.
EDIT: There is actually another way and that is to use an atlas_texture in your texture-rects and use an animationplayer to animate it
Just to make it idiot-proof (somewhat):
I set up a sprite2D as a child in my button, create the animation within it using a texture-atlas and then make it play in my code via said Node.
Does that sound about right?
So you have a Sprite2D as a child node of your texture-rect? And you set the texture of the sprite to the animation-sheet you want to use? Do you know how animation-players work?
I kinda do. I have used animation-players in the past but only through tutorials. I think I can extract their function from somewhere else but I wouldn’t really know where to the function and where to put the script.
That is my biggest issue as of now. If you had a hint as to where to put it, I’d give it a shot myself.
first you have to tell the sprite2d how many vertical-/horizontal frames there are. Then you can click on the animation player and create an animation, where you key the frame-property of the sprite from 0 - number of frames
Arrite! I got it working somewhat. Thanks for the hint @herrspaten.
The animation works upon entering with my mouse and just for the fun and training exercise of it I created an exit animation too and code wise solved it this way:
It’s just not super clean. Meaning, if I leave the button too early it is stuck with the last frame of the enter-animation and only if I leave very quickly does it play the exit-animation. I guess there’s some await-stuff to be entered here as well.
If you have a suggestion there too, I’d be glad. Otherwise thanks a ton for your help!
The problem I have now is that upon loading this screen the focus triggers the animation and when I leave the button (either with focus or mouse) it remains stuck on the last frame of the enter-animation but still plays the exit-animation.
So, even though it plays the exit-animation upon leaving the button the last frame of the enter-animation remains.
Would you have a hint how to approach the enter-animation not being visible anymore once I leave the button?
Hello, @thesnooze! Also look towards TextureButton node with using the Hover property and adding AnimatedTexture to it. For Focus property just copy-paste AnimatedTexture.
This animation may not be so smooth, but it still allows you to animate the button with states Normal, Pressed, Hover, Disabled, Focused without unnecessary nodes.
im referring to #1. You can select this animation and add all the properties in there that represent the “idle” state of the button
Then you can call it in code when animations are finished
