8 Beste kostenlose und Open Source JavaScript Game Engines und Bibliotheken

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

Webbrowser haben in den letzten zwei Jahrzehnten einen langen Weg zurückgelegt. Die Einführung von sich ständig verbessernden Webstandards und Entwicklern, die diese in einer Vielzahl von Browsern implementieren, ermöglicht es uns nun, Dinge direkt in Browsern zu tun, die früher entweder nicht möglich oder sehr schwer zu erreichen waren.

In Kombination mit all den Funktionen und der Rechenleistung, die heute mit modernen Smartphones und Computern einhergehen, ist es uns jetzt möglich, Spiele zu erstellen, die direkt im Browser eines Benutzers ausgeführt werden können. Während browserbasierte Spiele immer noch nicht direkt mit nativ entwickelten Spielen konkurrieren können, können wir mäßig komplexe Spiele in einem Browser ausführen, ohne dass eine Installation erforderlich ist.

Die Entwicklung eines Spiels ist eine gewaltige Aufgabe, glücklicherweise gibt es viele JavaScript-basierte Spiel-Engines und Bibliotheken, die Ihnen helfen, die Grundlagen abzudecken, ohne gemeinsame Funktionen wie Kollisionserkennung selbst implementieren zu müssen. In diesem Tutorial stellen wir Ihnen einige der besten kostenlosen und Open-Source-JavaScript-Spiel-Engines und -Bibliotheken vor, die Sie in Ihren eigenen Projekten verwenden können.

PixiJS

PixiJS ist eine der beliebtesten Bibliotheken, mit denen Sie atemberaubende Grafiken für Ihre Spiele erstellen können. Die Bibliothek verwendet WebGL zum Rendern und wird auf älteren Plattformen automatisch auf Canvas zurückfallen, sodass Sie sich um nichts kümmern müssen. Es gibt genug Funktionen in der Bibliothek, um ein überzeugendes Argument dafür zu liefern, dass Sie es mindestens einmal versuchen sollten.

Die folgende CodePen-Demo von Omar Shehata zeigt, wie Sie diesen Raucheffekt mit PixiJS erzeugen können.

Please accept marketing cookies to load this content.

Mit PixiJS haben Sie Unterstützung für Sprite-Sheets mit Funktionen, die Trimmen und Rotationspacken umfassen. Es gibt auch einen Asset-Loader, mit dem Sie Dinge wie Grafiken, Schriftarten und Animationsdaten laden und verwalten können. Die Multi-Touch-Eingabe und das Tracking ermöglichen es Ihnen, Benutzerinteraktionen wie Panning und Pinch-to-Scale zu implementieren.

Die Bibliothek bietet auch eine Vielzahl von WebGL-Filtern, Tönungs- und Mischmodi sowie erweitertes Textrendering, um Ihnen ein qualitativ hochwertiges visuelles Erlebnis zu bieten.

Eine der einfachsten Möglichkeiten, mehr über die Bibliothek zu erfahren und herauszufinden, was sie zu bieten hat, besteht darin, die lange Liste von Beispielen durchzugehen, die ihre Fähigkeiten demonstrieren.

Phaser

Phaser ist eine weitere Bibliothek, mit der Sie schnell HTML5-basierte Spiele für Handys und Desktop-Browser erstellen können. Es gibt viele Ähnlichkeiten sowie einige Unterschiede in Bezug auf die angebotenen Funktionen. Mit Phaser können Sie beispielsweise auch Grafiken mit WebGL und Canvas rendern.

Die folgende CodePen-Demo von Aaron Buchanan zeigt, wie Sie die Kernfunktionalität des beliebten Fruit Ninja-Spiels in Phaser implementieren können.

Please accept marketing cookies to load this content.

Das Kernframework der Bibliothek ist für die kommerzielle Nutzung kostenlos, aber Sie können zusätzliche Funktionen und Funktionen mit kostenpflichtigen Plugins erhalten. Sie können Ihre eigenen Spiele entweder in JavaScript oder TypeScript entwickeln.

Phaser hat viele interessante Funktionen wie erweiterte Multi-Kamera-Unterstützung. Auf diese Weise können Sie im Grunde genommen zusätzliche Kameras erstellen, die überall auf dem Bildschirm platziert werden können. Die Kameras sind scrollbar und kommen mit Effekten wie Shake, Blitz und Fade.

