[SOLVED] Custom Easing Functions: converting from Penner's to Flashpunk

(Helios) #1

So, there are a lot of great resources online for creating or modifying your own easing functions, such as this handy free tool…

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm

but Robert Penner’s formulae use 4 variables, and Flashpunk’s utils.Ease only uses 1 variable, time. Im not exactly sure how he distills the formulae down to one variable or what the tweens are doing behind the scenes, and Id prefer not to have to if I can help it. Is there an easy way to either define your own curves (without understanding the math behind it) or converting one of Penner’s formulae to work with FlashPunk?

TL;DR how do I make this code work in flashpunk?

function(t:Number, b:Number, c:Number, d:Number):Number {
   var ts:Number=(t/=d)*t;
   var tc:Number=ts*t;
   return b+c*(7.6475*tc*ts + -31.0425*ts*ts + 32.195*tc + -7.8*ts);

}

(azrafe7) #2

Actually it’s pretty simple to convert that and make it FlashPunk-ready.

Taking a look at Penner’s paper on tweening here we find that

b -> begin    : set to 0
c -> change   : set to 1 (it's end - begin)
d -> duration : set to 1

So basically use this template (replacing the const with actual values should slightly improve performance):

public static function customEase(t:Number):Number 
{
	// conversion from Penner's format
	// see: http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
	const b:Number = 0;
	const c:Number = 1;
	const d:Number = 1;
	
	// just copy pasted
	// see: http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm
	var ts:Number=(t/=d)*t;
	var tc:Number=ts*t;
	return b + c * (7.6475 * tc * ts + -31.0425 * ts * ts + 32.195 * tc + -7.8 * ts);
}

By the way your custom function is very similar to FlashPunk’s BackInOut one.

demo | code

(Helios) #3

Brilliant. Thanks, azrafe. And yes, good eye! In that example I just wanted some bigger coefficients on the Ease.backInOut function, but I knew in the future I would want to have the freedom of custom easing functions. So, awesome job, mate.

(Zachary Lewis) #4

Just so you know, these forums support drag and drop attaching for .swf files and .as files!