¿Cuáles son las buenas bibliotecas JS para desarrolladores de juegos? [cerrado]

56

Si decido escribir un juego simple, tanto de texto como gráfico (2d), ¿qué bibliotecas usaría? (Supongamos que estamos usando un navegador compatible con HTML5)

Lo principal en lo que puedo pensar

  • Renderizar texto en pantalla
  • Animar sprites (usando imágenes / css)
  • Entrada (capturar las teclas de flecha y obtener posiciones relativas del mouse)
  • Quizás algún recurso de precarga o cargando recursos dinámicamente y eligiendo orden
  • Sonido (pero no estoy seguro de lo importante que será para mí al principio). Tal vez con sonidos de mezcla y encadenamiento o bucles para siempre hasta detenerse.
  • Redes (prioridad baja) para conectar a un usuario con otro o para obtener continuamente datos sin solicitud múltiple (Sé que esto existe, pero no sé lo fácil que es configurarlo o usarlo. Pero esto no es importante para mí. Es para la pregunta).
html5 javascript usuario1047
fuente
3
Lista bastante completa de libs de juegos html5 github.com/bebraw/jswiki/wiki/Game-Engines
oberhamsi
¿Qué? Puede hacer todo eso con JavaScript puro. Socket.io para redes, sin embargo.
jcora
Puede encontrar Stage.js interesante (soy su autor).
Ali Shakiba

Respuestas:

25

jQuery y MooTools son geniales bibliotecas de JavaScript; Prefiero jQuery yo mismo. Cualquiera de los dos te ayudará en el desarrollo de tu juego JS si usas el DOM. Si optas por el renderizado de Canvas, sigo pensando que deberías usar una de esas bibliotecas, pero necesitarás aprender las funciones de Canvas. Aquí hay un tutorial que lo introduce al lienzo creando un clon de Breakout, por lo que podría ser exactamente el tipo de cosa que está buscando (y usa jQuery).

Animar sprites es una cuestión de cambiar el src de una imagen, o precargar varias imágenes e intercambiarlas, o en un lienzo simplemente dibujando cuadros de una animación. Las bibliotecas anteriores pueden ayudar con cualquiera de estos casos. Las bibliotecas también ayudan con la entrada (ver eventos como onkeypress y onmousemove).

Para precargar recursos, me parecen algunos juegos que usan una sola imagen de "hoja de sprite" ( aquí está la del juego Pacman de Google ). Creo que básicamente crean un DIV de un tamaño de mosaico, con la propiedad de imagen de fondo CSS establecida en la hoja de sprite y la propiedad de posición de fondo establecida en el desplazamiento del mosaico en la hoja de sprite. No he visto una biblioteca que haga esto por usted, pero jQuery o MooTools pueden ayudarlo a crear dinámicamente el DIV y manipular su CSS. De lo contrario, la carga previa de imágenes es una cuestión de crear <img>etiquetas de las imágenes que desea cargar previamente y no agregarlas a la página (o agregarlas de forma invisible). Aquí hay una publicación de blog que tiene algún código para una función que usa jQuery para precargar imágenes por usted.

SoundManager 2 parece ser la biblioteca de sonidos JS para usar; Sé que Vanthia lo usa, y Pacman de Googleusó algo similar (o al menos la misma técnica, de usar un archivo Flash oculto en la página para reproducir sonidos).

Para redes, jQuery puede manejar AJAX por usted, o si desea una red mucho más en tiempo real (y tiene el servidor para hacerlo), busque en los enchufes de JavaScript . No sé si hay una biblioteca estable para eso, pero podrías investigar esto o esto . Básicamente, utiliza un archivo Java o Flash oculto en la página para que pueda hacer una verdadera comunicación de socket con JavaScript, que es mucho más rápido que el sondeo AJAX y un poco más eficiente que "AJAX Push" . Sin embargo, lo más probable es que AJAX Push sea lo que desea, y APE (Ajax Push Engine) es probablemente la biblioteca para usar.

Además, aquí hay una charla técnica de Google sobre "Creación de un motor de juego basado en JavaScript para la Web" . Se ve bien.