Bilder, Sounds, Sprite-Sheets und andere Assets können mit Hilfe eines integrierten Preloaders in der Bibliothek einfach in das Spiel geladen und verwaltet werden.

Eines der Dinge, die Sie an Phaser mögen werden, ist, dass es mit Blick auf Mobilgeräte entwickelt wurde. Dies bedeutet im Grunde, dass die Entwickler besonders darauf geachtet haben, dass jede Funktion, die sie der Kernbibliothek hinzufügen, auf mobilen Geräten gut funktioniert.

Stage.js

Die Stage.js-Bibliothek ist ideal für Leute, die einfache 2D-Spiele entwickeln möchten, die keine komplizierten Funktionen benötigen. Die Spiele werden mit dem canvas-Element in HTML5 gerendert.

Hier ist eine Implementierung eines einfachen Tic-Tac-Toe-Spiels von creotip mit stage.js. Sie können einige fortgeschrittenere Beispiele auf der Homepage der Website finden.

Please accept marketing cookies to load this content.

Während das HTML5-canvas-Element zum Erstellen von Grafiken und Animationen verwendet werden kann, hat es einige Einschränkungen, die die Spieleentwicklung etwas schwieriger machen. Die Stage.js-Bibliothek umgeht diese Einschränkung, indem sie eine eigene DOM-ähnliche Struktur für die Elemente implementiert, die Sie auf der Leinwand zeichnen. Es behandelt und verbreitet auch verschiedene Maus- und Touch-Ereignisse über verschiedene Objekte für Sie.

Die Bibliothek verfügt über eine integrierte Spielschleife sowie andere Funktionen, die Sie benötigen, um schnell einfache 2D-Spiele zu erstellen. Dazu gehört die Manipulation der Größe, Position und Transparenz verschiedener Elemente sowie das Hören und Behandeln verschiedener Maus- und Touch-Ereignisse.

MelonJS

MelonJS ist eine kostenlose JavaScript-basierte Spiel-Engine, die leicht zu erlernen und leistungsstark genug ist, um einfache Plattformspiele zu erstellen. Es ist eine leichte und abhängigkeitsfreie Spielebibliothek, so dass Sie nichts anderes laden müssen, damit es funktioniert. Alles, was Sie brauchen, ist ein leistungsfähiger HTML5-Browser.

MelonJS verwendet einen WebGL-Renderer mit Canvas-Fallback, genau wie unsere ersten beiden Bibliotheken. Es kommt mit einer eigenen leichten Physik-Implementierung, um niedrige CPU-Anforderungen zu gewährleisten. Es bietet auch Unterstützung für Sprite-Sheets und Texturen sowie Animationsmanagement.

Sie haben Zugriff auf Maus- und Touch-Ereignisse sowie System- und Bitmap-Schriftarten. Die Erkennung von Gerätebewegung, -ausrichtung und -beschleunigungssensor wird ebenfalls unterstützt.

Sobald Sie Ihr Spiel entwickelt haben, können Sie Corodova verwenden, um es in eine hybride mobile App zu verwandeln. Die Spiel-Engine bietet auch eine native Integration für viele andere 3rd-Party-Plugins.

BabylonJS

Die Bibliotheken und Engines, die wir bisher besprochen haben, sind alle für die Erstellung von 2D-Spielen gedacht. Was ist, wenn Sie nach einer Rendering-Engine suchen, mit der Sie 3D-Spiele erstellen können? BabylonJS wird in diesem Fall eine große Hilfe sein.

Hier ist ein einfacher Wald, der mit der BabylonJS-Bibliothek von Pavel Starý erstellt wurde. Sie können sich darin bewegen, indem Sie die Pfeiltasten drücken.

Please accept marketing cookies to load this content.

Es gibt viele Funktionen in der Rendering-Engine, die es einen Versuch wert machen. Es gibt viele Editoren, mit denen Sie Zeit sparen und grundlegende Effekte erstellen können. Dazu gehören ein Partikeleditor zum schnellen Erstellen und Konfigurieren von Partikelsystemen sowie ein Knotenmaterialeditor usw.

Die Bibliothek bietet eine Vielzahl von Spezialeffekten wie Nebel, Tiefenschärfe, Lens Flares und Schärfung. Es gibt auch eine Menge Optimierungen, die hardwarebeschleunigte Instanzen zusammen mit Offscreen-Leinwänden usw. beinhalten.

Three.js

