Advertisement
  1. Game Development
  2. 3D Games

Erstellen eines einfachen 3D-Endlos-Läuferspiels mit Three.js

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Final product image
What You'll Be Creating
Final product image
Was werden Sie erstellen? 

Die Webplattform hat in jüngster Zeit dank HTML5, WebGL und der Leistungssteigerung der aktuellen Gerätegeneration ein enormes Wachstum verzeichnet. Jetzt können mobile Geräte und Browser leistungsstarke Inhalte sowohl in 2D als auch in 3D bereitstellen. Die Vertrautheit von JavaScript (JS) als Skriptsprache war nach dem Niedergang der Flash-Webplattform ebenfalls ein treibender Faktor.

Die meisten Webentwickler sind sich bewusst, wie kompliziert das JS-Ökosystem mit all den verschiedenen verfügbaren Frameworks und Standards ist, was für einen neuen Entwickler manchmal überwältigend sein kann. Aber wenn es um 3D geht, sind die Entscheidungen dank Mr.Doob unkompliziert. Sein Three.js ist derzeit die beste Option, um leistungsstarke 3D-WebGL-Inhalte zu erstellen. Eine weitere leistungsstarke Alternative ist Babylon.js, mit der auch 3D-Spiele erstellt werden können.

In diesem Tutorial lernen Sie, wie Sie mit dem leistungsstarken Three.js-Framework ein einfaches natives Web-3D-Spiel im Endlos-Runner-Stil erstellen. Mit den Pfeiltasten steuern Sie einen Schneeball, der einen Berghang hinunter rollt, um den Bäumen auf Ihrem Weg auszuweichen. Es ist keine Kunst beteiligt und alle Grafiken werden in Code erstellt.

1. Grundlegende 3D-Szene

Envato Tuts+ hat bereits einige Tutorials, mit denen Sie mit Three.js beginnen können. Hier sind einige davon, um Ihnen den Einstieg zu erleichtern.

Lassen Sie uns zuerst eine grundlegende 3D-Szene erstellen, wie hier gezeigt, wo sich ein rotierender Würfel befindet. Sie können den Würfel mit der Maus umkreisen, um ihn zu umkreisen.

Jede Grafik, die auf einem zweidimensionalen Bildschirm angezeigt wird, ist praktisch 2D-Natur, mit einigen wichtigen Elementen, die die 3D-Illusion erzeugen: der Beleuchtung, der Schattierung, den Schatten und der 3D-2D-Projektionsmagie, die über die Kamera erfolgt. In der obigen Szene aktivieren wir eine effektive Beleuchtung mit diesen Codezeilen.

Für den renderer muss shadowMap aktiviert sein, für die Szene muss ein Licht mit aktiviertem castShadow vorhanden sein, und für alle 3D-Objekte müssen die Eigenschaften castShadow und receiveShadow entsprechend festgelegt sein. Für eine ordnungsgemäße Schattierung sollten wir auch das MeshStandardMaterial oder ein funktionsreicheres Material für unsere 3D-Objekte verwenden. Die Kamera wird mit dem raffinierten OrbitControls-Skript gesteuert. Ich würde empfehlen, mit der grundlegenden 3D-Szene herumzuspielen, indem Sie primitivere Formen hinzufügen oder mit der Beleuchtung usw. spielen, bevor Sie mit dem Tutorial fortfahren.

2. Das Konzept des Endlosläufers

Es gibt viele Arten von Endlos-Runner-Spielen, und unser Spiel ist ein "Endlos-Roller". Wir werden ein Spiel erstellen, bei dem ein Schneeball einen endlosen Berghang hinunter rollt, wo wir mit den Pfeiltasten den ankommenden Bäumen ausweichen. Eine interessante Sache ist, dass dieses einfache Spiel keine Kunstgegenstände beinhaltet, da alle Komponenten durch Code erstellt würden. Hier ist das komplette Spiel zum Herumspielen.

3. Komponenten des Spiels

Die Hauptkomponenten oder -elemente des Spiels sind:

  • der rollende Schneeball
  • die zufälligen Bäume
  • der scrollende Boden
  • der Entfernungsnebel
  • der Kollisionseffekt

Wir werden diese im folgenden Abschnitt einzeln untersuchen.

Der Nebel

Der fog ist eine Eigenschaft der 3D-Szene in Three. Es ist immer ein praktischer Trick, um die Tiefe zu simulieren oder einen Horizont anzuzeigen. Die Farbe des Nebels ist wichtig, damit die Illusion richtig funktioniert, und hängt von der Farbe der Szene und der Beleuchtung ab. Wie Sie im folgenden Code sehen können, setzen wir den clearColor-Wert des renderer so, dass er nahe an der Farbe des fog liegt.

Um dem Ambiente zu entsprechen, verwenden wir auch ähnliche Farbwerte wie die in der Szene verwendeten Lichter. Jede Umgebungsfarbe ist ein anderer Weißton, der zusammengeliert wird, um den erforderlichen Effekt zu erzielen.

