• Building
  • How do you make an animated texture button?

I saw this question on another Godot qna site and someone answered to use an AnimatedSprite, but that's all they said, I do not know how to code this correctly, and I need to know how to use this so that the button that I'm making animates. If there's another way, tell me about it, but know that I am currently an amateur coder, so may you make the code simple, whether you help me with the AnimatedSprite, or you help me with different code to do the same thing, I'm thankful that you just help.

My code:

extends TextureButton

# Declare member variables here. Examples:
# var a = 2
# onready var anisprite = $AnimatedSprite


# Called when the node enters the scene tree for the first time.

func _on_TextureButton_mouse_entered():
	$AnimatedSprite.play("default 1")

func _on_TextureButton_mouse_exited():
	$AnimatedSprite.play("New Anim")

func _on_TextureButton_pressed():
	get_tree().change_scene_("title.tscn")

I change it to title because this scene is before the title scene

What is the issue you are having with the AnimatedSprite? Is it not playing correctly or at the right times?

If you are using an AnimatedSprite, then you will want to make sure it's on top of the TextureButton node and that it has the animations setup. Then calling play like in the code you have should work, as long as the functions/signals are setup correctly and the animation name you are passing to the play function is a name of one of the animations in the AnimatedSprite.

Looking at the code above, as long as you have animations called default 1 and New Anim on your AnimatedSprite, have the AnimatedSprite as a child of the TextureButton node, and have the mouse entered and mouse exited signals setup, I think the code should work.


Looking at the code, it looks like you are trying to animate a button, correct? If so, you may want to use a Control-based node for the animation so it can scale with the UI. It's not required by any means, but Node2D nodes don't have some of the anchoring and layout settings that make it scale nicely with different sized displays. That said though, if your UI doesn't resize and/or you have the scale mode set to 2d, then using an AnimatedSprite is probably fine since the resizing should be handled by Godot.

However, if you're not using a scale mode of 2d and/or you want to better support resizing UI, You may want to use a TextureRect node and then animate it with an AnimationPlayer. To change the frames of the animation, you can keyframe the texture property of the TextureRect. Then instead of calling $AnimatedSprite.play("animation_name") you would instead call $AnimationPlayer.play("animation_name") to play the animations stored in the AnimationPlayer node.


Also, I formatted the code in the OP. You can add three ~ enclosing to code or indent everything by a tab to render it as code :smile:

@TwistedTwigleg said: Looking at the code, it looks like you are trying to animate a button, correct? If so, you may want to use a Control-based node for the animation so it can scale with the UI. It's not required by any means, but Node2D nodes don't have some of the anchoring and layout settings that make it scale nicely with different sized displays.

It's not that it's not scaled up, rather that before I hover my mouse over the button, its automatically on the New Anim (the hover-over animation and default 1 being the not-hovering-state) animation and still framed on the first frame of the animation. It doesn't change, even if I put my mouse on and off it again, it will still be stuck on that first frame of the New Anim animation. (And also, whenever I click it, it won't change to the scene that I put it to), so that's my problem, with some extra details that I think I should've explained.