Der Name der beliebten Bibliothek Three.js wird immer dann auftauchen, wenn wir etwas im Zusammenhang mit 3D-Grafiken oder Visualisierungen im Browser diskutieren. Es ist eine sehr allgemeine 3D-Rendering-Bibliothek, die Sie für viele Dinge verwenden können. Dies bedeutet, dass es auch zum Rendern von Grafiken für Ihre 3D-Spiele verwendet werden kann.

Hier ist eine CodePen-Demo von Lisa Kobrazova, die einen Saturn-ähnlichen Planeten mit Three.js erstellt, um zu zeigen, was Sie mit der Bibliothek tun können.

Please accept marketing cookies to load this content.

Die Bibliothek bietet Unterstützung für Szenen, Animationen, Kameras und Objekte. Sie können auch Licht zu einer Szene hinzufügen und es als Umgebungslicht, gerichtetes Licht oder von einem Punkt ausgehend erscheinen lassen. Ebenso können Sie eine Vielzahl von geometrischen Formen wie einen Würfel, eine Kugel, einen Torus und 3D-Text erstellen.

Die Three.js-Bibliothek verfügt über eine riesige aktive Community, die Ihnen während Ihres Lernprozesses hilft. Die ausführliche Dokumentation und diese Beispielseite können Ihnen helfen, zu lernen und zu erkunden, was Sie mit der Bibliothek tun können.

Matter.js

Nun, da wir über vollwertige 2D-Gaming-Bibliotheken und 3D-Render-Engines gesprochen haben, ist es an der Zeit, auch einige Physik-Engines in die Diskussion einzubeziehen.

Matter.js ist eine funktionsreiche Physik-Engine für starre 2D-Körper, die Sie in Ihre Spiele integrieren können. Sie können es verwenden, um über die grundlegende Kollisionserkennung in allen 2D-Spielen, die Sie entwickeln, hinauszugehen. Sie können Werte für physikalische Eigenschaften wie Masse und Dichte für verschiedene Objekte angeben.

Hier ist ein Beispiel, das ich erstellt habe, um Ihnen zu zeigen, wie Matter.js verwendet werden kann, um Kräfte auf jeden Festkörper anzuwenden.

Please accept marketing cookies to load this content.

Es gibt viele Dinge, die Sie mit der Bibliothek simulieren können, wie Schwerkraft, Reibung und elastische oder unelastische Kollisionen. Wir haben auch eine Reihe von Tutorials zu diesem Thema geschrieben, um Ihnen den Einstieg in Matter.js zu erleichtern.

Cannon.js

Die Cannon.js-Bibliothek ist eine leichte 3D-Physik-Engine für das Web. Diese Physik-Engine verfügt über eine Vielzahl von Funktionen wie Kollisionserkennung, Unterstützung für verschiedene Körperformen und Reibung sowie Einschränkungen wie Scharniere.

Diese Fähigkeiten der Physik-Engine können mit einer 3D-Rendering-Bibliothek wie Three.js kombiniert werden, um einige 3D-Spiele wie das beliebte Stack-Spiel zu erstellen, das im CodePen unten von Hunor Marton Borbely gezeigt wird.

Please accept marketing cookies to load this content.

Sie können auch einige andere alternative 3D-Physik-Engines wie Oimo.js verwenden, je nachdem, wie Sie verschiedene Funktionen in einem Spiel entwickeln möchten. Die Oimo.js-Bibliothek fühlt sich in einigen Aspekten ähnlich wie Matter.js an, so dass das Erlernen etwas einfacher sein könnte, wenn Sie bereits etwas Erfahrung mit Matter.js haben. Sie ist auch relativ neuer im Vergleich zu Cannon.js.

Abschließende Gedanken

Es ist aufregend zu denken, dass wir in Bezug auf die Webentwicklung so weit gekommen sind, dass es möglich ist, Spiele in Browsern zu erstellen und auszuführen. Sie sollten sich jedoch daran erinnern, dass die Spieleentwicklung eine sehr anspruchsvolle Aufgabe ist, selbst mit all diesen Fortschritten und Bibliotheken, die Ihnen helfen. Dies gilt insbesondere für 3D-Spiele.

Mein Rat für Sie wäre, klein anzufangen und sich über verschiedene Aspekte und Funktionen dieser Gaming-Engines und Bibliotheken zu informieren, bevor Sie direkt in ein großes Projekt eintauchen. Dies wird verhindern, dass Sie überwältigt und entmutigt werden, während Sie unterwegs neue Dinge lernen.