Der Schneeball

Unser Schneeball ist eine DodecahedronGeometry drei primitive Form, die wie unten gezeigt erstellt wurde.

Für alle 3D-Elemente in diesem Spiel verwenden wir THREE.FlatShading, um den gewünschten Low-Poly-Look zu erzielen.

Der rollende Berg

Der Bildlaufbereich mit dem Namen rollenderGroundSphere ist ein großes SphereGeometry-Grundelement, und wir drehen ihn um die x-Achse, um die Illusion eines sich bewegenden Bodens zu erzeugen. Der Schneeball rollt nicht wirklich über irgendetwas; wir erschaffen nur die Illusion, indem wir die Bodenkugel rollen lassen, während der Schneeball stationär bleibt.

Ein normales Kugelprimitiv sieht sehr glatt aus und bietet daher nicht die für den Berghang erforderliche Robustheit. Wir führen also einige Scheitelpunktmanipulationen durch, um die glatte Kugeloberfläche in ein raues Gelände zu verwandeln. Hier ist der entsprechende Code, gefolgt von einer Erklärung.

Wir erstellen ein Kugelprimitiv mit 40 horizontalen Segmenten (sides) und 40 vertikalen Segmenten (tiers). Auf jeden Scheitelpunkt einer Drei-Geometrie kann über die Eigenschaft vertices-Array zugegriffen werden. Wir durchlaufen alle Ebenen zwischen den äußersten oberen und äußersten unteren Scheitelpunkten, um unsere Scheitelpunktmanipulationen durchzuführen. Jede Ebene der Kugelgeometrie enthält genau die sides-Anzahl der Eckpunkte, die einen geschlossenen Ring um die Kugel bilden.

Der erste Schritt besteht darin, jeden ungeraden Ring von Eckpunkten zu drehen, um die Gleichmäßigkeit der Oberflächenkonturen zu brechen. Wir bewegen jeden Scheitelpunkt im Ring um einen zufälligen Bruchteil zwischen 0,25 und 0,75 der Entfernung zum nächsten Scheitelpunkt. Infolgedessen sind die vertikalen Eckpunkte der Kugel nicht mehr in einer geraden Linie ausgerichtet, und wir erhalten eine schöne Zick-Zack-Kontur.

Als zweiten Schritt stellen wir jedem Scheitelpunkt eine zufällige Höhenanpassung zur Verfügung, die an der Normalen am Scheitelpunkt ausgerichtet ist, unabhängig von der Ebene, zu der er gehört. Dies führt zu einer unebenen und rauen Oberfläche. Ich hoffe, dass die hier verwendete Vektormathematik einfach ist, wenn man bedenkt, dass der Mittelpunkt der Kugel als Ursprung (0,0) betrachtet wird.

Die Bäume

Die Bäume erscheinen außerhalb unserer Rollbahn, um der Welt Tiefe zu verleihen, und innen als Hindernisse. Das Erstellen des Baums ist etwas komplizierter als der raue Boden, folgt jedoch der gleichen Logik. Wir verwenden ein ConeGeometry-Grundelement, um den oberen grünen Teil des Baums zu erstellen, und eine CylinderGeometry, um den unteren Stammteil zu erstellen.

Für den oberen Teil durchlaufen wir jede Scheitelpunktstufe und erweitern den Scheitelpunktring, gefolgt vom Verkleinern des nächsten Rings. Der folgende Code zeigt die blowUpTree-Methode, mit der der alternative Scheitelpunktring nach außen erweitert wird, und die tightenTree-Methode, mit der der nächste Scheitelpunktring verkleinert wird.

Die blowUpTree-Methode verschiebt jeden alternativen Scheitelpunkt in einem Scheitelpunktring, während die anderen Scheitelpunkte im Ring auf einer geringeren Höhe bleiben. Dadurch entstehen die spitzen Zweige am Baum. Wenn wir die ungeraden Eckpunkte in einer Schicht verwenden, verwenden wir die geraden Eckpunkte in der nächsten Schicht, so dass die Gleichmäßigkeit unterbrochen wird. Sobald der vollständige Baum gebildet ist, drehen wir ihn zufällig um die y-Achse, damit er etwas anders aussieht.

Der Explosionseffekt

Der Blockpixel-Explosionseffekt ist nicht der eleganteste, den wir verwenden könnten, aber er funktioniert auf jeden Fall gut. Dieser spezielle Partikeleffekt ist tatsächlich eine 3D-Geometrie, die mithilfe der THREE.Points-Klasse so bearbeitet wird, dass sie wie ein Effekt aussieht.

Die addExplosion-Methode fügt dem vertices-Array der partikelGeometry 20 Scheitelpunkte hinzu. Die explode-Methode wird aufgerufen, wenn der Effekt ausgeführt werden soll, wodurch jeder Scheitelpunkt der Geometrie zufällig positioniert wird. Die doExplosionLogic wird in der update-Methode aufgerufen, wenn das Partikelobjekt sichtbar ist, wobei wir jeden Scheitelpunkt nach außen verschieben. Jeder Scheitelpunkt in einem poits-Objekt wird als quadratischer Block gerendert.

