Blog › Für was Trigonometrie in Pseudo-3D Racer-Games gebraucht wird

Von Pascal Pichler

Trigonometrie, dieses Wort löst bei vielen Jüngeren im Schul- oder Studium-Alter eine leichte Panik aus. Manche denken sich, wieso sollte ich solche «Mathematischen Dinge» in der Ausbildung überhaupt lernen, obwohl man es doch nie wieder im Leben braucht?
Wir bei der Cubera brauchen die Trigonometrie, denn ohne Trigonometrie gäbe es keine Möglichkeit einen Pseudo 3D Effekt bei Games zu erzeugen. Pseudo 3D wird auch 2.5D genannt und simuliert auf Bildern einen 3D Effekt. Game Developer aus den 8-Bit System Zeiten benutzten exakt diese Technik um rasante Rennspiele wie Enduro, Pole Position oder Outrun zu programmieren.
Wie das funktioniert, zeigen wir in diesem Blogbeitrag.

Raster Effekte

Pseudo 3D benutzt einen Raster-Effekt um eine Illusion von mehreren Schichten zu erzeugen. Durch diese Schichten erhält ein Bild seine Tiefe und kann den 3D Effekt simulieren.

Grundsätzlich funktioniert dies mit einer sogenannten Bewegungsparallaxe, bei der eine horizontale Unterteilung des Bildschirmes vorgenommen wird. Jede Unterteilung hat dabei eine eigene Position und Geschwindigkeit. Durch die Bewegungsparallaxe erscheint es uns, als wäre die langsamste Unterteilung am entferntesten. Beim einem Racer-Game wird nun beim Zeichnen jede dieser horizontalen Schichten entsprechend verschoben und zwar je weiter hinten umso weniger, so entsteht ebenfalls der Eindruck man fahre durch die Gegend.

Der volle Pseudo 3D Effekt ist nun etwas komplizierter und zwar gilt jede Pixellinie als eine eigene Schicht und erlaubt dadurch eine Pseudo 3D Strasse zu zeichnen. Natürlich wird die Perspektive und alles was dazugehört mit Hilfe von Trigonometrie berechnet aber die Mathematik lassen wir den Lesern zu liebe weg.

Pseudo 3D Strasse

Die meisten Strassen bei einem Racer-Game starten mit einer flachen Strecke, diese ist sehr kurz und nur wenige Linien hoch. Um jetzt dem Ganzen ein Gefühl der Perspektive zu verleihen wird die Strasse nach hinten immer enger. Baut man auf diese Weise eine gerade Strasse, gelingt es einen leichten 3D Effekt zu erzeugen und es scheint als würde die Strasse immer tiefer werden. Um die Bewegung sichtbar zu machen, verwenden viele Entwickler gestreifte Ränder oder Sicherheitslinien auf einer Strasse und bewegen diese zum Spieler hin. Dieser Effekt wird meist mit einer „color cycling“ Methode erzeugt. Jede Linie auf dieser Strasse muss aber auch die Eigenschaften einer Perspektive aufweisen, um möglichst realitätsgetreu zu bleiben. Durch diesen Effekt scheint es, als dass der Spieler losfährt, faktisch bewegen sich aber nur die Linien clever zum Spieler hin. Je schneller die Linien sich auf den Spieler bewegen, desto schneller «fährt» der Spieler.

Pseudo 3D-Effekt dank Trigonometrie - Cubera Solutions AG - Blogpost

Kurven

Will man nun eine Kurve in das Spiel hineinbringen, wird die Strasse leicht nach links oder rechts verschoben. Damit der Effekt gut aussieht, unterteilt man die Strasse am besten in einige Segmente, dabei sollte unten am Bildschirmrand das höchste Segment sein. Das nächste Segment darüber ist dann nur noch halb so hoch und so weiter. Verschiebt man jede Pixellinie in einem Segment um dieselbe Menge nach links oder rechts und lässt diese Verschiebung linear bei jedem weiteren Segment. So wäre zum Beispiel der Wert einer Strassen-Mitte-Geraden 0, -5, -10 und -15 je weiter oben auf dem Bildschirm das Segment sich befindet. Faktisch rutscht alles pro Segment um 5 nach links und erzeugt dabei die Illusion einer Linkskurve. Die Übergänge zwischen den verschiedenen Segmenten sind trotzdem schnell einmal zu grob und sollten am besten mit einem ease-in und out Effekt umschlossen werden. Will man noch realistischere Effekte verwenden, ist es möglich die Zentrifugalkraft mit einem simplen Multiplikator einzubinden.

