How to implement curved movement while tracking the appropriate angle?

Question

I'm currently coding a 2D top-down car game which will be turn-based. And since it's turn-based, the cars won't be controlled directly (i.e. with a simple velocity vector that adjusts its angle when the player wants to turn), but instead it's movement path has to be planned beforehand, and then the car needs to follow the path when the turn ends (think Steambirds).

This question has some interesting information, but its focus is on homing-missile behaviour, which I kinda had figured out, but doesn't really apply to my case, I think, since I need to show a preview of the path when the player is planning his turn, then have the car follow that path. In that same question, there's an excellent answer by Andrew Russel which mentions Equations of Motion and Bézier's Curve. Some of his other suggestions of implementation are specific to XNA though, so they don't help much (I'm using Marmalade SDK).

If I assume Bézier's Curve as the solution of choice, I'm left with one specific problem: I'll have the car's position (the first endpoint) and the target/final position (the last endpoint), but what should I use as the control point (assuming a square/quadratic curve)?

And whether I use Bézier's Curve or another parametric equation, I'd still be left with another issue: the car can't just follow the curve, it must turn (i.e. adjust its angle) accordingly. So how can I figure out which way the car should be pointing to at any given point in the curve?

Answer 1

My answer will cover the following topics:

• How to form a suitable Bezier curve for turning a character or a car smoothly.
• How to maintain the same speed across the curve.
• How to change the angle smoothly during motion.

This is suitable for any character in any 2d game with a top down view and with minor adjustments could be used for 3d games as well.

Some images for intuition:

Top down overview

Waypoints

Move the car in a linear path(straight line) from the bottom to the 'Start' point. Now use a Bezier to get the car to the 'End' point through the 'Control' point. Use another linear path moving straight from the 'End' to the last point on the left.

The resulting path

Intro:

Quadratic Bezier function:

q(t) = (1-t) * ((1-t) * start + t * control) + t * ((1-t) * continue + t * end) =
(1-t) * (1-t) * start + t * t * end + (1-t) * t * control + t * (1-t) * control =
(t^2 - 2t + 1) * start + t^2 * end + 2 * t * (1 - t) * control = 

You know the starting point(when you begin to turn) and the end point(when you are done turning and continue normally).

Creating a suitable Bezier:

To calculate the control point, use the x-value of the point that is directly bellow or above the turning point and the y-value of the point directly to the left or right of the turning point.

If the roads do not form a straight angle, simple draw an imaginary line through both roads and use the intersection as the control point. You can take a smoother turn if you pull the start & end points away from the control point.

Finding out the correct angle:

Break the curve into 10 - 100 waypoints depending on the length of the turn, the car should always point towards the next waypoint.

To do this, pick a step size:

stepSize = 0.01;

We start in the begining of the curve.

lastPoint = 0;
lastPointPos = q(lastPoint);

We move towards the next waypoint on the curve.

nextPoint = lastPoint + stepSize;
nextPointPos = q(nextPoint);

And the angle is the one between these two points:

angle = Math.atan2(nextPointPos.y - lastPointPos.y, nextPointPos.x, lastPointPos.x);

this link explains what Math.atan2 means:

http://msdn.microsoft.com/en-us/library/system.math.atan2.aspx

How to maintain your desired speed through the curve:

//Calculate how much the car can move this frame
moveAmount = carSpeed * deltaTime;
//Calculate distance from next waypoint on the Bezier Curve
distance = sqrt((car.x - nextPointPos.x)^2 + (car.y - nextPointPos.y));
While(moveAmount > 0)
//If it is close enough, move the car there and subtract the distance from the amount you can move during this frame
if(distance < moveAmount)
{
    moveAmount -= distance;

    lastPoint = nextPoint;
    lastPointPos = q(lastPoint);

    nextPoint += stepSize;
    mextPointPos = q(nextPoint);
}
//Otherwise move as much as you can towards the destination
else
{
    car.x += moveAmount * Math.cos(angle);
    car.y += moveAmount * Math.sin(angle);
    moveAmount = 0;
}