Dieser Beitrag ist eine Übersetzung eines Gastbeitrags von Will Easrcott auf hacks.mozilla.org. Mozilla Hacks beschäftigt sich laufend mit neuen Entwicklungen über Open-Source-Themen und das Open Web und veröffentlicht regelmäßig Beiträge von bekannten externen und internen Autoren.

Am 22. März 2011 veröffentlichte Mozilla Firefox 4.0, welches WebGL standardmäßig aktiviert hat. Einen Monat später wurde PlayCanvas gegründet und es wurde mit dem Aufbau einer Game-Engine begonnen, die anders ist als alles bisher Dagewesene. Noch drei Jahre und WebGL wird überall unterstützt. Erst diese Woche kündigte Apple Unterstützung für WebGL in OS X und iOS 8 an. Wie freuen uns, Sie mit aufregenden Neuigkeiten ständig auf dem Laufenden zu halten.

Einführung in die PlayCanvas Engine.

Die PlayCanvas-Engine ist eine JavaScript-Bibliothek, die speziell für die Erstellung von Videospielen entwickelt wurde. Es implementiert alle wichtigen Komponenten, die Sie benötigen, um qualitativ hochwertige Spiele zu schreiben:

  • Grafik: Modellladen, Per-Pixel-Beleuchtung, Shadowmapping, Post-Effekte
  • Physik: Rigid Body Simulation, Ray Casting, Joints, Trigger Volumes, Vehicles
  • Animation: Keyframing, Skeletal Blending, Skinning
  • Audio Engine: 2D- und 3D-Audioquellen
  • Eingabegeräte: Maus, Tastatur, Touch und Gamepad Unterstützung
  • Entity-Komponentensystem: Hochwertiges Game Object Management

Als die Engine entwickelt wurde, hatten die Entwickler ein paar Ziele vor Augen.

  • Es muss einfach zu bedienen sein.
  • Es muss rasend schnell gehen.

Einfach und doch leistungsstark.

Als Entwickler wünschen Sie sich gut dokumentierte und gestaltete APIs. Aber Sie wollen auch verstehen, was unter der Haube vor sich geht und debuggen, wenn etwas schief geht. Dafür gibt es keinen Ersatz für eine sorgfältig handgefertigte, unminifizierte Open-Source-Codebasis.

Zusätzlich benötigen Sie tolle Grafik-, Physik- und Audio-Engines. Aber die PlayCanvas Engine geht noch einen Schritt weiter. Es enthüllt ein Spiel-Framework, das ein Entity-Komponenten-System implementiert, das es ihnen erlaubt, die Objekte in ihren Spielen so zu bauen, als wären sie aus Lego-ähnlichen Funktionsblöcken zusammengesetzt. Also, wie sieht das aus? Schauen wir uns ein einfaches Beispiel für CodePen an: eine Kanonenkugel, die eine Wand zerschmettert.

Wie Sie aus dem JS-Panel des Stifts ersehen können, ist es möglich, mit etwas mehr als 100 Zeilen Code interessante 3D-Szenen zu erstellen, zu beleuchten, zu simulieren und zu betrachten. Versuchen Sie, den CodePen zu forken und ändern Sie einige Werte für sich selbst.

Need for Speed.

Um eine hohe Leistungsfähigkeit sicherzustellen, wurde PlayCanvas als eine Mischung aus handgeschriebenen JavaScript und maschinell generiertem asm.js entwickelt. Der leistungskritische Teil der Codebasis ist die Physik-Engine. Dies ist als eine dünne, handgeschriebene Schicht implementiert, die ammo.js, des von Emscripten generierten JavaScript-Port der Open-Source-Physik-Engine Bullet, umhüllt. Wenn Sie noch nie von Bullet gehört haben, können Sie damit erstaunliche AAA-Spiele wie Red Dead Redemption und GTAV spielen. Dank Mozillas bahnbrechender Arbeit an Emscripten und asm.js wird all diese Leistung auch über die PlayCanvas-Engine verfügbar gemacht. Ammo.js läuft mit ca. 1,5x nativer Codegeschwindigkeit in den letzten Versionen von Firefox. Wenn Sie also der Meinung sind, dass komplexe Physiksimulationen mit JavaScript einfach nicht praktikabel sind, denken Sie noch einmal nach.

Aber was ist mit den nicht-asm.js-Teilen der Codebasis? Gerade für die Grafik-Engine ist die Performance nach wie vor sehr wichtig. Der Renderer ist hoch optimiert, um Zeichnungsaufrufe nach Material zu sortieren und redundante WebGL-Aufrufe zu eliminieren. Es wurde auch sorgfältig beschrieben, um dynamische Zuweisungen zu verweiden, um potenzielle Stalls aufgrund der Garbage Collection abzuwehren. Der Code funktioniert also hervorragend, ist aber auch leicht für den Menschen lesbar.

Tolle Projekte mit viel Power.

Die PlayCanvas Engine treibt bereits einige großartige Projekte an. Die mit Abstand größte ist die PlayCanvas-Website: die weltweit erste Cloud-basierte Game-Development-Plattform.

Die Frustation über die Grenzen der aktuellen Generation von Game-Engines ist schon seit Jahren hoch. Kurz nachdem mit der Arbeit an der PlayCanvas Engine begonnen wurde, begann PlayCanvas damit, eine neue Art von Game-Development-Plattform zu entwickeln.

Zugänglichkeit: über ein beliebiges Gerät mit einem Webbrowser, schließen Sie eine URL an und greifen Sie sofort auf einfache, intuitive und dennoch leistungsstarke Tools zu.

Zusammenarbeit: Sehen Sie, woran Sie in Echtzeit arbeiten oder lehnen Sie sich einfach zurück und sehen Sie sich ein Spiel an, das live vor ihren Augen aufgebaut wurde.

Social: das Erstellen von Spielen ist mit Hilfe anderer einfacher. Werden Sie Teil einer Online-Community von Entwicklern wie Sie es sind.

Hier finden Sie ein Spiel, das mit diesen Tools entwickelt wurde. Es nennt sich SWOOOOP:

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Datenschutzerklärung.

Es ist eine große Demonstration dessen, was Sie heute mit HTML5 und WebGL erreichen können. Das Spiel läuft sowohl in mobilen als auch in Desktop-Browsern und Sie können ihre PlayCanvas-Spiele auch in App-Stores hochladen. Für Google Play und den iOS App Store gibt es Wrapping-Technologien, die eine native App ihres Spiels erzeugen können. Beispiele dafür sind Ludei`s CocoonJS und das Open Source Projekt Ejecta. Für Firefox OS ist der Prozess ein Kinderspiel, da das Betriebssystem HTML5-Anwendungen sehr gut verarbeiten kann. PlayCanvas-Spiele laufen sofort nach dem Entpacken.

Wir sind sehr gespannt, was die Open Source Community mit der PlayCanvas Engine machen wird. Werden Sie also kreativ und informieren Sie uns über ihre Projekte.