"Cocos2d-x" uses Bezier curves (Bezier) to achieve sprite parabolic motion

Bezier curves in the Cocos2d-x

In Cocos2d-x, the encapsulation class for the Bezier curve movement is Ccbezierto and Ccbezierby.

All two actions need to pass in a parameter, Ccbezierconfig, which is a struct with three fields

1.CCPoint endposition: End point

2.CCPoint controlpoint_1: Control point 1
3.CCPoint controlpoint_2: Control point 2

Two control points will affect the trend of the curve.

The realization of the cocos2d-x curve motion is two times curve.

The coordinates of each point of the curve are computed by equation based on the variable T, start point, end Point, and two control points of a range of 0 to 1.

The starting point is the current position of the sprite, and the end point and two control points are encapsulated by the CCBEZIERCONFIG structure.

two times Curve

Q _{0 and Q 1 as T from 0 to 1:}

• from p _{0 to P 1 continuous point Q 0, describes a linear Bezier curve.}
• P _{1 to P 2 the continuous point Q 1, describing a linear Bezier curve.}
• Q _{0 to Q 1 a continuous point B ( T ) that describes a two-time Bezier curve.}

The structure of quadratic Bezier curves		Quadratic Bezier curve demo animation,t in [0,1] interval

Controlpoint_1 point Q0 in the corresponding graph

Controlpoint_2 point Q1 in the corresponding graph

>> Click to see a more detailed explanation of Bezier curves

Realize

ParabolaTo.h

#ifndef __PARABOLATO_H__
#define __PARABOLATO_H__

#include "cocos2d.h"
USING_NS_CC;

// parabolic motion
class ParabolaTo
{
public:
/ * Create a parabolic action
Parameters:
t time
startPoint start point
endPoint
height (affects the height of the parabola)
angle (the angle between the two control points of the Bezier curve and the y-axis directly affects the throwing angle of the sprite)
* /
static CCEaseInOut * create (float t, CCPoint startPoint, CCPoint endPoint, float height = 0, float angle = 60);
};

#endif //! __ PARABOLATO_H__

ParabolaTo.cpp

#include "ParabolaTo.h"

CCEaseInOut * ParabolaTo :: create (float t, CCPoint startPoint, CCPoint endPoint, float height / * = 0 * /, float angle / * = 60 * /) {

// convert the angle to radians
float radian = angle * 3.14159 / 180.0;
// The first control point is the midpoint of the left half arc of the parabola
float q1x = startPoint.x + (endPoint.x-startPoint.x) /4.0;
CCPoint q1 = ccp (q1x, height + startPoint.y + cos (radian) * q1x);
// The second control point is the midpoint of the entire parabola
float q2x = startPoint.x + (endPoint.x-startPoint.x) /2.0;
CCPoint q2 = ccp (q2x, height + startPoint.y + cos (radian) * q2x);
Ranch
// curve configuration
ccBezierConfig cfg;
cfg.controlPoint_1 = q1;
cfg.controlPoint_2 = q2;
cfg.endPosition = endPoint;
// Use CCEaseInOut to make the curve movement change from slow to fast, it seems more natural
return CCEaseInOut :: create (CCBezierTo :: create (t, cfg), 0.5);
}

Invocation Example:

// Set the position of the sprite
pBall-> setPosition (ccp (50,50));
// parabolic motion
// pBall-> runAction (ParabolaTo :: create (1, pBall-> getPosition (), ccp (450,50), 100));
// add rotation effect
pBall-> runAction (
CCSpawn :: create (
CCRotateBy :: create (1,360),
ParabolaTo :: create (1, pBall-> getPosition (), ccp (450,50), 100)
, NULL)
); 

The following is the movement of the ball (the blue point in the figure is two control points) when the angle is 60, 30, and 80,height 100 respectively.

Angle is the angle between the two control points and the y-axis, which directly affects the throw angle of the ball.

Height affects how high the parabolic line is when the ball moves

Angle measurement tool Download: Http://pan.baidu.com/s/1c0zrnri

Project Address: Https://coding.net/u/linchaolong/p/ParabolaAction/git

"Cocos2d-x" uses Bezier curves (Bezier) to achieve sprite parabolic motion