Quelles sont les bonnes bibliothèques JS pour les développeurs de jeux? [fermé]

56

Si je décidais d'écrire un jeu simple, texte et graphique (2d), quelles bibliothèques utiliserais-je? (Supposons que nous utilisons un navigateur compatible HTML5)

Les principales choses auxquelles je peux penser

  • Rendu de texte à l'écran
  • Animation de sprites (en utilisant images / css)
  • Entrée (capture des touches fléchées et obtention des positions relatives de la souris)
  • Peut-être certaines ressources préchargées ou le chargement dynamique des ressources et le choix de l'ordre
  • Le son (mais je ne suis pas sûr de l’importance que cela revêt pour moi au début). Peut-être avec le mélange et l'enchaînement des sons ou une boucle pour toujours jusqu'à l'arrêt.
  • Mise en réseau (priorité faible) pour connecter un utilisateur à un autre ou pour obtenir en permanence des données GET sans demande multiple (je sais que cela existe mais je ne sais pas à quel point il est facile à configurer ou à utiliser. Mais cela n’est pas important pour moi. la question).
html5 javascript utilisateur1047
la source
3
Jolie liste complète de librairies de jeux html5 github.com/bebraw/jswiki/wiki/Game-Engines
oberhamsi
Quelle? Vous pouvez faire tout cela avec du JavaScript pur. Socket.io pour la mise en réseau, cependant.
jcora
Vous pouvez trouver Stage.js intéressant (j'en suis l'auteur).
Ali Shakiba

Réponses:

25

jQuery et MooTools sont de superbes bibliothèques JavaScript; Je préfère jQuery moi-même. L’un ou l’autre vous assistera dans le développement de votre jeu JS si vous utilisez le DOM. Si vous optez pour le rendu Canvas, je pense toujours que vous devriez utiliser l'une de ces bibliothèques, mais vous devrez apprendre les fonctions de Canvas. Voici un tutoriel qui vous initie à la zone de travail en créant un clone Breakout, de sorte que ce peut être exactement le genre de chose que vous recherchez (et il utilise jQuery).

L'animation des images-objets consiste à changer une image src, à précharger plusieurs images et à les échanger, ou dans un canevas, en dessinant simplement les images d'une animation. Les bibliothèques ci-dessus peuvent vous aider dans n'importe quel cas. Les bibliothèques aident également à la saisie (examinez des événements tels que onkeypress et onmousemove).

Pour les ressources de préchargement, il me semble que certains jeux utilisent une seule image "feuille de sprite" ( voici celle du jeu Pacman de Google ). Je pense qu'ils créent essentiellement une DIV d'une taille de mosaïque, avec la propriété CSS background-image définie sur la feuille de sprite et la propriété background-position sur le décalage de la mosaïque sur la feuille de sprite. Je n'ai pas vu de bibliothèque qui le fasse pour vous, mais jQuery ou MooTools peut vous aider jusqu'à créer dynamiquement le DIV et à manipuler son CSS. Sinon, le préchargement des images consiste à créer des <img>balises contenant les images à précharger, sans les ajouter à la page (ni à les ajouter de manière invisible). Voici un article de blog qui contient du code pour une fonction utilisant jQuery pour précharger des images pour vous.

SoundManager 2 semble être la bibliothèque de sons JS à utiliser; Je sais que Vanthia l' utilise, et le Pacman de Google autilisé quelque chose de similaire (ou du moins la même technique, qui consiste à utiliser un fichier Flash caché sur la page pour jouer des sons).

Pour la mise en réseau, jQuery peut gérer AJAX pour vous, ou si vous souhaitez davantage de mise en réseau en temps réel (et que le serveur le fasse), examinez les sockets JavaScript . Je ne sais pas s'il existe une bibliothèque stable pour cela, mais vous pourriez examiner ceci ou cela . Il utilise essentiellement un fichier Java ou Flash caché sur la page afin que vous puissiez établir une véritable communication socket avec JavaScript, ce qui est beaucoup plus rapide que les interrogations AJAX et légèrement plus efficace que "AJAX Push" . Cependant, AJAX Push sera probablement ce que vous voulez et APE (Ajax Push Engine) est probablement la bibliothèque à utiliser.

En outre, voici une présentation technique de Google intitulée "Création d’un moteur de jeu basé sur JavaScript pour le Web" . Ça a l'air chouette.

