Share
Hier ist ein einfacher Code-Ausschnitt, der sich jederzeit als nützlich erweist: Wie man ein Objekt in einer sanften, fließenden, kontinuierlichen Bewegung von einem Punkt zum anderen bewegt. Wir werden die pythagoreische Distanz und ein wenig Abhilfe nutzen, um zu verhindern, dass die Dinge nervös werden.
Hinweis: Obwohl dieses Tutorial mit JavaScript geschrieben wurde, sollten Sie in der Lage sein, in fast jeder Spieleentwicklungsumgebung dieselben Techniken und Konzepte zu verwenden.
In einigen Spielen möchten Sie möglicherweise einen Charakter an die Position der Maus bewegen. Manchmal möchten Sie dies tun, wenn der Spieler klickt, zu anderen Zeiten möchten Sie, dass sich der Charakter ständig in Richtung der Mausposition bewegt und zur Ruhe kommt, sobald er die gleiche Position wie die Maus erreicht hat. Letzteres machen wir in diesem Tutorial, aber das Anpassen an die Arbeit mit Mausklicks wird trivial sein.
Um das Objekt an die Position der Maus zu verschieben, müssen Sie zunächst wissen, wie weit sich das Objekt von der Maus entfernt befindet.
Dazu verwenden wir die Distanzformel. Dies verwendet den Satz von Pythagoras und wird für Koordinaten wie folgt berechnet (x1, y1) und (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
Mit anderen Worten, Sie quadrieren die Differenz zwischen den x-Koordinaten, quadrieren die Differenz zwischen den y-Koordinaten, addieren die beiden Quadrate zusammen und erhalten die Quadratwurzel der Summe.
Um zu verstehen, wie das funktioniert, habe ich folgendes Bild erstellt.
Im obigen Bild ist der x-Abstand 7 und die y-Entfernung ist 6. Durch die Schritte kommen wir in einem Abstand von ungefähr 9.21.
\ [d = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \\
d = \ sqrt (10-3) ^ 2 + (3-9) ^ 2 \\
d = \ sqrt (7) ^ 2 + (- 6) ^ 2 \\
d = \ sqrt 49 + 36 \\
d = \ sqrt 85 \\
d \ ca.9,21 \]
Um dies im Code zu implementieren, nehmen wir die X- und Y-Koordinaten sowohl unseres Mauszeigers als auch unserer Entität (in diesem Fall ein Raumschiff). Dann wenden wir die Entfernungsformel an und erhöhen oder verringern die Entität x und y Positionen, solange der Abstand größer als 1 ist.
Nachfolgend finden Sie Code, um dies zu veranschaulichen:
Funktion gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; var distance = Math.sqrt (xDistanz * xDistanz + yDistanz * yDistanz); if (Entfernung> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
Ich habe eine Demo erstellt, die all dies in Aktion zeigt:
Sie haben vielleicht bemerkt, dass wir in dem obigen Schritt den Wert multipliziert haben xDistanz und yEntfernung durch eine easingAmount.
Dadurch verlangsamt sich unsere Entität, wenn sie sich ihrem Ziel nähert, anstatt sich bei jedem Tick der Spielschleife um dieselbe Entfernung zu bewegen. Dies ist bekannt als nachlassen.
Passen Sie den Wert von an easingAmount in der jsFiddle der obigen Demo, und sehen Sie, welche Wirkung es hat. Sie können auch mit dem Code innerhalb von experimentieren Tick() Funktion.
Ich habe eine sehr einfache Demo programmiert, um zu zeigen, wie dies auf ein echtes Spiel angewendet werden kann. Experimentieren Sie mit dem Code und sehen Sie, was Sie dazu bringen können!
(Grafiken von Everaldo Coelho, Sneh Roy und unserem eigenen Jacob Zinman-Jeanes.)
In diesem kurzen Quick Tip haben Sie gelernt, wie Sie ein Objekt an die Mausposition verschieben. Prüfen Sie, ob Sie den Code so anpassen können, dass sich die Entität an die letzte Position bewegt, an der der Spieler geklickt hat, und nicht ständig der Maus folgt. Ich hoffe, Sie fanden das nützlich - danke fürs Lesen!
Accentsconagua