Timed Click Bar in Godot


This project demonstrates how to use animations to define the time in which a click in a quick time event is considered successful.

The following article is just a short explanation of the project. For details check out the project files.


1. The scene

The scene of the click bar consists of a TextureButton as the root node, a Sprite for the arrow and an AnimationPlayer that moves the arrow over the TextureButton.

2. The code

In order to know in the code when the arrow is over the target area I added a variable called "pointer_is_over_target" to the script and exported it as a bool so that it shows up in the inspector and can be set to true or false using the graphical UI.

3. The animation

Now all I need to do is add a new animation track that sets the variable to true at the point in time where the arrow starts moving over the target and to false when it leaves the target area.

4. Usage example

If you open up the Game scene you'll find an example how to use the TimedClickBar. The bar behaves just like a TextureButton, but it has one additional signal: "timed_click", which passes the parameter "success". This parameter is true if the click occurred while the arrow was over the target and false if it wasn't. So in this example it's being used to show or hide two images, one of which should be visible if the player won the minigame, the other one when he lost it.