Wie kann ich eine Rechteckkollisionsreaktion implementieren?

Ich arbeite an einem Spiel in JavaScript und meine aktuelle Implementierung von Kollision verwendet die kürzeste Entfernung, um das sich überschneidende Objekt wegzuschieben, was nicht immer korrekt ist. Ich habe dieses Diagramm der idealen Kollision erstellt. Das rote Kästchen repräsentiert die Startposition, das grüne Kästchen repräsentiert die richtige Position und das schwarze Kästchen repräsentiert das statische Objekt, gegen das es kollidiert. Der blaue Pfeil ist der Geschwindigkeitsvektor. Bei meiner aktuellen Implementierung würde das Objekt in seine endgültige Position gebracht und herausgeschoben (und in diesem Fall würde es nach links geschoben werden).

Wie kann ich das beheben?

Mit den Formeln auf dieser Seite können Sie prozedural herausfinden, wie ein sich bewegender AABB / AABB-Trace erstellt wird.

http://www.realtimerendering.com/intersections.html

Grundsätzlich sagen Ihnen diese Gleichungen, wie viel Prozent Ihrer Bewegung Sie in diesem Rahmen ausführen sollten, damit Sie Ihr Quadrat an der richtigen Stelle platzieren können.

Es gibt einige Möglichkeiten, dies zu tun, aber eine einfache Möglichkeit ist eine binäre Suche über die Zeitachse zwischen dem letzten und dem aktuellen Frame. Angenommen, das letzte Bild ist zum Zeitpunkt t und dieses Bild ist zum Zeitpunkt t + 1. Wenn eine Kollision aufgetreten ist, sichern Sie die Objekte auf t + .5. Wenn immer noch eine Kollision auftritt, versuchen Sie es mit t + .25, wenn nicht, versuchen Sie es mit t + .75. Fahren Sie weiter, bis die Stufen ausreichend klein sind. Führen Sie dann Ihren Test für die kürzeste Entfernung durch. Stellen Sie dann sicher, dass Sie die verbleibende Zeit vorwärts spielen (da Sie eine Sicherungskopie erstellt haben, um den Kollisionspunkt zu finden).

Der Schlüssel ist, so nah wie möglich an diesen Zeitpunkt heranzukommen, da dies Ihnen definitiv sagt, welches Gesicht mit welchem ​​anderen Gesicht kollidierte.