Wie erreicht man eine gleichmäßige Bewegungsgeschwindigkeit auf einer Bézierkurve?

Ich versuche, ein Bild entlang der Bezier-Kurve zu verschieben. So mache ich es:

- (void)startFly
{    
 [self runAction:[CCSequence actions:
             [CCBezierBy actionWithDuration:timeFlying bezier:[self getPathWithDirection:currentDirection]],
             [CCCallFuncN actionWithTarget:self selector:@selector(endFly)],
             nil]];

}

Mein Problem ist, dass sich das Bild nicht gleichmäßig bewegt. Am Anfang bewegt es sich langsam und dann beschleunigt es sich allmählich und am Ende bewegt es sich sehr schnell. Was soll ich tun, um diese Beschleunigung loszuwerden?

Es ist möglich, eine Lösung für dieses Problem für die meisten parametrischen Trajektorien zu finden. Die Idee ist die folgende: Wenn Sie eine Kurve stark genug zoomen, können Sie die Kurve selbst nicht an der Tangente an diesem Punkt erkennen.

Wenn Sie diese Annahme treffen, müssen Sie nicht mehr als zwei Vektoren vorberechnen (drei für kubische Bézier-Kurven, usw. ).

Also berechnen wir für eine Kurve ihren Tangentenvektor am Punkt . Die Norm dieses Vektors ist und daher kann die für eine Dauer als . Daraus folgt, dass eine Strecke für eine Dauer$M(t)$$\frac{dM}{dt}$$t$$\lVert \frac{dM}{dT} \rVert$$\Delta t$$\lVert \frac{dM}{dT} \rVert \Delta t$$L$$L \div \lVert \frac{dM}{dT} \rVert$ .

Anwendung: quadratische Bezierkurve

Wenn die Kontrollpunkte der Bezier-Kurve , und$A$$B$$C$ , kann die Flugbahn folgendermaßen ausgedrückt werden:

$$\begin{align} M(t) &= (1-t)^2A + 2t(1-t)B + t^2C \\ &= t^2(A - 2B + C) + t(-2A + 2B) + A \end{align}$$

Die Ableitung lautet also:

$$\frac{dM}{dt} = t(2A - 4B + 2C) + (-2A + 2B)$$

Sie müssen nur die Vektoren und irgendwo . Dann, für ein gegebenes , wenn Sie eine Länge vorrücken möchten , tun Sie:$\vec v_1 = 2A - 4B + 2C$$\vec v_2 = -2A + 2B$$t$$L$

$$t = t + {L \over length(t \cdot \vec v_1 + \vec v_2)}$$

Kubische Bezierkurven

Die gleiche Überlegung gilt für eine Kurve mit vier Kontrollpunkten , , und :$A$$B$$C$$D$

$$\begin{align} M(t) &= (1-t)^3A + 3t(1-t)^2B + 3t^2(1-t)C + t^3D \\ &= t^3(-A + 3B - 3C + D) + t^2(3A - 6B + 3C) + t(-3A + 3B) + A \end{align}$$

Die Ableitung ist:

$$\frac{dM}{dt} = t^2(-3A + 9B - 9C + 3D) + t(6A - 12B + 6C) + (-3A + 3B)$$

Wir berechnen die drei Vektoren vor:

$$\begin{align} \vec v_1 &= -3A + 9B - 9C + 3D \\ \vec v_2 &= 6A - 12B + 6C \\ \vec v_3 &= -3A + 3B \end{align}$$

und die endgültige Formel lautet:

$$t = t + {L \over length(t^2 \cdot \vec v_1 + t \cdot \vec v_2 + \vec v_3)}$$

Genauigkeitsprobleme

Wenn Sie mit einer vernünftigen Framerate laufen,$L$ (das entsprechend der Bilddauer berechnet werden sollte) ausreichend klein, damit die Approximation funktioniert.

In extremen Fällen können jedoch Ungenauigkeiten auftreten. Wenn zu groß ist, können Sie die Berechnung stückweise ausführen, beispielsweise mit 10 Teilen:$L$

for (int i = 0; i < 10; i++)
    t = t + (L / 10) / length(t * v1 + v2);

Sie müssen die Kurve neu parametrisieren. Der einfachste Weg, dies zu tun, besteht darin, die Bogenlängen mehrerer Kurvensegmente zu berechnen und diese zu verwenden, um herauszufinden, wo Sie abtasten sollten. Zum Beispiel sollten Sie bei t = 0,5 (auf halber Strecke) s = 0,7 an die Kurve übergeben, um die Position "auf halber Strecke" zu erhalten. Dazu müssen Sie eine Liste der Bogenlängen verschiedener Kurvensegmente speichern.

