Visual Cooldown Timers

Soooo… I’ve been playing around with techniques for displaying cooldown timers and this approach worked pretty well!

  1. I extended the ButtonAdapter class and added a new Element with no background, set to ignore the mouse. I’m using it as a clipping layer only.
  2. I set the button image to an instance texture atlas for icon usage.
  3. I set the button icon image to the same as the button image, set it’s clipping layer to the new element I added and apply a desaturate effect to it.
  4. To run the cooldown timer, you add a MoveTo effect to the new element set up as the clipping layer of the button icon.

Here is the final effect:


Here is an example of how to make it work: (simplified)

The extended button adapter…
public abstract class ActionButton extends ButtonAdapter {
Element refreshBounds;

public ActionButton(Screen screen, String UID, Vector2f position, Vector2f dimensions, Vector4f resizeBorders, String defaultImg) {
    super(screen, UID, position, dimensions, resizeBorders, defaultImg);

    refreshBounds = new Element(screen, CoreUtil.getUID(), new Vector2f(0,40), new Vector2f(40,40), Vector4f.ZERO, null);

public Element getRefreshBounds() { return this.refreshBounds; }


Setting up a new ActionButton with the cooldown timer effect…
ActionButton b = new ActionButton(screen, “actionButton”, new Vector2f(50,50), new Vector2f(40,40)) {
public void onButtonMouseLeftUp(MouseButtonEvent evt, boolean isToggled) {
// Move the clipping layer to show the cooldown timer effect
Effect effect = new Effect(Effect.EffectType.MoveTo, Effect.EffectEvent.Press, theRefreshTime);
Effect e1 = effect.clone();
e1.setEffectDestination(new Vector2f(0,40));
// Apply same effect with no change in destination to the icon to update the clipping effect on the icon layer
Effect e2 = effect.clone();
b.setTextureAtlasImage(someTexture, “x=0|y=0|w=40|h=40”);
// Create icon and desaturate it
b.getButtonIcon().setTextureAtlasImage(someTexture “x=0|y=0|w=40|h=40”);
Effect effect = new Effect(Effect.EffectType.Desaturate,Effect.EffectEvent.Press,0.0f);

The icon + desaturate could be part of the ActionButton constructor obviously… I just put the example out here this way to show the steps involved.

1 Like