Custom Bezier Curve with Ease Issue

cocos2d-x
1

I haven’t been able to find much of anything about creating custom Easing using Cocos-2dx, but I did come across the EaseBezierAction class which has a setBezierParamer method that takes 4 floats to create a bezier curve (from my understanding).

This sounds like what I can use to create a custom Ease, but it seems to have an issue, possibly a bug? When I apply the ease to an action and run it, it acts like only 80% of the curve is being used. For example if I have a curve that extends above 1.0 to say 1.5 and back to 1.0 at the very end, the animation stops around the 1.5 value and never returns to 1.0.

Here is some example code I’m using:

auto scaleAction = ScaleTo::create(time, 1.0f);
  
  EaseBezierAction* customEase = EaseBezierAction::create(scaleAction);
  customEase->setBezierParamer(.55f, -0.58f, .45f, 1.47f);
  
  //auto ease_test = EaseBackOut::create(scaleAction);
  node->runAction(customEase);
  node->runAction(FadeIn::create(time));

With this example code the bezier curve is a sin wave that extends below 0 at the start and above 1 towards the end. It’s interesting because the scale that goes below at the start works fine, its just the scale above 1 towards the end where the animation leaves the scale above 1 and doesn’t return to 1.0…

Has anyone else used this class or seen this issue? Really hoping someone can help me get custom eases figured out.

PS- I’ve been using http://cubic-bezier.com to generate custom bezier curves.

1 Like
2

Looks like there is a bug in the bezier code (or at least the parameter values are poorly named).

the values in http://cubic-bezier.com are the coordinates of the two middle control points (x1, y1, x2, y2).

The values in the cocos version are the y-values (percent of movement) of all four control points (y0, y1, y2, y3).

To get something similar to the the curve you posted try putting into the cocos easing (0, y1, y2, 1) or in your case (0.0, -0.58, 1.47, 1.0) – Note: the 0 and 1 at the beginning and end, this ensures that the movement starts at the current position and ends at the desired end position.

If you are still confused I can go more in depth into the math but let me just warn you its not pretty :grimacing:

1 Like