Es gibt wahrscheinlich bessere Möglichkeiten, aber hier ist ein sehr einfacher C # -Code, den ich geschrieben habe, um dies in meinem Spiel zu tun. Es sollte einfach sein, auf Ziel C zu portieren:

public sealed class CurveMap<TCurve> where TCurve : struct, ICurve
{
    private readonly float[] _arcLengths;
    private readonly float _ratio;
    public float length { get; private set; }
    public TCurve curve { get; private set; }
    public bool isSet { get { return !length.isNaN(); } }
    public int resolution { get { return _arcLengths.Length; } }

    public CurveMap(int resolution)
    {
        _arcLengths = new float[resolution];
        _ratio = 1f / resolution;
        length = float.NaN;
    }

    public void set(TCurve c)
    {
        curve = c;
        Vector2 o = c.sample(0);
        float ox = o.X;
        float oy = o.Y;
        float clen = 0;
        int nSamples = _arcLengths.Length;
        for(int i = 0; i < nSamples; i++)
        {
            float t = (i + 1) * _ratio;
            Vector2 p = c.sample(t);
            float dx = ox - p.X;
            float dy = oy - p.Y;
            clen += (dx * dx + dy * dy).sqrt();
            _arcLengths[i] = clen;
            ox = p.X;
            oy = p.Y;
        }
        length = clen;
    }

    public Vector2 sample(float u)
    {
        if(u <= 0) return curve.sample(0);
        if(u >= 1) return curve.sample(1);

        int index = 0;
        int low = 0;
        int high = resolution - 1;
        float target = u * length;
        float found = float.NaN;

        // Binary search to find largest value <= target
        while(low < high)
        {
            index = (low + high) / 2;
            found = _arcLengths[index];
            if (found < target)
                low = index + 1;
            else
                high = index;
        }

        // If the value we found is greater than the target value, retreat
        if (found > target)
            index--;

        if(index < 0) return curve.sample(0);
        if(index >= resolution - 1) return curve.sample(1);

        // Linear interpolation for index
        float min = _arcLengths[index];
        float max = _arcLengths[index + 1];
        Debug.Assert(min <= target && max >= target);
        float interp = (target - min) / (max - min);
        Debug.Assert(interp >= 0 && interp <= 1);
        return curve.sample((index + interp + 1) * _ratio);
    }
}

Bearbeiten: Es ist erwähnenswert, dass dies nicht die exakte Bogenlänge ergibt, da es unmöglich ist, die Bogenlänge einer kubischen Kurve zu erhalten. Dies ist lediglich eine Schätzung der Länge der verschiedenen Segmente. Abhängig von der Länge der Kurve müssen Sie möglicherweise die Auflösung erhöhen, um zu verhindern, dass sich die Geschwindigkeit ändert, wenn ein neues Segment erreicht wird. Normalerweise benutze ich ~ 100, womit ich noch nie ein Problem hatte.

Eine sehr leichte Lösung besteht darin, die Geschwindigkeit zu approximieren, anstatt die Kurve zu approximieren. Tatsächlich ist dieser Ansatz unabhängig von der Kurvenfunktion und ermöglicht es Ihnen, eine beliebige exakte Kurve zu verwenden, anstatt Ableitungen oder Näherungen zu verwenden.

Hier ist der Code für C # Unity 3D:

public float speed; // target linear speed

// determine an initial value by checking where speedFactor converges
float speedFactor = speed / 10; 

float targetStepSize = speed / 60f; // divide by fixedUpdate frame rate
float lastStepSize;

void Update ()
{   
    // Take a note of your previous position.
    Vector3 previousPosition = transform.position;

    // Advance on the curve to the next t;
    transform.position = BezierOrOtherCurveFunction(p0, p1, ..., t);

    // Measure your movement length
    lastStepSize = Vector3.Magnitude(transform.position - previousPosition);

    // Accelerate or decelerate according to your latest step size.
    if (lastStepSize < targetStepSize) 
    {
        speedFactor *= 1.1f;
    }
    else
    {
        speedFactor *= 0.9f;
    }

    t += speedFactor * Time.deltaTime;
}

Obwohl die Lösung unabhängig von der Kurvenfunktion ist, wollte ich sie hier notieren, da ich auch nach Möglichkeiten gesucht habe, eine konstante Geschwindigkeit auf einer Bézier-Kurve zu erzielen, und dann habe ich diese Lösung gefunden. In Anbetracht der Popularität der Funktion kann dies hier hilfreich sein.

Ich weiß nichts über cocos2, aber eine Bezierkurve ist eine Art parametrische Gleichung, sodass Sie in der Lage sein sollten, Ihre x- und y-Werte in Bezug auf die Zeit zu erhalten.