Pseudo 3D-Effekt dank Trigonometrie - Cubera Solutions AG - Blogpost

Hügel

Programmiert man nicht gerade ein Formel 1 Rennspiel, so möchte man höchst wahrscheinlich einige Hügel in die Strecke einbinden. Hügel können mit kleinen Tricks auf eine 2D Fläche simuliert werden. Auch bei Hügeln werden die einzelnen Linien der Strasse schrittweise bearbeitet. Um eine Steigung zu simulieren werden die Pixel-Linien einer Strasse exponentiell immer kürzer. Um diesen Effekt zu verstärken könnte man dem Auto des Spielers eine andere Perspektive zuweisen um den Effekt der Steigung zu verstärken. Auch hilft es mit dem Himmel zu spielen, so liegt der Himmel bei einer Steigung viel höher und bei einer Senkung viel tiefer. Der Himmel ist dabei ein eigenes Segment, das die Strasse je nachdem verdeckt.

Pseudo 3D-Effekt dank Trigonometrie - Cubera Solutions AG - Blogpost

Hindernisse

Manchmal sind Hindernisse auf der Strasse, welche der Spieler umfahren muss um dem Spiel ein bisschen Action zu geben. Wer auf Sicherheitslinien oder sonstige Bodenmarkierungen verzichten möchte, kann auch Objekte an die Strassenränder stellen und mit diesen den Bewegungseffekt simulieren. Stellt man Objekte auf die Strasse, welche der Spieler umfahren muss, braucht man im Normalfall eine „collision detection“. Dabei ist wichtig, dass das Auto nicht zu schnell fährt, das heisst man sollte die Anzahl Updates pro Sekunde beachten. Das Auto sollte sich bei 60 FPS, also nur 60 Updates weit bewegen, sonst wird es für den Spieler viel zu schwer. Um diese Objekte richtig zu bewegen, ist es natürlich auch wichtig mit der Perspektive zu arbeiten, das heisst die Objekte werden immer Grösser je näher sie sind. Das Objekt sollte einfach immer gleichweit von der Mittellinie entfernt sein, so dass es selbst bei einer Kurve am richtigen Ort bleibt. Sobald das Objekt näher rückt muss es leicht vergrössert werden, so dass es im letzten Moment die originale Grösse hat.

Das Gameplay

Das Spiel aktualisiert die Linie von oben nach unten. Damit es nun ein flüssiges Gameplay gibt sind mindestens 30 Frames pro Sekunde nötig, trotzdem sehen 60 FPS noch besser aus und erlauben auch einen kleinen Spielraum. Es ist also von Vorteil 60 Updates pro Sekunde zu machen um ein flüssig laufendes Gameplay zu ermöglichen.
Beim Rendern dieser Level ist es wichtig den Maleralgorithmus anzuwenden. Man beginnt also mit dem am weit entferntesten Objekt und zeichnet dann das nächste darüber. Dies muss auch bei Hügeln berücksichtigt werden, da der obere Teil eines grossen Objektes schon früher sichtbar wird.

Fazit

Obwohl man heute mit zigtausend Polygonen arbeiten kann um einen sattelfesten 3D Effekt zu erzeugen, fühlt sich ein Pseudo 3D Rennspiel doch um einiges rasanter an. Einige freuen sich sicher auch über das bisschen Oldschool-Feeling, welches bei diesen Spielen meist aufkommt. All diese Perspektiven sollten gut berechnet werden um einen möglichst realistischen 3D Effekt zu erlangen und dies ist natürlich mit Trigonometrie erreichbar. Um ein kleines Rennspiel für den Browser mit JavaScript umzusetzen ist das sicher einer der besten Wege. Ein solches Rennspiel läuft mit einigen Optimierungen auch auf den meisten Smartphones und kann dort mit Hilfe des Gyrosensor gesteuert werden.

Weitere Informationen

Lou’s Pseudo 3D Page

ExtentOfTheJam.com

X-Mas Game «Truck Ride»

Zum Showcase-Artikel