4. Der Spielablauf

Nachdem wir nun wissen, wie die einzelnen für das Spiel benötigten Elemente erstellt werden, wollen wir uns mit dem Spielablauf befassen. Die wichtigsten Spielablauf-Elemente sind:

  • die Spielschleife
  • die Platzierung der Bäume
  • die Benutzerinteraktion
  • die Kollisionserkennung

Lassen Sie uns diese im Detail analysieren.

Die Spielschleife

Die gesamte Kernmechanik des Spiels findet in der Spielschleife statt, in unserem Fall bei der update-Methode. Wir rufen es zum ersten Mal von der init-Methode auf, die beim Laden des Fensters aufgerufen wird. Danach wird die Dokument-Render-Schleife mit der requestAnimationFrame-Methode verknüpft, sodass sie wiederholt aufgerufen wird.

Beim update rufen wir die render-Methode auf, die den renderer zum Zeichnen der Szene verwendet. Wir rufen die doTreeLogic-Methode auf, die nach Kollisionen sucht und die Bäume entfernt, sobald sie nicht mehr sichtbar sind.

Der Schneeball und die Bodenkugeln werden gedreht, während wir dem Schneeball eine zufällige Sprunglogik hinzufügen. Neue Bäume werden durch Aufrufen von addPathTree nach Ablauf einer vordefinierten Zeit in den Pfad eingefügt. Die Zeit wird mit einem THREE.Clock-Objekt verfolgt. Wir aktualisieren auch die score, sofern keine Kollision aufgetreten ist.

Platzierung der Bäume

Eine Gruppe von Bäumen wird außerhalb der Rollbahn platziert, um die Welt mit der Methode addWorldTrees zu erstellen. Alle Bäume werden als untergeordnetes Element der rollingGroundSphere hinzugefügt, sodass sie sich auch bewegen, wenn wir die Kugel drehen.

Um Weltbäume zu pflanzen, rufen wir die addTree-Methode auf, indem wir Werte über den Umfang unserer Bodenkugel übergeben. Das Dienstprogramm sphericalHelper hilft uns, die Position auf der Oberfläche einer Kugel zu finden.

Um Bäume auf dem Pfad zu pflanzen, verwenden wir einen Pool von Bäumen, die beim Start mit der Methode createTreesPool erstellt werden. Wir haben auch vordefinierte Winkelwerte für jeden Pfad auf der Kugel, die im Array pathAngleValues gespeichert sind.

Die addPathTree-Methode wird ab Update aufgerufen, wenn nach dem Pflanzen des letzten Baums genügend Zeit verstrichen ist. Es ruft wiederum die zuvor gezeigte addTree-Methode mit einem anderen Parametersatz auf, bei dem der Baum im ausgewählten Pfad platziert wird. Die doTreeLogic-Methode gibt den Baum an den Pool zurück, sobald er nicht mehr angezeigt wird.

Benutzerinteraktion

Wir fügen dem Dokument einen Listener hinzu, um nach relevanten Tastaturereignissen zu suchen. Die handleKeyDown-Methode legt den currentLane-Wert fest, wenn die rechte oder linke Pfeiltaste gedrückt wird, oder legt den bounceValue-Wert fest, wenn der Aufwärtspfeil gedrückt wird.

Beim update wird die x-Position unseres Schneeballs langsam erhöht, um die currentLane-Position dort durch Spurwechsel zu erreichen.

Kollisionserkennung

In diesem speziellen Spiel ist keine echte Physik involviert, obwohl wir verschiedene physikalische Frameworks für unsere Kollisionserkennung verwenden könnten. Wie Sie jedoch wissen, erhöht eine Physik-Engine unser Spiel erheblich, und wir sollten immer versuchen, dies zu vermeiden.

In unserem Fall berechnen wir nur den Abstand zwischen unserem Schneeball und jedem Baum, um eine Kollision auszulösen, wenn sie sehr nahe beieinander liegen. Dies geschieht in der doTreeLogic-Methode, die vom update aufgerufen wird.

Wie Sie vielleicht bemerkt haben, werden alle derzeit in unserem Pfad vorhandenen Bäume im Array treeInPath gespeichert. Die doTreeLogic-Methode entfernt auch die Bäume aus der Anzeige und in den Pool, sobald sie mit dem unten gezeigten Code aus unserer Ansicht verschwinden.

Abschluss

Das Erstellen eines 3D-Spiels ist ein komplizierter Prozess, wenn Sie kein visuelles Tool wie Unity verwenden. Es könnte einschüchternd oder überwältigend wirken, aber ich versichere Ihnen, dass Sie sich viel mächtiger und kreativer fühlen werden, wenn Sie erst einmal den Dreh raus haben. Ich möchte, dass Sie die verschiedenen physikalischen Rahmenbedingungen oder Partikelsysteme oder die offiziellen Beispiele weiter erforschen.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.