Was sind gute JS-Bibliotheken für Spieleentwickler? [geschlossen]

Wenn ich beschließe, ein einfaches Spiel sowohl in Textform als auch in grafischer Form (2d) zu schreiben, welche Bibliotheken würde ich verwenden? (Angenommen, wir verwenden einen HTML5-kompatiblen Browser.)

Die Hauptsachen, an die ich denken kann

• Rendern von Text auf dem Bildschirm
• Sprites animieren (mit Bildern / CSS)
• Eingabe (Erfassen der Pfeiltasten und Abrufen der relativen Mauspositionen)
• Vielleicht etwas Ressourcen vorab laden oder Ressourcen dynamisch laden und Reihenfolge wählen
• Ton (aber ich bin mir nicht sicher, wie wichtig mir das zuerst sein wird). Vielleicht mit Mischen und Verketten von Sounds oder Endlosschleifen.
• Netzwerk (niedrige Priorität) zum Verbinden eines Benutzers mit einem anderen oder zum kontinuierlichen Abrufen von Daten ohne Mehrfachanforderung (ich weiß, dass dies vorhanden ist, aber ich weiß nicht, wie einfach das Einrichten oder Verwenden ist. Aber das ist für mich nicht wichtig. Es ist für die Frage).

jQuery und MooTools sind großartige JavaScript-Bibliotheken. Ich bevorzuge jQuery. Beide unterstützen Sie bei der Entwicklung Ihres JS-Spiels, wenn Sie das DOM verwenden. Wenn Sie mit Canvas-Rendering arbeiten, sollten Sie nach wie vor eine dieser Bibliotheken verwenden, aber Sie müssen die Canvas-Funktionen erlernen. Hier ist ein Tutorial, das Sie mit dem Canvas-Bereich vertraut macht, indem Sie einen Breakout-Klon erstellen. Es könnte also genau das sein, wonach Sie suchen (und es verwendet jQuery).

Das Animieren von Sprites besteht darin, eine Bildquelle zu ändern oder mehrere Bilder vorab zu laden und sie auszutauschen, oder in einer Leinwand, in der nur Frames einer Animation gezeichnet werden. Die oben genannten Bibliotheken können in jedem dieser Fälle helfen. Die Bibliotheken helfen auch bei der Eingabe (sehen Sie sich Ereignisse wie onkeypress und onmousemove an).

Zum Vorabladen von Ressourcen habe ich einige Spiele vorgestellt, die ein einzelnes "Sprite Sheet" verwenden ( hier ist das für Googles Pacman- Spiel). Ich glaube, dass sie im Grunde genommen einen DIV mit einer Kachelgröße erstellen, wobei die CSS-Hintergrundbild-Eigenschaft auf das Sprite-Blatt und die Hintergrundpositions- Eigenschaft auf den Versatz der Kachel auf dem Sprite-Blatt festgelegt sind. Ich habe keine Bibliothek gesehen, die dies für Sie erledigt, aber jQuery oder MooTools können Ihnen dabei helfen, die DIV dynamisch zu erstellen und deren CSS zu manipulieren. Andernfalls müssen Sie beim Vorabladen von Bildern <img>Tags für die Bilder erstellen, die Sie vorab laden möchten, und diese nicht zur Seite hinzufügen (oder unsichtbar hinzufügen). Hier ist ein Blog-Beitrag Das enthält Code für eine Funktion, die jQuery verwendet, um Bilder vorab für Sie zu laden.

SoundManager 2 scheint die zu verwendende JS- Soundbibliothek zu sein. Ich weiß, dass Vanthia es verwendet und Googles Pacman etwas Ähnliches (oder zumindest die gleiche Technik, nämlich eine versteckte Flash-Datei auf der Seite zu verwenden, um Sounds abzuspielen).

Für die Vernetzung kann jQuery AJAX für Sie handhaben. Wenn Sie mehr Echtzeit-Vernetzung wünschen (und der Server dies tun muss), schauen Sie in JavaScript-Sockets . Ich weiß nicht, ob es eine stabile Bibliothek dafür gibt, aber Sie könnten dies oder jenes untersuchen . Im Wesentlichen wird eine versteckte Java- oder Flash-Datei auf der Seite verwendet, damit Sie eine echte Socket-Kommunikation mit JavaScript durchführen können. Dies ist viel schneller als AJAX-Polling und etwas effizienter als "AJAX Push" . Am wahrscheinlichsten ist jedoch AJAX Push das, was Sie wollen, und APE (Ajax Push Engine) ist wahrscheinlich die zu verwendende Bibliothek.

