Freie Bewegung in einem kachelbasierten isometrischen Spiel

Gibt es eine vernünftige einfache Möglichkeit, die Freizügigkeit in einem kachelbasierten isometrischen Spiel zu implementieren? Dies bedeutet, dass der Spieler nicht sofort von einem Plättchen zum anderen springt oder nicht am Raster "eingerastet" wird (zum Beispiel, wenn die Bewegung zwischen den Plättchen animiert wäre, Sie aber vor Abschluss der Animation daran gehindert wären, etwas zu tun). Ich bin ein Anfänger in Sachen Spielprogrammierung, aber mit Hilfe dieser Seite und einiger anderer Ressourcen war es ziemlich einfach, die grundlegenden Dinge zu erledigen, aber ich konnte keine nützlichen Ressourcen für dieses spezielle Problem finden .

Derzeit habe ich etwas in der Nähe davon improvisiert: http://jsfiddle.net/KwW5b/4/ (WASD-Bewegung). Die Idee für die Bewegung war, mithilfe der Mauskarte zu erkennen, wann der Spieler zu einem anderen Plättchen gewechselt ist, und dann die Offsets umzudrehen. Zum größten Teil funktioniert es korrekt (jede Ecke bringt den Spieler dazu, sich an einen falschen Ort zu bewegen: siehe http: //www.youtube.com/watch?v=0xr15IaOhrI , was wahrscheinlich daran liegt, dass ich die vollständige Mauskarte nicht richtig zum Laufen bringen konnte), aber ich habe keine Illusionen, dass es sogar einer guten / vernünftigen Lösung nahe kommt. Außerdem geht es meistens nur darum zu demonstrieren, was für eine Sache ich implementieren möchte.

html5 movement isometric html-canvas xtr486
quelle

Dieser Code sieht gut aus, was genau ist das Problem? Sie sind ziemlich bescheiden (auf gute Weise), Ihr Code scheint ziemlich gut zu sein. Welche Funktion fehlt in der Demo?

AturSams

Was ich mit den Eckproblemen meinte, war diese Art von Verhalten: youtube.com/watch?v=0xr15IaOhrI . Ich konnte keine andere Lösung finden, als viele If-Checks für die problematischen Offsets durchzuführen, und selbst dann gibt es einige Sonderfälle, in denen sich der Spieler an einen falschen Ort verzieht. Aber wie gesagt, ich habe mich gefragt, wie diese Art von Bewegung normalerweise implementiert wird, da ich die Methode, die ich mir ausgedacht habe, nirgendwo anders gesehen habe.

xtr486

Antworten:

Zunächst schlage ich vor, dass Sie die Richtung ändern von: W - oben links S - unten rechts A - unten links D - oben rechts

intuitiver: W - hoch S - runter A - links D - rechts

In Bezug auf Ihr Anliegen schlage ich vor, dass Sie zwei Funktionen ausführen, von denen eine isometrische Kachelkoordinaten in Gitterkoordinaten übersetzt und die andere umgekehrt. Auf diese Weise könnten Sie MVC einfach trennen und es würde Ihnen das Leben erleichtern, wenn Sie aktive Kacheln berechnen: Geben Sie hier die Bildbeschreibung ein

Markus von Broady
quelle

Ihre Antwort sieht wirklich vielversprechend aus, aber ich gebe zu, dass ein Großteil davon nur über meinen Kopf geht. Ich werde jedoch versuchen, Ihre Lösung in den nächsten Tagen weiter zu verdauen. Ist das irgendwo in der Nähe von dem, wonach Sie gesucht haben? jsfiddle.net/Sd4ZP/18 Es gibt einige logische Fehler (um eins usw.) und so weiter, aber soweit ich weiß, haben die Top-Down- und isometrischen Karten die gleiche Bewegung. Was ich noch nicht einmal verstanden habe, ist, wie man den

Kachelversatz

Das sieht soweit gut aus! Ich werde es am Abend untersuchen. Die Sache ist, Transformationen in der Methode zum Zeichnen isometrischer Kacheln in die Übersetzungsfunktion positionToUser () anzuwenden und sie in der Methode positionFromUser () umzukehren.

Markus von Broady

Ich sehe das Problem: Sie zeichnen eine izometrische Ansicht, indem Sie Bilder anstelle der Canvas-Zeichen-API einfügen. Es ist ziemlich logisch, denn am Ende werden Ihre Izo-Fliesen viel mehr als einfarbig sein. Zum Debuggen sollten Sie jedoch auch Linien zwischen den Kacheln ziehen, um Ihr Leben zu erleichtern. Wie auch immer, ich habe Ihren Code gegabelt und die Übersetzungsfunktion positionToUser (x, y) erstellt. Testen Sie es, indem Sie das schwarze Quadrat auf einer Kachel zentrieren (da es in der ISO-Ansicht immer zentriert ist) und die Maus über die untere Leinwand bewegen - ein übersetzter Punkt wird auf der izo-Leinwand angezeigt

Markus von Broady

Vielen Dank! Ich habe es tatsächlich geschafft, selbst etwas abzuleiten, nämlich den isometrischen Versatz in der drawIsometric-Funktion. Jetzt sieht es so aus: jsfiddle.net/P2eKF/4 , das genau das zu tun scheint, was ich in der ursprünglichen Frage gestellt habe, also werde ich Ihre Antwort markieren. :)

xtr486

Ich bin froh, dass du es getan hast! Mir gefällt, wie WA-, WD-, AS- und SD-Tastenkombinationen die Bewegung auf isometrische Achsen anstatt auf 45-Grad-Winkel ausrichten. Gute Arbeit.

Markus von Broady

Wenn ich das verstehe, soll der Spieler von Kachel zu Kachel gehen, aber ohne zu springen. Sie können:

1- Beginnen Sie mit Kachel t0 und versetzen Sie 0

2- Wenn der Spieler zum Plättchen t1 wechselt, setze den Versatz = - (t1 - t0)

3- Wenn bei der Player-Aktualisierung der Offset nicht 0 ist, verringern Sie die Aktualisierungszeit und die Player-Geschwindigkeit.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Sie können die Offset == 0-Prüfung verwenden, um festzustellen, wann sich der Spieler auf dem Plättchen befindet.

Damit erhältst du einen Spieler, der sich frei auf der Karte bewegt, sich aber an die Kacheln hält.

Zhen
quelle