Rachitisme
la source
2
Cette réponse est un peu conservatrice; s'il veut utiliser uniquement les navigateurs html5, il peut alors utiliser la toile et utiliser l'une des bibliothèques html5 (voir mon commentaire sur la question). Utiliser DOM & CSS pour les jeux semble être un hack (bien que dans certains cas, un hack efficace)
Oberhamsi
2
Qu'est-ce qui fait que ça ressemble à un hack? Google n’avait aucun problème à utiliser les logiciels DOM et CSS purs avec leur logo PacMan et j’aime bien mon jeu de pong sur ma page d’accueil. Pour être honnête, la toile ressemble à un hack, piratant un carré de graphismes se transformant en une page par ailleurs dominée par le DOM. Mais hélas, avec la poussée vers cela et WebGL, il est clair que le navigateur deviendra l’application poids lourd à tout faire si ce n’est pas déjà fait. Je m'égare ...
Ricket
S'il veut utiliser l'audio, la mise en réseau, le rendu de texte, il devra utiliser le navigateur compatible HTML5. Hélas la toile serait un bon choix. Si vous vous en tenez à DOM & CSS, vous êtes limité dans la mesure où ces technologies constituent déjà un calque de présentation avec certaines hypothèses (flux de texte, superposition, sorte de graphique de scène pour un document texte). Tandis qu'avec le canevas, vous pouvez manipuler les pixels comme bon vous semble, ce qui est plus proche des moteurs de jeux «normaux», au-dessus de SDL ou opengl.
Oberhamsi
Les bibliothèques audio et réseau que j'ai fournies ne nécessitent pas HTML5. Et en fait, je considère le flux de texte, la superposition et la ressemblance de graphes de scène comme des avantages. La plupart des jeux ne sont que des images-objets positionnées et déplacées et ne nécessitent pas un accès direct aux pixels. Il doit vraiment être évalué en fonction du jeu que vous voulez créer, et également si vous êtes personnellement plus à l'aise avec canvas ou DOM, si vous souhaitez prendre en charge des navigateurs plus anciens, si vous avez besoin de la puissance supplémentaire fournie par canvas, etc.
Ricket
1
Oui, cela dépend du jeu. Mais il demande HTML5 et votre réponse porte principalement sur Flash et DOM niveau 1 :) S'il souhaite faire un développement HTML5 ultra-performant, ne le ramenez pas.
Oberhamsi
12

Lorsque j'ai évalué les moteurs JavaScript il y a un moment, mon préféré était Crafty:

http://craftyjs.com/

Il y avait une foule d'options que je devais prendre en compte, et quelques autres que j'aimais bien étaient:

http://easeljs.com/

http://www.limejs.com/

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

