How can I control "Elasticity" on a tween?

[totallybueno]

Hi there,

I´m trying to find something about this but... not working. Anyway, I have two tweens on my game and I need to do that with Phaser.Easing.Elastic.InOut

 

Everything is cool, the only problem is that the "elasticity" is tooo much, I want the animation being elastic but not so much, how can I control that? I don´t know how to use the "example" in the documentation...

 

InOut(k) → {number}

 

Thanks in advance mates!

[Sunburned Goose]

http://www.gizma.com/easing/ <- Has Functions

http://easings.net/

 

Couple of sites to see if a different formula can help.  Otherwise, you'll have to modify the math that is generating the easing functions to change the elasticity.

[totallybueno]

Thanks Sunburned Goose (I fucking love your nickname!), but I already knew what I need to use, or what formula I needed to use, the problem is that I want to know, for example in Easing.Bounce.Out how to control that "bounce"... if I can control that movement with the framework, I prefer that before modify de code

[george]

Hi jorgeenriquezm,

Sunburned Goose is right. You have to care about the function. Phaser doesn't expose any settings to modify the easing. You can clearly see this in the source. Look at src/tween/Easing.js. There you find all the tweening functions available. Neither of the functions accept anything else than the value of the elapsed time k. All of those functions will generate a value independent from a particular property. The real values are calculated later in the code with interpolation. Why I'm telling you this? You shouldn't be confused when you look at other tweening functions. Many of them will have more than one parameter, as they do the interpolation of a value inside the easing I guess. Just compare some existing easings of let's say jquery or tweenmax with the functions defined in phaser and you should be able to create your own on the base of what you find during you research.

 

Your options: 

1. Fork the bounce function of phaser and directly modify the parameters- trial and error. Do not try to understand the equation if you're not interested. You will end up in having your own easing function which you can pass to a tween. This is absolutely valid!

 

2. Create your very own equation. Search for a equation builder. I'm sure I've used one in some flash projects years ago, so there must be something for JS

 

Here your mentioned bounce easing in three different versions. You can see, they are identical at the core.

//from phaser//https://github.com/photonstorm/phaser/blob/master/src/tween/Easing.jsOut: function ( k ) {    if ( k < ( 1 / 2.75 ) ) {        return 7.5625 * k * k;    } else if ( k < ( 2 / 2.75 ) ) {        return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;    } else if ( k < ( 2.5 / 2.75 ) ) {        return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;    } else {        return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;    }},//from tweenmax//https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/easing/EasePack.jsif (p < 1 / 2.75) {  return 7.5625 * p * p;} else if (p < 2 / 2.75) {  return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;} else if (p < 2.5 / 2.75) {  return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;}return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;//from jqueryeaseOutBounce: function (x, t, b, c, d) {  if ((t/=d) < (1/2.75)) {    return c*(7.5625*t*t) + b;  } else if (t < (2/2.75)) {    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  } else if (t < (2.5/2.75)) {    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  } else {    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  }}

Regards

George

[Sunburned Goose]

I have a similar problem where I'm trying to make an easing function that will bind to a moving sprite.  The function needs to have a dynamic end point since the sprite is moving, and it needs to end at the same velocity as the sprite so the camera doesn't suddenly change speed.

 

Here's my example

 

http://pgl.tiedtheleader.com

 

Move the ship to the lower right, through the gravity well of the planet (blue aura).  The camera will tween from the ship to the planet, and then when you leave the aura, it tweens from the planet to the ship.

[george]

Some problems with your example

+ The code of your example is minified

+ I have to work 'hard' to get the problem you're talking about just for a second- then I have do maneuver the ship again and again and again.

 

The next time you should open a separate issue for a new answer and prepare some isolated test code so everybody can focus on your problem. This will improve your chances to get an answer for every question.

 

Regarding your question: Phaser tweening with a dynamic endpoint won't work. Phaser's tweening engine is limited. You should use TweenMax or similiar to get more tweening features. Look if TweenMax supports the function #updateTo in the JS version. With this you can change the target values during a tween. See http://www.greensock.com/as/docs/tween/com/greensock/TweenMax.html#updateTo()

 

I would use a simple linear approach during your update loop. Something like this. 

//(the higher the longer the movement)x+= (targetX - currentX)/10y+= (targetY - currentY)/10

But I can't tell if this is your solution as I won't read you minified code nor fully understand your question without doing so.

Have fun.

[totallybueno]

Thanks guys, obviously the easiest option it´s gonna be to modify those equations, at least for this game... I won´t try to understand them george, exactly in the same way that I don´t try to understand them when I use them normally 

 

At least this helped me to see that it wasn´t a crazy idea to modify those .js

 

THANKS.

[george]

But do not modify the source files itself. This is considered a capital sin!! You never change a library you're using. You would create a mess with further updates of that library. Just create a new class, take the phaser class as an example. But please do not simply modify the source good luck

[totallybueno]

Hahaha, well, my bad, but I was talking about that

[Sunburned Goose]

Thanks George.  I'll have to look at TweenMax.  btw, I didn't mean to drop my problem on Jorge's thread.  Just giving a similar example of a developer trying to modifying a tween, not so much a coding exercise  Still, worked out as I get to look at TweenMax now.

[Sunburned Goose]

btw, looks like the function exists:

 

https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L52

[totallybueno]

Thanks Sunburned Goose, pretty interesting