Making sexy effects for in game buttons.

Game Mechanics
#1

Hey guys, so I’m currently in the process of making a new set of menus for one of my games, and I want to have it so that there is a sort of “bloom” effect when you hover over buttons. Anyone got any ideas of how I could do this?

I’m using Slick2D.

What I thought might be an option is to create the normal button and the bloomed button in Paint.NET or whatever, and then make it so when the mouse enters the area of the button, it blooms. The only issue is that it’s not a smooth transition, it’s just BAM! Bloom. How could I transition it nicely.

#2

Fade in/out the bloom overlay, ideally using easing.

#3

for all this easing stuff, take a look at the Tween-Engine at http://www.aurelienribon.com/blog/

#4

If you’re looking for something slimmer and more minimal than TweenEngine, you can use my Easing class – essentially just a port of Robert Penner’s easing equations.
https://github.com/mattdesl/slim/blob/master/slim/src/slim/easing/Easing.java

Very simple usage:

protected float animate(float time, float start, float end, float duration, Easing easing) {
	if (time > duration) 
		return end;
	float change = end-start;
	return easing.ease(time, start, change, duration);
}

//... to animate something going left to right
public void update(GameContainer c, int delta) {
	elapsedTime += delta;

	//elapsed time, start value, end value, duration in ms, type of easing 
	mySprite.x = animate(elapsedTime, 5, 450, 1500, Easing.QUAD_OUT);
}

For a more practical usage, you could do something like this.

#5

On a side note, the tween engine can also do that :stuck_out_tongue:


float value = TweenEquations.easeInQuad.compute(elapsedTime/duration); // value is [0..1]
mySprite.setX(value*(end-start)+start);

See this for a list of all equations.

#6

I have one too! :stuck_out_tongue:
https://code.google.com/p/libgdx/source/browse/trunk/gdx/src/com/badlogic/gdx/math/Interpolation.java