Quali sono le buone librerie JS per gli sviluppatori di giochi? [chiuso]


56

Se decidessi di scrivere un semplice gioco sia testuale che grafico (2d) quali librerie avrei usato? (Supponiamo che stiamo usando un browser compatibile HTML5)

Le cose principali che mi vengono in mente

  • Rendering del testo sullo schermo
  • Sprite di animazione (usando immagini / css)
  • Input (catturare i tasti freccia e ottenere posizioni relative del mouse)
  • Forse qualche risorsa di precaricamento o caricamento dinamico delle risorse e scelta dell'ordine
  • Suono (ma non sono sicuro di quanto sia importante per me all'inizio). Forse con il mixaggio e il concatenamento di suoni o il looping per sempre fino all'arresto.
  • Networking (bassa priorità) per connettere un utente a un altro o ottenere continuamente dati senza richiesta multipla (so che esistono ma non so quanto sia facile da configurare o utilizzare. Ma questo non è importante per me. la domanda).

3
Elenco abbastanza completo di librerie di giochi html5 github.com/bebraw/jswiki/wiki/Game-Engines
oberhamsi

Che cosa? Puoi fare tutto questo con solo puro JavaScript. Socket.io per il networking, però.
jcora,

Potresti trovare Stage.js interessante (sono il suo autore).
Ali Shakiba,

Risposte:


25

jQuery e MooTools sono fantastiche librerie JavaScript; Preferisco jQuery da solo. O uno ti assisterà nello sviluppo del tuo gioco JS se usi il DOM. Se vai con il rendering di Canvas, penso ancora che dovresti usare una di quelle librerie, ma dovrai imparare le funzioni di Canvas. Ecco un tutorial che ti introduce alla tela creando un clone Breakout, quindi potrebbe essere esattamente il tipo di cosa che stai cercando (e usa jQuery).

L'animazione degli sprite è una questione di modifica di un'immagine src, precaricamento di più immagini e scambio di esse, o in una tela semplicemente disegnando cornici di un'animazione. Le librerie sopra riportate possono essere utili in questi casi. Le librerie aiutano anche con l'input (guarda eventi come onkeypress e onmousemove).

Per quanto riguarda il precaricamento delle risorse, mi sembrano alcuni giochi che utilizzano un'unica immagine "sprite sheet" ( ecco quella per il gioco Pacman di Google ). Credo che fondamentalmente creino un DIV di una dimensione del riquadro, con la proprietà CSS background-image impostata sul foglio sprite e la proprietà position-background impostata sull'offset del riquadro sul foglio sprite. Non ho visto una libreria che farà questo per te, ma jQuery o MooTools ti possono aiutare fino a creare dinamicamente il DIV e manipolarne il CSS. Altrimenti, il precaricamento delle immagini è una questione di creazione di <img>tag delle immagini che si desidera precaricare e di non aggiungerle alla pagina (o aggiungerle invisibilmente). Ecco un post sul blog che ha del codice per una funzione che utilizza jQuery per precaricare le immagini per te.

SoundManager 2 sembra essere la libreria di suoni JS da usare; So che Vanthia lo usa, e Pacman di Google hausato qualcosa di simile (o almeno la stessa tecnica, di usare un file Flash nascosto sulla pagina per riprodurre suoni).

Per la rete, jQuery può gestire AJAX per te, o se vuoi una rete molto più in tempo reale (e hai il server per farlo), cerca nei socket JavaScript . Non so se ci sia una libreria stabile là fuori per questo, ma potresti esaminare questo o questo . Essenzialmente utilizza un file Java o Flash nascosto nella pagina in modo da poter effettuare una vera comunicazione socket con JavaScript, che è molto più veloce del polling AJAX e leggermente più efficiente di "AJAX Push" . Tuttavia, molto probabilmente, AJAX Push sarà quello che vuoi e APE (Ajax Push Engine) è probabilmente la libreria da usare.

Inoltre, ecco un discorso tecnico di Google su "Costruire un motore di gioco basato su JavaScript per il Web" . Sembra pulito.


2
Questa risposta è un po 'conservativa; se vuole usare solo i browser html5, allora può andare su tela e usare una delle librerie html5 (vedi il mio commento sulla domanda). L'uso di DOM e CSS per i giochi sembra un hack (sebbene in alcuni casi un hack praticabile).
Oberhamsi,

2
Cosa lo fa sembrare un hack? Google non ha avuto problemi a utilizzare DOM e CSS puri con il loro logo PacMan e mi piace molto il mio gioco di pong sulla mia homepage. A dire il vero, la tela sembra un hack, hackerando un quadrato di rendering grafico in una pagina altrimenti dominata dal DOM. Ma purtroppo con la spinta verso questo e WebGL è chiaro che il browser diventerà l'app heavy-do-tutto se non lo è già. Sto divagando ...
Ricket

Se vuole usare l'audio, il networking, il rendering del testo dovrà usare un browser predisposto per html5. Purtroppo la tela sarebbe una buona scelta. Se rimani con DOM e CSS sei limitato nella misura in cui queste tecnologie formano già un livello di presentazione con determinate ipotesi (flusso di testo, stratificazione, tipo di grafico di scena per un documento di testo). Considerando che con canvas puoi manipolare i pixel in qualsiasi modo tu ritenga opportuno, il che è più vicino ai motori di gioco "normali" grezzi su SDL o Opengl.
oberhamsi,

Le librerie audio e di rete fornite non richiedono HTML5. E in realtà vedo il flusso di testo, la stratificazione e la somiglianza del grafico della scena come benefici. La maggior parte dei giochi sono solo sprite (immagini) posizionati e spostati e non richiedono l'accesso diretto ai pixel. Deve davvero essere valutato in base al gioco che si desidera realizzare, e anche se si è personalmente più a proprio agio con canvas o DOM, se si desidera supportare i browser più vecchi, se è necessario il extra power fornisce, ecc.
Ricket,

1
sì, dipende dal gioco. Ma chiede HTML5 e la tua risposta riguarda principalmente Flash e DOM livello 1 :) Se vuole fare lo sviluppo di HTML5 all'avanguardia, non attirarlo indietro.
oberhamsi,

