Erhalten Sie Punkte auf einer Linie zwischen zwei Punkten

Ich mache ein einfaches Weltraumspiel in JavaScript, aber jetzt bin ich in Bezug auf Vektoren an eine Wand gestoßen.

Die Spielansicht befindet sich in einem 2D-Raster von oben nach unten. Wenn der Benutzer auf das Raster klickt, fliegt das Raumschiff zu diesem Punkt.

Also, wenn ich zwei Sätze von Punkten habe:

{ x : 100.2, y : 100.6 }; // the ship
{ x : 20.5,  y : 55.95 }; // the clicked coordinates

Wenn die Spielschleife mit 60 Iterationen pro Sekunde tickt und die gewünschte Schiffsgeschwindigkeit 0,05 Punkte pro Tick (3 Punkte pro Sekunde) beträgt, wie berechne ich den neuen Koordinatensatz für das Schiff für jeden Tick der Spielschleife?

ps Ich möchte keine Trägheit oder mehrere Vektoren berücksichtigen, die sich auf das Schiff auswirken. Ich möchte nur, dass das Schiff anhält, was es tut (dh in eine Richtung fliegt) und sich mit statischer Geschwindigkeit zu den angeklickten Koordinaten bewegt.

Im Pseudocode:

speed_per_tick = 0.05
delta_x = x_goal - x_current
delta_y = y_goal - y_current
goal_dist = sqrt( (delta_x * delta_x) + (delta_y * delta_y) )
if (dist > speed_per_tick)
{
    ratio = speed_per_tick / goal_dist
    x_move = ratio * delta_x  
    y_move = ratio * delta_y
    new_x_pos = x_move + x_current  
    new_y_pos = y_move + y_current
}
else
{
    new_x_pos = x_goal 
    new_y_pos = y_goal
}

LERP - Lineare Interpolation

Ich habe diese Antwort vor einigen Tagen für ein ähnliches Problem gegeben, aber jetzt geht es los:

Die lineare Interpolation ist eine Funktion, mit der Sie basierend auf dem Fortschritt eine Zahl zwischen zwei Zahlen erhalten. Sie könnten tatsächlich einen Punkt zwischen zwei Punkten bekommen.

Die große Formel - wie man sie berechnet

Die allgemeine LERP-Formel ist gegeben durch pu = p0 + (p1 - p0) * u. Wo:

• pu: Die Ergebnisnummer
• p0: Die Anfangsnummer
• p1: Die endgültige Nummer
• u: Der Fortschritt. Sie wird in Prozent zwischen 0 und 1 angegeben.

Wie bekomme ich Prozentsatz

Sie fragen sich vielleicht: "Wie kann ich diesen Prozentsatz erhalten?". Mach dir keine Sorgen. Es ist wie folgt: Wie lange dauert es, bis der Startvektor fertig ist? Ok, dividiere es durch die Zeit, die bereits vergangen ist. Dies gibt Ihnen den Prozentsatz.

Schauen Sie, so etwas: percentage = currentTime / finalTime;

Vektoren berechnen

Um einen resultierenden Vektor zu erhalten, müssen Sie die Formel nur zweimal anwenden, einmal für die X-Komponente und einmal für die Y-Komponente. Etwas wie das:

point.x = start.x + (final.x - start.x) * progress;
point.y = start.y + (final.y - start.y) * progress;

Variationszeit berechnen

Vielleicht möchten Sie Ihre Punkte mit einer Geschwindigkeit von 0,5 Punkten fahren lassen, ja? Nehmen wir also an, eine längere Strecke wird in einer längeren Zeit zurückgelegt.

Sie können dies wie folgt tun:

• Holen Sie sich die Distanzlänge Dafür benötigen Sie zwei Dinge. Holen Sie sich den Distanzvektor und transformieren Sie ihn in einen Längenwert.

  distancevec = final - start;
distance = distancevec.length();

Ich hoffe du kennst Vektoren Mathe. Wenn Sie dies nicht tun, können Sie mit dieser Formel eine Vektorlänge berechnen d = sqrt(pow(v.x, 2) + pow(v.y, 2));.

• Holen Sie sich die Zeit, die es dauern wird, und aktualisieren Sie die Endzeit. Dieser ist einfach. Da Sie für jede Zecke eine Länge von 0,5 erhalten möchten, müssen wir nur teilen und ermitteln, wie viele Zecken wir haben.

  finalTime = distance / 0.5f;

Getan.

HINWEIS: Vielleicht ist dies nicht die beabsichtigte Geschwindigkeit für Sie, aber dies ist die richtige. Sie haben also eine lineare Bewegung, auch bei diagonalen Bewegungen. Wenn Sie x + = 0,5f, y + = 0,5f ausführen möchten, lesen Sie ein Vektor-Mathematikbuch und überprüfen Sie Ihre Pläne erneut.

Dies kann erreicht werden, indem die Normalen der Richtung berechnet werden und dann die aktuelle Position über die parametrische Gleichung berechnet wird

newPoint = startPoint + directionVector * velocity * t

Wobei t die Zeit ist, die vergangen ist, seit das Schiff in die gewünschte Richtung gefahren ist. Sie können dies auch per Update über durchführen

newPoint = currentPoint + directionVector * velocity * timeDelta

Und Sie berechnen dies einfach bei jedem Frame / Physik / etc. aktualisieren, bis das Schiff sein Ziel erreicht.