Round button that changes size on click

Godot Version

4.2.2

Question

I’m trying to create a cookie clicker game.
I would like to have the cookie as a clickable round button that

  • shrinks a bit when clicked (towards the center) and
  • becomes a bit darker while clicked.
  • doesn’t react to clicks in the bounding rectangle that are not in the circle

If possible I would like to avoid creating a new texture for the clicked state and simply change the brightness and size of my existing texture.
I’m also not sure whether to use Button vs TextureButton.

What would be the Godot way to do this?

Godot doesn’t have a round button, and for something like cookie clicker you don’t need all the functionality either from Control class. I think the easiest way to approach this is by using Sprite2D as the graphics for the button and Area2D to detect mouse clicks.
So add those nodes and an AnimationPlayer to make your animations:
kuva
Now you can design and test your animations (animate scale and modulate to achieve the effects you described). I named my animations as “pressed” and “released”.

Add a script to the Sprite2D:

extends Sprite2D

var is_mouse_within = false
var is_button_pressed = false

func _on_area_2d_mouse_entered() -> void:
	is_mouse_within = true

func _on_area_2d_mouse_exited() -> void:
	is_mouse_within = false

func _input(event: InputEvent) -> void:
	if event is InputEventMouseButton:
		if event.pressed and is_mouse_within:
			$AnimationPlayer.play("pressed")
			is_button_pressed = true
		if not event.pressed and is_button_pressed:
			$AnimationPlayer.play("released")
			is_button_pressed = false

Connect the signals _on_area_2d_mouse_entered and _on_area_2d_mouse_exited from Area2D’s Node tab (on the inspector panel).

Enjoy!
button

2 Likes