Hier ist auch ein Google-Tech-Vortrag zum Thema "Erstellen einer JavaScript-basierten Game Engine für das Web" . Es sieht ordentlich aus.

Als ich vor einiger Zeit JavaScript-Engines evaluierte, war mein Favorit Crafty:

http://craftyjs.com/

Es gab eine Menge Optionen, die ich in Betracht ziehen musste, und einige andere, die mir gefielen, waren:

http://easeljs.com/

http://www.limejs.com/

http://code.google.com/p/casualjs/

(Übrigens ist http://impactjs.com/ eine andere Option, die anfangs ziemlich schick aussieht, aber wenn man bedenkt, dass sie Geld kostet, und die anderen Optionen, die ich mir ansah, waren Open-Source-Engines, gab es einige krasse Auslassungen, wie die Unfähigkeit, Anzeigeelemente anzuhängen eine Erbe.)

UPDATE: Es ist fast 2 Jahre her, seit ich diese Antwort gepostet habe und die Situation hat sich leicht geändert (dies ist ein aufkommender Bereich der Technologie). Obwohl Crafty immer noch eine gute Wahl ist, hat EaselJS im vergangenen Jahr (insbesondere) eine Menge an Dynamik gewonnen unter Berücksichtigung Adobe hüpfte auf dem EaselJS Zuge .) ich werde Schalter auf dieses Werkzeug für zukünftige Projekte (auch beachten , dass es eine hat neue Website )

Die Effect Games Engine (Javascript) ist fantastisch für 2D, Tile / Sprite-basierte Spiele. Die Website beschreibt nicht sehr gut, was an ihr so ​​großartig ist, aber sobald Sie sich in die exzellente Dokumentation vertiefen, werden Sie sehen, wie viel für Sie abgedeckt wurde:

• Sprit
• Kollisionserkennung
• Levelbearbeitung
• Anlagenmanagement
• Audio-
• Eingabe und Kontrolle
• Erstellung und Verwaltung von Kachelsätzen
• Schichtung
• Animation
• Leistung (Festlegen einer Framerate)
• browserübergreifende Unterstützung und Abstraktionen
• Hosting
• einbetten
• HUD-Unterstützung

Ich kann wirklich keine vollständige Liste bereitstellen, da diese so umfassend ist. Eine Sache, die fehlt, ist die Möglichkeit, Menüs und Benutzeroberflächen im Spiel zu erstellen (z. B. Ausrüstungsmanager usw.), die aber angeblich auf der Aufgabenliste stehen.

Ich verwalte eine 2D-Canvas-Game-Engine namens JawsJS - http://jawsjs.com/

Quelle @ https://github.com/ippa/jaws

Cliffnotes:

• Lesbarer, dokumentierter Code
• Mehr als 12 dokumentierte Beispiele
• Nützliche Konstruktoren wie Sprite (), SpriteSheet () und Animation ()
• Spielzustände - Separate Abschnitte Ihres Spiels für besser organisierten Code
• Assets - Jaws lädt alle Assets vor Spielbeginn auf
• Hängt von keiner anderen Javascript-Bibliothek ab
• Baut auf Lehren aus der jahrelangen Entwicklung von Chingu auf, einer Ruby-Spielelib

Der Aufprall wird krank! Schauen Sie sich einfach das Demo-Spiel Biolab Disaster an .

Ich habe in letzter Zeit selbst einige Nachforschungen in diesem Bereich angestellt. Lassen Sie mich also meine 0,02 USD einsacken:

PlayN ist eine plattformübergreifende Bibliothek von Google, die ein objektorientiertes Spiel von Java nach Javascript / Flash / Android kompiliert. Es verarbeitet JSON (AJAX) und Datenmodelle und verfügt über eine vernünftige Semantik für Aktualisierungen und Rendering. Sehr cooles Zeug.

Processing ist eine einfach zu verwendende Bibliothek, die sich an Designer und Künstler richtet. Es ist außergewöhnlich einfach zu bedienen und liefert großartige Ergebnisse. Ich habe die Java-Version für die wissenschaftliche Modellierung verwendet und es ist eine Freude, sie zu verwenden. Die 3D-Szenen benötigen WebGL, aber die 2D-Szenen funktionieren ohne.

