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:

[video]http://youtu.be/y1JaqRR9o90[/video]

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

The extended button adapter…
[java]
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);
    setFontSize(16);

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

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

}
[/java]

Setting up a new ActionButton with the cooldown timer effect…
[java]
ActionButton b = new ActionButton(screen, “actionButton”, new Vector2f(50,50), new Vector2f(40,40)) {
@Override
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.setElement(getRefreshBounds());
e1.setEffectDestination(new Vector2f(0,40));
getRefreshBounds().setPosition(0,0);
screen.getEffectManager().applyEffect(e1);
// Apply same effect with no change in destination to the icon to update the clipping effect on the icon layer
Effect e2 = effect.clone();
e2.setEffectDestination(Vector2f.ZERO);
e2.setElement(getButtonIcon());
screen.getEffectManager().applyEffect(e2);
}
};
b.setTextureAtlasImage(someTexture, “x=0|y=0|w=40|h=40”);
// Create icon and desaturate it
b.setButtonIcon(40,40,null);
b.getButtonIcon().setTextureAtlasImage(someTexture “x=0|y=0|w=40|h=40”);
b.getButtonIcon().setClippingLayer(b.getRefreshBounds());
Effect effect = new Effect(Effect.EffectType.Desaturate,Effect.EffectEvent.Press,0.0f);
effect.setElement(b.getButtonIcon());
screen.getEffectManager().applyEffect(effect);
[/java]

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