pixel-platformer

Ein vollständiger 2D-Pixel-Art-Platformer - Charakterphysik, Level, Gegner und Sammelobjekte. Der Beweis, dass wir bis auf die Ebene der Spiel-Engine hinabsteigen und nicht nur Fertigteile zusammensetzen.

pixel-platformer
TL;DR

Ein 2D-Plattformer, der im Browser läuft. Es ging nie um die Anzahl der Funktionen, sondern darum, dass der Sprung sich gut anfühlt und selbst auf einem schwächeren Laptop flüssig bleibt.

Überblick

Ein Plattformer ist eines dieser Projekte, die von außen banal wirken. Ein Quadrat hüpft über Kacheln, wie schwer kann das sein? Die ganze Schwierigkeit steckt in Dingen, die ein Spieler nicht sieht und doch innerhalb weniger Frames spürt: ob der Sprung federnd ist, ob die Steuerung verzögert, ob man die Kante noch erreicht.

Dieses Projekt entstand aus Spaß und um wirklich zu verstehen, woher eine gute Steuerung kommt. Statt immer neue Mechaniken draufzupacken, haben wir eine einzige Sache auf ein hohes Niveau gebracht: eine Figurbewegung, die gut in der Hand liegt, und eine Spielschleife, die sich auf jeder Hardware gleich verhält.

Ein Spieler beurteilt ein Spiel in den ersten Sekunden, und zwar nicht mit dem Verstand, sondern über das Gefühl. Eine zu leichte Figur entgleitet den Fingern, eine zu schwere schleppt sich und frustriert. Zwischen beidem liegt ein schmales Band, in dem sich der Sprung angenehm anfühlt - und dieses Band findet man nur durch das Feinabstimmen einzelner Werte: Sprungkraft, Schwerkraft, Reibung bei der Landung.

Deshalb ist ein Plattformer eine so gute Übung. Es gibt hier keine große Architektur zu entwerfen, dafür aber gnadenloses Feedback: eine schlecht gewählte Zahl, und das Spiel macht sofort keinen Spaß mehr. Der Rest dieser Fallstudie erzählt davon, was geordnet werden musste, damit dieses Feinabstimmen überhaupt Sinn ergibt.

Ein Physikschritt, jede Maschine gleich

Der häufigste Fehler in nach Feierabend gebauten Spielen: eine an die Bildrate gekoppelte Schleife. Auf einem 60-Hz-Monitor springt die Figur normal, bei 144 Hz fliegt sie doppelt so schnell, und auf einem schwachen Laptop, der Frames verliert, wird sie langsamer. Die Physik darf nicht davon abhängen, wie schnell der Bildschirm zeichnet.

Die Lösung ist einfach und bewährt: Die Simulation läuft mit festem Schritt, und das Zeichnen geschieht getrennt, mit Interpolation zwischen den Ticks. Die Welt aktualisiert sich genau sechzig Mal pro Sekunde, unabhängig vom Monitor, und der Renderer bekommt den Zustand plus einen Bruchteil des Schritts, damit die Bewegung flüssig bleibt.

gameLoop.js · javascript
let accumulator = 0;
const step = 1 / 60;

function frame(now) {
  accumulator += (now - last) / 1000;
  last = now;

  while (accumulator >= step) {
    world.update(step);
    accumulator -= step;
  }

  renderer.draw(world, accumulator / step);
  requestAnimationFrame(frame);
}

Zwei Spielschleifen

AnsatzAuf einem schnellen BildschirmAuf einem schwachen Laptop
Schleife an Frames gekoppeltFigur fliegt zu schnellFigur schleppt sich
Fester Schritt plus Interpolationgleiches Tempogleiches Tempo

Kollisionen, die nicht schummeln

Das Zweite, das das Gefühl ruiniert, sind Kollisionen. Die Figur muss genau an der Kante einer Kachel stehen bleiben, keinen Pixel zu früh und keinen Pixel zu spät, sonst spürt der Spieler, dass etwas nicht stimmt, auch ohne es benennen zu können. Die Simulation rechnet einfacher, als es scheint: Geschwindigkeit, dann die X- und die Y-Achse getrennt gegen das Kachelraster, mit einer Positionskorrektur beim Aufprall.

1
Eingabe

wir lesen die Tasten einmal pro Frame, geben sie aber an die Simulation weiter, nicht direkt an die Bewegung.

2
Simulation

der feste Schritt berechnet Geschwindigkeit, Schwerkraft und Kollisionen gegen das Kachelraster.

3
Zeichnen

der Renderer bekommt den Weltzustand plus einen Bruchteil des Schritts, damit die Bewegung zwischen den Ticks flüssig bleibt.

➜
Tipp

Ein fester Simulationsschritt plus Interpolation beim Zeichnen ist der einfachste Weg, ein Spiel auf jeder Hardware identisch zu machen. Die Physik weiß nichts über die Bildrate des Monitors, und genau das entscheidet, ob der Sprung fair ist.

Das Ergebnis, das man in der Hand spürt

Heraus kommt ein kleines Spiel, das sich wirklich angenehm steuert, mit Code, der lesbar und leicht erweiterbar bleibt. Der Sprung hat ein gutes Gewicht, die Kollisionen sind ehrlich, und das Tempo ist auf jedem Monitor gleich. Das ist keine Techdemo, die vorgibt, ein Spiel zu sein, sondern etwas, das in einen Zustand gebracht wurde, in dem man länger spielen will, als das Starten dauert.

Weitere Projekte

Weitere Projekte aus derselben Kategorie - sehen Sie, wie wir ähnliche Herausforderungen angehen.

Haben Sie ein ähnliches Projekt?

Melden Sie sich - ein Angebot ist kostenlos und kommt innerhalb einer Stunde.