Three.js hat einige großartig aussehende Demos. Es erfordert WebGL, aber das Ergebnis scheint es wert zu sein. Es gibt auch einige interessante Beispiele online.

Hier sind einige der anderen Elemente in meinen persönlichen Linkdumps, die sich auf WebGL beziehen:

• http://www.glge.org/
• http://scenejs.org/
• https://github.com/itsnotlupus/webgl-mmo
• http://www.c3dl.org/
• http://creativejs.com/

Akihabara ist ein Framework, das ich an mehreren Stellen gesehen habe. Ein Freund von mir hat auch eine Reihe von Tutorials und Dokumentationen für das Framework erstellt.

http://rocketpack.fi/ scheint sich etwas zu ergeben.

Eine andere, die ich kürzlich mit großem Interesse untersucht habe, ist CreateJs . Es ist eine Sammlung von Open-Source-Bibliotheken , um ...

• EaslJs: Html5 Canvas Helfer
• TweenJs Animationshilfe
• SoundJs: Sound
• PreloadJs: Laden und Verwalten von Assets

Darüber hinaus funktioniert es problemlos mit Box2D JS

Pixie Plugins

Die Macher von Contrasaurus haben viele ihrer Einzelkomponenten veröffentlicht !!!

Sie haben Code, um Matrixtransformationen , Canvas-Abstraktionen und viele weitere interessante Dinge durchzuführen.

Ihr Code ist großartig und ihre Bibliotheken sind wirklich nützlich.

Impact JavaScript Game Engine für iOS sieht vielversprechend aus. Der Link zeigt eine Demo, die aber noch nicht veröffentlicht wurde.

Seltsam, dass Google Closure Library nicht erwähnt wurde. Es hat eine riesige API, erlaubt einen objektorientierteren Codierungsstil und hat den Compiler.

Bisher habe ich nur den Compiler verwendet, aber ich plane, so schnell wie möglich zu studieren.

Normalerweise benutze ich jawsjs, weil es wirklich einfach ist, es in wenigen Minuten einzurichten und ein Spiel zu entwickeln. Es gibt viele wirklich nützliche Standardklassen (Tilemap, Viewport, Sprite und andere), die bei der Spieleentwicklung wirklich hilfreich sind.

Sie haben tatsächlich eine Menge davon, aber zuerst hängt es hauptsächlich davon ab, welche Art von Game-Engine Sie suchen. Ich kann Ihnen einige der bemerkenswertesten Referenzen nennen.

2D Game Engines

• Cocos2D ist im Moment tendenziell etwas modischer. Ich habe kürzlich gesehen, dass Cocos2D-Fragen hier und da auf Stackoverflow auftauchten.
• Auswirkungen , können Sie einen Benchmark auf der offiziellen Website sehen.

3D-Game-Engines

Die Mozilla Foundation hat an einer 3D-Game-Engine namens Paladin gearbeitet . Es ist Mozilla, dass es nicht wirklich schaden kann, denke ich.

Es gibt auch gameQuery, eine jQuery-basierte Game-Engine. Verfügt über eine anständige Dokumentation zu ihrer API sowie über einige Sound-Wrapper-APIs, auf die sie auf ihrer Site verlinken.

http://gamequery.onaluf.org/

Mozilla Gaming hat eine Liste auf seinen Ressourcen- Seiten. Es verweist auf Diggy , eine DHTML-Spiel-Engine, die ich vor einiger Zeit gebaut habe. Live Demo hier!

Matrix.js ist gut, wenn Sie Matrixtransformationen im Flash-Stil erhalten möchten.

Tom hier von Scirra, wir sind ein 2-Mann-Team, das Construct 2, den HTML5-Game-Maker, entwickelt hat . (Kostenlose Version verfügbar).

Vielleicht möchten Sie einen Motor wie unseren in Betracht ziehen, da er einen Großteil der Arbeit für Sie erledigt. Beispielsweise kann es sehr schwierig sein, selbst Kollisionen im Code zu erstellen (denken Sie an Polygonkollisionen). Alles auf Ihrer Liste ist mit Construct 2 leicht zu erreichen.