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

56

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).
html5 javascript user1047
quelle
3
Ziemlich vollständige Liste der HTML5-Spielelibs github.com/bebraw/jswiki/wiki/Game-Engines
oberhamsi
Was? All das können Sie mit reinem JavaScript erledigen. Socket.io für die Vernetzung.
Jcora
Sie könnten Stage.js interessant finden (ich bin der Autor).
Ali Shakiba

Antworten:

25

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.

Ricket
quelle
2
Diese Antwort ist ein bisschen konservativ; Wenn er nur HTML5-Browser verwenden möchte, kann er sich für Canvas entscheiden und eine der HTML5-Bibliotheken verwenden (siehe meinen Kommentar zu der Frage). Das Verwenden von DOM & CSS für Spiele scheint ein Hack zu sein (obwohl in einigen Fällen ein praktikabler Hack).
Oberhamsi
2
Wie kommt es einem Hack vor? Google hatte kein Problem damit, reines DOM & CSS mit dem PacMan-Logo zu verwenden, und ich mag mein Pong-Spiel auf meiner Homepage sehr. Um ehrlich zu sein, wirkt Canvas wie ein Hack, der ein Quadrat aus Grafik-Renderings in eine Seite hackt, die sonst vom DOM dominiert wird. Aber leider wird der Browser mit dem Vorstoß dahin und WebGL klar zur schwergewichtigen Do-All-App, wenn es nicht schon geschehen ist. Ich schweife ab ...
Ricket
Wenn er Audio, Networking und Text-Rendering verwenden möchte, muss er einen HTML5-fähigen Browser verwenden. Leider Leinwand wäre eine gute Wahl. Wenn Sie sich an DOM & CSS halten, sind Sie insofern eingeschränkt, als diese Technologien bereits eine Präsentationsebene mit bestimmten Voraussetzungen (Textfluss, Ebenen, Art eines Szenendiagramms für ein Textdokument) bilden. Während Sie mit Canvas Pixel so manipulieren können, wie Sie es für richtig halten. Dies entspricht eher einer "normalen" Raw-Game-Engine auf SDL- oder OpenGL-Basis.
Oberhamsi
Die von mir bereitgestellten Audio- und Netzwerkbibliotheken erfordern kein HTML5. Tatsächlich sehe ich den Textfluss, die Ebenen- und Szenendiagrammähnlichkeit als Vorteile. Die meisten Spiele sind nur Sprites (Bilder), die positioniert und verschoben werden und keinen direkten Zugriff auf Pixel benötigen. Es muss wirklich basierend auf dem Spiel ausgewertet werden , die Sie allerdings machen wollen, und auch , wenn Sie mit Leinwand oder DOM persönlich sind bequemer, wenn Sie älteren Browser unterstützen, wenn Sie die zusätzliche Leistung Leinwand bietet, usw.
Ricket
1
Ja, es kommt auf das Spiel an. Aber er fragt nach HTML5 und Ihre Antwort bezieht sich hauptsächlich auf Flash und DOM Level 1 :) Wenn er die neuesten HTML5-Entwicklungen durchführen möchte, locken Sie ihn nicht zurück.
Oberhamsi
12

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 )

jhocking
quelle
Was schlagen Sie heute vor? nach 4 Jahren
Pooya Estakhri
1
Nun, das Update war vor 1,5 Jahren und das schlage ich immer noch vor.
jhocking
7

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.

Rahul
quelle
4
Leider scheint die Effektmaschine völlig aufgegeben zu sein.
Letharion
6

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
ippa
quelle
4

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:

brice
quelle
3

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.

Alex Schearer
quelle
1

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.

DFectuoso
quelle
1

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.

Petteri Hietavirta
quelle
1

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.

David Gomes
quelle
1

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.

user14170
quelle
0

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/

numo16
quelle
0

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!

richtaur
quelle
0

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

Daniel X Moore
quelle
0

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.

Tom Gullen
quelle