Ricket
fuente
2
Esta respuesta es un poco conservadora; si solo quiere usar los navegadores html5, puede buscar el lienzo y usar una de las bibliotecas html5 (vea mi comentario sobre la pregunta). Usar DOM y CSS para juegos parece un hack (aunque en algunos casos es un hack viable).
oberhamsi
2
¿Qué lo hace parecer un hack? Google no tuvo problemas para usar DOM y CSS puro con su logotipo de PacMan y me gusta bastante mi juego de pong en mi página de inicio. En realidad, para ser honesto, el lienzo parece un truco, pirateando un cuadrado de representación gráfica en una página dominada por el DOM. Pero, por desgracia, con el impulso hacia eso y WebGL está claro que el navegador se convertirá en la aplicación pesada de hacer todo si aún no lo es. Me estoy desviando ...
Ricket
Si quiere usar audio, redes, texto, tendrá que usar el navegador preparado para html5. Por desgracia, la lona sería una buena elección. Si te quedas con DOM y CSS, estás limitado en la medida en que estas tecnologías ya forman una capa de presentación con ciertos supuestos (flujo de texto, capas, una especie de gráfico de escena para un documento de texto). Mientras que con el lienzo puedes manipular los píxeles de la forma que mejor te parezca, lo que está más cerca de los motores de juego `` normales '', en la parte superior de SDL u opengl.
Oberhamsi
Las bibliotecas de audio y redes que proporcioné no requieren HTML5. Y en realidad veo el flujo de texto, las capas y la semejanza del gráfico de escena como beneficios. La mayoría de los juegos son solo sprites (imágenes) que se colocan y se mueven y no necesitan acceso directo a píxeles. Realmente necesita ser evaluado en base al juego que desea hacer, sin embargo, y también si usted es personalmente más cómodo con lona o DOM, si quieres apoyar a los navegadores más antiguos, si necesita el lienzo proporciona energía adicional, etc
Ricket
1
Sí, depende del juego. Pero él pide HTML5 y su respuesta es principalmente sobre Flash y DOM nivel 1 :) Si quiere hacer un desarrollo HTML5 de vanguardia, entonces no lo atraiga.
Oberhamsi
12

Cuando evalué los motores de JavaScript hace un tiempo, mi favorito era Crafty:

http://craftyjs.com/

Hubo muchísimas opciones que tuve que considerar, y algunas otras que me gustaron fueron:

http://easeljs.com/

http://www.limejs.com/

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