12

Quando ho valutato i motori JavaScript un po 'di tempo fa, il mio preferito era Crafty:

http://craftyjs.com/

C'erano un gran numero di opzioni che dovevo considerare, e alcune altre che mi piacevano erano:

http://easeljs.com/

http://www.limejs.com/

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

(Per inciso, un'altra opzione che sembra piuttosto elegante inizialmente è http://impactjs.com/ ma considerando che costa denaro e le altre opzioni che ho visto erano motori open source c'erano alcune evidenti omissioni, come l'incapacità di collegare elementi di visualizzazione in un'erarchia).


AGGIORNAMENTO: Sono passati quasi 2 anni da quando ho pubblicato quella risposta e la situazione è leggermente cambiata (questa è un'area nascente della tecnologia.) Sebbene Crafty sia ancora un'ottima scelta, nell'ultimo anno EaselJS ha raccolto molto slancio (soprattutto considerando che Adobe è salito sul treno EaselJS .) Passerò a quello strumento per progetti futuri (nota anche che ha un nuovo sito Web )


cosa suggerisci oggi? dopo 4 anni
Pooya Estakhri

1
Bene, l'aggiornamento è stato di 1,5 anni fa, e lo consiglio ancora.
jhocking

7

Il motore di Effect Games (javascript) è fantastico per i giochi basati su 2d, tile / sprite. Il sito Web non fa un ottimo lavoro nel descrivere ciò che è fantastico, ma non appena si scava nella documentazione eccellente vedrai quanto ti è stato coperto:

  • sprite
  • rilevamento delle collisioni
  • editing di livello
  • gestione delle risorse
  • Audio
  • input e controllo
  • creazione e gestione di tileset
  • stratificazione
  • animazione
  • performance (blocco su un framerate)
  • supporto e astrazioni cross-browser
  • ospitando
  • incorporamento
  • Supporto HUD

Non riesco davvero a fornire un elenco completo in quanto è così completo. Una cosa che manca è la possibilità di creare menu di gioco e interfaccia utente (ad es. Gestori di attrezzature, ecc.), Ma è presumibilmente nell'elenco delle cose da fare.


4
Sfortunatamente il motore degli effetti sembra essere completamente abbandonato.
Letharion,

6

Mantengo un motore di gioco 2D canvas chiamato JawsJS - http://jawsjs.com/

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

cliffnotes:

  • Codice leggibile e documentato
  • 12+ esempi documentati in bundle
  • Costruttori utili come Sprite (), SpriteSheet () e Animation ()
  • Stati del gioco - Separa le sezioni del gioco per un codice organizzato meglio
  • Risorse - Jaws precaricherà tutte le tue risorse prima dell'inizio del gioco
  • Non dipende da nessun'altra libreria javascript
  • Si basa sulle lezioni apprese da anni di sviluppo di Chingu, un gioco per Ruby lib


4

Ultimamente ho fatto delle ricerche in questo settore, quindi permettimi di aggiungere $ 0,02:

PlayN è una libreria multipiattaforma di Google, che compila un gioco orientato agli oggetti da Java a javascript / Flash / Android. Gestirà JSON (AJAX), modelli di dati e ha una semantica sana per aggiornamenti e rendering. Roba molto bella.

Processing è una libreria semplice da usare rivolta a designer e artisti. È eccezionalmente semplice da usare e può darti grandi risultati. Ho usato la versione Java per la modellazione scientifica, ed è un piacere da usare. Le scene 3D avranno bisogno di WebGL, ma le scene 2D funzionano senza.

Three.js Ha delle demo fantastiche. Richiede WebGL, ma il risultato sembra valerne la pena. Ci sono anche alcuni esempi interessanti online.

Ecco alcuni degli altri articoli nei miei linkdump personali relativi a WebGL:





1

Plugin Pixie

I creatori di Contrasaurus hanno rilasciato molti dei loro singoli componenti !!!

Hanno un codice per fare trasformazioni di matrici , astrazioni di tela e molte altre cose interessanti.

Il loro codice è eccezionale e le loro librerie sono davvero utili.



1

Strano che Google Closure Library non sia stato menzionato. Ha un'enorme API, consente uno stile di codifica più orientato agli oggetti e ha il compilatore.

Finora ho usato solo il compilatore, ma ho intenzione di studiare il resto al più presto.


1

Di solito uso jawsjs perché è davvero facile configurarlo e iniziare a sviluppare un gioco in pochi minuti. Ha molte classi predefinite davvero utili (Tilemap, Viewport, Sprite e altre) che aiutano molto nello sviluppo del gioco.


1

Ne hai molti in realtà, ma prima dipende principalmente dal tipo di motore di gioco che stai cercando. Posso darvi alcuni riferimenti dei più notevoli.

Motori di gioco 2D

  • Cocos2D tende ad essere un po 'più alla moda al momento. Ho visto domande di Cocos2D spuntare qua e là su Stackoverflow di recente.
  • Impatto , puoi vedere un benchmark in esecuzione sul sito ufficiale.

Motori di gioco 3D

La fondazione Mozilla ha lavorato su un motore di gioco 3D chiamato Paladin . È Mozilla che non può davvero ferire, immagino.


0

C'è anche gameQuery, un motore di gioco basato su jQuery. Ha una documentazione decente sulla loro API, nonché alcune API del wrapper audio a cui si collegano sul loro sito.

http://gamequery.onaluf.org/




0

Tom qui da Scirra, siamo un team di 2 uomini che ha creato Construct 2, il creatore di giochi HTML5 . (Versione gratuita disponibile).

Potresti prendere in considerazione un motore come il nostro perché fa molto lavoro per te. Ad esempio fare collisioni nel codice da soli può essere davvero complicato (pensa alle collisioni poligonali). Tutto sul tuo elenco è facilmente raggiungibile con Construct 2.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.