Wie man eine Figur zum Springen bringt und nicht durch Wände fällt: die ganze Wahrheit über die Spielphysik

Wenn wir unsere Lieblingsspiele spielen, denken wir selten darüber nach, was hinter der fließenden Bewegung der Figur, den realistischen Sprüngen oder Kollisionen mit Hindernissen steckt. Hinter all dem verbirgt sich die faszinierende Welt der Spielphysik – ein vereinfachtes Modell der realen Welt, das Programmierer mit Hilfe von Mathematik und Code erstellen.

Grundlagen der Bewegung: Geschwindigkeit und Position

Jede Bewegung im Spiel basiert auf zwei einfachen Konzepten: der Position des Objekts und seiner Geschwindigkeit. Stellen Sie sich vor, dass Ihr Charakter auf dem Bildschirm X- und Y-Koordinaten hat. Bei jedem Frame des Spiels (normalerweise 60 Mal pro Sekunde) aktualisieren wir diese Koordinaten und fügen ihnen den Geschwindigkeitswert hinzu.

// Die einfachste Bewegung
player.x += player.velocityX;
player.y += player.velocityY;

Aber in echten Spielen ist alles etwas komplizierter. Wir müssen die Zeit zwischen den Frames (deltaTime) berücksichtigen, damit die Bewegung unabhängig von der Leistung des Computers flüssig ist:

player.x += player.velocityX * deltaTime;
player.y += player.velocityY * deltaTime;

Wenn das Spiel jetzt mit 30 oder 120 FPS läuft, bewegt sich der Charakter in Echtzeit mit der gleichen Geschwindigkeit.

Schwerkraft: Was alles fallen lässt

Die Schwerkraft in Spielen ist eine konstante Beschleunigung nach unten. In jedem Frame addieren wir einen kleinen Wert zur vertikalen Geschwindigkeit des Objekts, wodurch der Effekt des Fallens entsteht:

const GRAVITY = 0.5;

// In jedem Bild
player.velocityY += GRAVITY;
player.y += player.velocityY;

// Wir prüfen, ob die Figur auf den Boden gefallen ist
if (player.y >= ground.y) {
    player.y = ground.y;
    player.velocityY = 0;
    player.isOnGround = true;
}

Interessanterweise ist die Schwerkraft in den meisten Spielen viel stärker als die tatsächliche physische. Dies macht das Gameplay dynamischer und reaktionsschneller. Mario zum Beispiel fällt viermal schneller, als es in der Realität der Fall wäre!

Springen: Impuls und Kontrolle in der Luft

Ein Sprung ist einfach eine sofortige Änderung der vertikalen Geschwindigkeit in die negative Richtung (nach oben). Wenn der Spieler auf die Sprungtaste drückt, setzen wir velocityY auf einen negativen Wert, und die Schwerkraft verlangsamt allmählich den Aufstieg, dreht die Figur um und lässt sie zurückfallen.

function jump() {
    if (player.isOnGround) {
        player.velocityY = -12; // Sprungkraft
        player.isOnGround = false;
    }
}

Aber ein einfacher Sprung kann „holzig“ erscheinen. Gute Plattformspiele verwenden zusätzliche Techniken: Sprung mit variabler Höhe (je länger du die Taste gedrückt hältst, desto höher springst du), „Kojotenzeit“ (du kannst noch einen Bruchteil einer Sekunde springen, nachdem du die Plattform verlassen hast) und Luftkontrolle (eine kleine Möglichkeit, den Charakter während des Fluges zu steuern).

// Sprung aus variabler Höhe
function updateJump() {
    if (!jumpButtonHeld && player.velocityY < 0) {
        player.velocityY *= 0.5; // Wir stoppen den Aufstieg schneller
    }
}

Kollisionen: Wie Objekte eine Kollision erkennen

Kollisionen sind eine Überprüfung, ob sich zwei Objekte im Raum überschneiden. Der einfachste Weg ist die Verwendung von Begrenzungsrahmen (bounding boxes). Zwei Rechtecke überschneiden sich, wenn sich ihre Seiten überlappen:

function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

Aber eine Kollision zu erkennen, ist nur die halbe Miete. Man muss auch richtig darauf reagieren. Dies wird als Kollisionsauflösung bezeichnet. Der einfachste Weg ist, das Objekt zurückzuziehen, damit es das Hindernis nicht schneidet:

if (checkCollision(player, wall)) {
    // Wir bestimmen, auf welcher Seite die Kollision aufgetreten ist
    const overlapX = Math.min(
        player.x + player.width - wall.x,
        wall.x + wall.width - player.x
    );
    const overlapY = Math.min(
        player.y + player.height - wall.y,
        wall.y + wall.height - player.y
    );
    
    // Wir stoßen entlang der Achse mit weniger Überlappung ab
    if (overlapX < overlapY) {
        player.x += player.velocityX > 0 ? -overlapX : overlapX;
        player.velocityX = 0;
    } else {
        player.y += player.velocityY > 0 ? -overlapY : overlapY;
        player.velocityY = 0;
    }
}

Fortgeschrittene Konzepte

Wenn Sie die grundlegende Physik beherrschen, eröffnet sich Ihnen eine Welt voller Möglichkeiten. Sie können Reibung hinzufügen, die Objekte mit der Zeit verlangsamt. Man kann elastische Kollisionen realisieren, bei denen Objekte unter Berücksichtigung ihrer Masse und Geschwindigkeit voneinander abprallen. Sie können ein Partikelsystem für Effekte wie Rauch, Funken oder Wasserspritzer erstellen.

Viele moderne Engines bieten vorgefertigte Physik-Engines: Unity verwendet PhysX, Godot hat eine eingebaute Physik-Engine und für die Webentwicklung gibt es Matter.js und Cannon.js. Aber das Verständnis der Grundprinzipien hilft Ihnen, diese Tools effektiv zu nutzen und nicht standardmäßige Probleme zu lösen.

Praktische Tipps

Fangen Sie mit etwas Einfachem an: Erstellen Sie ein Quadrat, das fällt und springen kann. Fügen Sie dann Plattformen und Kollisionen hinzu. Experimentieren Sie mit Konstanten - ändern Sie die Schwerkraft, die Sprunghöhe, die Bewegungsgeschwindigkeit. Sie werden überrascht sein, wie sehr kleine Änderungen das Spielgefühl beeinflussen.

Die Spielphysik muss nicht realistisch sein - sie muss lustig und vorhersehbar sein. Angry Birds ignoriert zum Beispiel den Luftwiderstand komplett, weil es so mehr Spaß macht zu spielen. Deine Aufgabe als Entwickler ist es, ein Gleichgewicht zwischen Glaubwürdigkeit und Gameplay zu finden.

Möchten Sie tiefer in die Spieleentwicklung eintauchen und lernen, wie Sie Ihre eigenen Projekte von Grund auf neu erstellen?

In Kodike Wir haben praktische Programmierkurse vorbereitet, in denen Sie von den Grundlagen bis zur Erstellung vollwertiger Spiele gehen. Lernen Sie JavaScript, Python, Lua und mehr in einem benutzerfreundlichen Format mit Schritt-für-Schritt-Erklärungen.

Und wir haben auch einen coolen Telegram-Kanal mit einer freundlichen Entwickler-Community! Dort diskutieren wir interessante Technologien, teilen Erfahrungen, helfen uns gegenseitig bei Aufgaben und kommunizieren einfach über Programmierthemen.

Schließe dich uns an und wachse mit Gleichgesinnten! 🚀