(Incidemment, une autre option qui a l'air plutôt délicate au départ est http://impactjs.com/, mais vu que cela coûte de l'argent et que les autres options que j'ai examinées étaient des moteurs à code source ouvert, il y avait des omissions flagrantes, comme l'impossibilité de joindre des éléments d'affichage dans une hiérarchie.)

MISE À JOUR: Cela fait presque deux ans que j'ai posté cette réponse et la situation a légèrement changé (il s'agit d' un domaine technologique naissant.) Bien que Crafty soit toujours un excellent choix, EaselJS a pris beaucoup d'élan (notamment considérant que Adobe a sauté sur le train EaselJS .) Je vais passer à cet outil pour les projets futurs (notez également qu'il a un nouveau site Web )

jhocking
la source
que suggérez-vous aujourd'hui? après 4 ans
Pooya Estakhri le
1
Eh bien, la mise à jour datait d'il y a un an et demi, et je le suggère toujours.
Jhocking le
7

Le moteur des jeux d'effets (javascript) est fantastique pour les jeux en 2D, basés sur des tuiles / sprites. Le site Web ne fait pas un très bon travail de description de ce qui est génial à ce sujet, mais dès que vous aurez trouvé l'excellente documentation, vous verrez tout ce qui a été couvert pour vous:

  • sprite
  • Détection de collision
  • édition de niveau
  • la gestion d'actifs
  • l'audio
  • entrée et contrôle
  • création et gestion de tileset
  • superposition
  • animation
  • performance (verrouillage sur un framerate)
  • support inter-navigateur et abstractions
  • hébergement
  • enchâssement
  • Support du HUD

Je ne peux vraiment pas fournir une liste exhaustive car elle est si complète. Une chose qui manque, c'est la possibilité de créer des menus dans le jeu et une interface utilisateur (par exemple, des gestionnaires d'équipement, etc.), mais c'est supposé être sur la liste de tâches.

Rahul
la source
4
Malheureusement, le moteur d'effet semble être complètement abandonné.
Letharion
6

Je maintiens un moteur de jeu en toile 2D appelé JawsJS - http://jawsjs.com/

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

notes de falaise:

  • Code lisible et documenté
  • Plus de 12 exemples documentés fournis
  • Constructeurs utiles comme Sprite (), SpriteSheet () et Animation ()
  • Etats du jeu - Séparez les sections de votre jeu pour un code mieux organisé
  • Actifs - Jaws préchargera tous vos actifs avant le début du jeu.
  • Ne dépend d'aucune autre bibliothèque javascript
  • S'appuie sur les leçons tirées des années de développement de Chingu, un jeu de rubis
ippa
la source
4

J'ai moi-même fait des recherches dans ce domaine récemment, alors laissez-moi mettre mon argent à 0,02 $:

PlayN Est une bibliothèque multi-plateformes de Google, qui compile un jeu orienté objet de Java à javascript / Flash / Android. Il gérera JSON (AJAX), les modèles de données et sa sémantique pour les mises à jour et le rendu. Des trucs très cool.

Processing est une bibliothèque simple à utiliser destinée aux concepteurs et aux artistes. Il est exceptionnellement simple à utiliser et peut vous donner d'excellents résultats. J'ai utilisé la version Java pour la modélisation scientifique, et c'est un plaisir à utiliser. Les scènes 3D auront besoin de WebGL, mais les scènes 2D ne fonctionneront pas.

Three.js a quelques démos superbes. Il nécessite WebGL, mais le résultat semble en valoir la peine. Il existe également d’excellents exemples en ligne.

Voici quelques-uns des autres éléments de mes linkdumps personnels liés à WebGL:

brice
la source
1

Plugins Pixie

Les créateurs de Contrasaurus ont publié beaucoup de leurs composants individuels !!!

Ils ont du code pour faire des transformations de matrice , des abstractions de la toile et bien d'autres choses intéressantes.

Leur code est génial et leurs bibliothèques sont vraiment utiles.

DFectuoso
la source
1

Etrange que Google Closure Library n'ait pas été mentionné. Il a une API énorme, permet un style de codage plus orienté objet et dispose du compilateur.

Jusqu'à présent, je n'ai utilisé que le compilateur, mais je compte étudier le repos le plus rapidement possible.

Petteri Hietavirta
la source
1

J'utilise habituellement jawsjs parce qu'il est très facile de le configurer et de commencer à développer un jeu en quelques minutes. Il a beaucoup de classes par défaut vraiment utiles (Tilemap, Viewport, Sprite et autres) qui aident vraiment au développement de jeux.

David Gomes
la source
1

En fait, vous en avez beaucoup, mais cela dépend en premier lieu du type de moteur de jeu que vous recherchez. Je peux vous donner quelques références parmi les plus remarquables.

Moteurs de jeux 2D

  • Cocos2D a tendance à être un peu plus à la mode pour le moment. J'ai vu des questions Cocos2D surgir ici et là sur Stackoverflow récemment.
  • Impact , vous pouvez voir un repère en cours d’exécution sur le site officiel.

Moteurs de jeux 3D

La fondation Mozilla travaille sur un moteur de jeu en 3D appelé Paladin . C'est Mozilla qui ne peut pas vraiment faire mal, je suppose.

utilisateur14170
la source
0

Il existe également GameQuery, un moteur de jeu basé sur jQuery. A une documentation décente sur leur API, ainsi que quelques API de wrapper sonores auxquels ils sont liés sur leur site.

http://gamequery.onaluf.org/

numo16
la source
0

Mozilla Gaming a une liste sur ses pages de ressources . Il est lié à Diggy , un moteur de jeu DHTML que j'ai construit il y a longtemps. Démo en direct ici!

Richtaur
la source
0

Matrix.js est utile si vous souhaitez obtenir des transformations matricielles de style Flash.

Daniel X Moore
la source
0

Tom ici de Scirra, nous sommes une équipe de 2 hommes qui ont créé Construct 2, le créateur de jeux HTML5 . (Version gratuite disponible).

Vous voudrez peut-être envisager un moteur comme le nôtre, car il vous apportera beaucoup de démarches. Par exemple, faire des collisions dans le code vous-même peut être très délicat (pensez aux collisions de polygones). Tout sur votre liste est facilement réalisable avec Construct 2.

Tom Gullen
la source