(Por cierto, otra opción que parece bastante ingeniosa inicialmente es http://impactjs.com/ pero teniendo en cuenta que cuesta dinero y las otras opciones que miré eran motores de código abierto, hubo algunas omisiones evidentes, como la incapacidad de adjuntar elementos de visualización en una jerarquía)

ACTUALIZACIÓN: Han pasado casi 2 años desde que publiqué esa respuesta y la situación ha cambiado ligeramente (esta es un área naciente de tecnología). Aunque Crafty sigue siendo una gran opción, en el último año EaselJS ha cobrado mucho impulso (especialmente considerando que Adobe se subió al tren EaselJS .) Voy a cambiar a esa herramienta para futuros proyectos (también tenga en cuenta que tiene un nuevo sitio web )

jhocking
fuente
¿Qué sugieres hoy? después de 4 años
Pooya Estakhri
1
Bueno, la actualización fue de hace 1,5 años, y todavía sugiero eso.
jhocking
7

El motor de juegos de efectos (javascript) es fantástico para juegos 2D, basados ​​en mosaicos / sprites. El sitio web no hace un muy buen trabajo al describir lo que es tan bueno al respecto, pero tan pronto como profundice en la excelente documentación verá cuánto se ha cubierto para usted:

  • spriting
  • detección de colisiones
  • edición de nivel
  • gestión de activos
  • audio
  • entrada y control
  • creación y gestión de teselas
  • estratificación
  • animación
  • rendimiento (bloqueo a una velocidad de fotogramas)
  • soporte y abstracciones entre navegadores
  • hospedaje
  • incrustación
  • Soporte de HUD

Realmente no puedo proporcionar una lista exhaustiva, ya que es tan completa. Una cosa que falta es la capacidad de crear menús e interfaz de usuario en el juego (por ejemplo, administradores de equipos, etc.), pero supuestamente está en la lista de tareas pendientes.

Rahul
fuente
44
Lamentablemente, el motor de efectos parece estar completamente abandonado.
Letharion
6

Mantengo un motor de juegos 2D de lienzo llamado JawsJS - http://jawsjs.com/

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

notas de acantilado:

  • Código legible y documentado
  • Más de 12 ejemplos documentados incluidos
  • Constructores útiles como Sprite (), SpriteSheet () y Animation ()
  • Estados del juego: secciones separadas de tu juego para un código mejor organizado
  • Activos: Jaws precargará todos tus activos antes de que comience el juego.
  • No depende de ninguna otra biblioteca de JavaScript
  • Se basa en las lecciones aprendidas de años de desarrollo de Chingu, una lib de juegos de Ruby
ippa
fuente
4

¡El impacto va a estar enfermo! Solo eche un vistazo al juego de demostración, Biolab Disaster .

usuario2418
fuente
4

He estado investigando en esta área últimamente, así que permítanme agregar mis $ 0.02:

PlayN es una biblioteca multiplataforma de Google, que compila un juego orientado a objetos desde Java a javascript / Flash / Android. Manejará JSON (AJAX), modelos de datos y tiene una semántica sensata para actualizaciones y renderizado. Cosas muy chulas.

Processing es una biblioteca fácil de usar que está dirigida a diseñadores y artistas. Es excepcionalmente fácil de usar y puede brindarle excelentes resultados. He usado la versión de Java para el modelado científico, y es una delicia usarla. Las escenas 3D necesitarán WebGL, pero las escenas 2D funcionarán sin ellas.

Three.js tiene algunas demostraciones geniales. Requiere WebGL, pero el resultado parece valer la pena. También hay algunos ejemplos interesantes enlínea.

Estos son algunos de los otros elementos en mis enlaces de enlaces personales que se relacionan con WebGL:

brice
fuente
3

Akihabara es un marco que he visto aparecer en varios lugares. Un amigo mío también creó una serie de tutoriales y documentación para el marco.

Alex Schearer
fuente
1

Complementos Pixie

¡Los creadores de Contrasaurus han lanzado muchos de sus componentes individuales!

Tienen código para hacer transformaciones matriciales , abstracciones de lienzo y muchas cosas más interesantes.

Su código es excelente y sus bibliotecas son realmente útiles.

DFectuoso
fuente
1

Es extraño que Google Closure Library no haya sido mencionado. Tiene una API enorme, permite un estilo de codificación más orientado a objetos y tiene el compilador.

Hasta ahora solo he usado el compilador, pero planeo estudiar el resto lo antes posible.

Petteri Hietavirta
fuente
1

Usualmente uso jawsjs porque es muy fácil configurarlo y comenzar a desarrollar un juego en minutos. Tiene muchas clases predeterminadas realmente útiles (Tilemap, Viewport, Sprite y otras) que realmente ayudan con el desarrollo del juego.

David Gomes
fuente
1

En realidad, tienes muchos de ellos, pero primero depende principalmente del tipo de motor de juego que estés buscando. Puedo darte algunas referencias de las más notables.

Motores de juego 2D

  • Cocos2D tiende a estar un poco más de moda en este momento. Vi preguntas de Cocos2D apareciendo aquí y allá en Stackoverflow recientemente.
  • Impacto , puede ver un punto de referencia en ejecución en el sitio web oficial.

Motores de juego 3D

La fundación Mozilla ha estado trabajando en un motor de juegos en 3D llamado Paladin . Es Mozilla que realmente no puede doler, supongo.

usuario14170
fuente
0

También hay gameQuery, un motor de juego basado en jQuery. Tiene documentación decente en su API, así como algunas API de envoltura de sonido a las que se vincula en su sitio.

http://gamequery.onaluf.org/

numo16
fuente
0

Matrix.js es bueno si desea obtener transformaciones de matriz de estilo Flash.

Daniel X Moore
fuente
0

Tom, de Scirra, somos un equipo de 2 personas que ha creado Construct 2, el creador de juegos HTML5 . (Versión gratuita disponible).

Es posible que desee considerar un motor como el nuestro, ya que hace mucho trabajo por usted. Por ejemplo, hacer colisiones en el código puede ser realmente complicado (piense en colisiones de polígonos). Todo en su lista se puede lograr fácilmente con Construct 2.

Tom Gullen
fuente