Advertisement
  1. Code
  2. JavaScript

8 mejores motores de juego y librerías JavaScript gratuitas y de código abierto

Scroll to top
Read Time: 9 min

Spanish (Español) translation by Almond Cova (you can also view the original English article)

Los navegadores web han avanzado mucho en las últimas dos décadas. La introducción de estándares web que mejoran continuamente y los desarrolladores que los implementan en una variedad de navegadores nos permiten ahora hacer cosas directamente dentro de los navegadores que antes no eran posibles o eran muy difíciles de lograr.

Cuando se combinan con todas las características y la potencia de procesamiento que ahora vienen con los smartphones y ordenadores modernos, ahora es posible crear juegos que pueden ejecutarse directamente dentro del navegador de un usuario. Aunque los juegos basados en el navegador todavía no pueden competir con los desarrollados de forma nativa, podemos ejecutar juegos moderadamente complejos en un navegador sin necesidad de instalación.

Desarrollar un juego es una tarea enorme, por suerte hay muchos motores de juego basados en JavaScript y bibliotecas que te ayudarán a cubrir los aspectos básicos sin necesidad de implementar tú mismo características comunes como la detección de colisiones. En este tutorial, le presentaremos algunos de los mejores motores de juegos y bibliotecas de JavaScript gratuitos y de código abierto que puede utilizar en sus propios proyectos.

PixiJS

PixiJS es una de las librerías más populares que existen y que puedes utilizar para crear impresionantes gráficos para tus juegos. La librería utiliza WebGL para el renderizado y automáticamente hace un fallback a canvas en plataformas más antiguas para que no tengas que preocuparte de nada. Hay suficientes características en la biblioteca para hacer un argumento convincente que debe darle al menos una oportunidad.

La siguiente demostración de CodePen realizada por Omar Shehata muestra cómo se puede crear este efecto ahumado utilizando PixiJS.

Con PixiJS tienes soporte para hojas de sprites con características que incluyen recorte y empaquetamiento rotacional. También hay un cargador de activos para ayudarle a cargar y gestionar cosas como gráficos, fuentes y datos de animación. La entrada multitáctil y el seguimiento permiten implementar interacciones del usuario como la panorámica y el pellizco a escala.

La librería también ofrece una variedad de filtros WebGL, modos de tintado y de mezcla, así como renderizado de texto avanzado para ayudarle a ofrecer una experiencia visual de alta calidad.

Una de las formas más sencillas de conocer la biblioteca y descubrir lo que puede ofrecer es recorrer la larga lista de ejemplos que demuestran sus capacidades.

Phaser

Phaser es otra librería que se puede utilizar para crear rápidamente juegos basados en HTML5 tanto para móviles como para navegadores de escritorio. Hay muchas similitudes así como algunas diferencias en cuanto a las características ofrecidas. Por ejemplo, Phaser también permite renderizar gráficos utilizando WebGL y canvas.

La siguiente demostración de CodePen realizada por Aaron Buchanan muestra cómo se puede implementar la funcionalidad principal del popular juego Fruit Ninja en Phaser.

El núcleo de la librería es gratuito para su uso comercial, pero puedes obtener características y funcionalidades extra utilizando plugins de pago. Puedes desarrollar tus propios juegos tanto en JavaScript como en TypeScript.

Phaser tiene muchas características interesantes, como el soporte avanzado de multicámaras. Esto básicamente le permite crear cámaras adicionales que se pueden colocar en cualquier lugar de la pantalla. Las cámaras son desplazables y vienen con efectos como el movimiento, el flash y el desvanecimiento.

Las imágenes, sonidos, hojas de sprites y otros activos pueden cargarse y gestionarse fácilmente en el juego con la ayuda de un precargador incorporado en la biblioteca.

Una de las cosas que te gustará de Phaser es que fue creado pensando en los móviles. Esto significa básicamente que los desarrolladores tuvieron un cuidado extra para que cualquier función que añadieran a la biblioteca principal tuviera un buen rendimiento en los dispositivos móviles.

Stage.js

La librería Stage.js es ideal para aquellos que quieran desarrollar juegos 2D sencillos que no necesiten características complicadas. Los juegos se renderizan utilizando el elemento canvas en HTML5.

Aquí hay una implementación de un simple juego Tic-Tac-Toe por creotip usando stage.js. Puedes encontrar algunos ejemplos más avanzados en la página principal del sitio web.

Aunque el elemento canvas de HTML5 puede utilizarse para crear gráficos y animaciones, tiene algunas limitaciones que dificultan un poco el desarrollo de juegos. La librería Stage.js sortea esta limitación implementando su propia estructura tipo DOM para los elementos que dibujas en el lienzo. También maneja y propaga adecuadamente los diferentes eventos del ratón y del tacto a través de diferentes objetos para usted.

La biblioteca viene con un bucle de juego incorporado, así como otras características que necesitas para crear rápidamente juegos 2D básicos. Esto incluye la manipulación del tamaño, la posición y la transparencia de diferentes elementos, así como la escucha y el manejo de diferentes eventos del ratón y del tacto.

MelonJS

MelonJS es un motor de juegos gratuito basado en JavaScript que es fácil de aprender y lo suficientemente potente como para crear juegos de plataformas sencillos. Es una biblioteca de juegos ligera y sin dependencias, por lo que no es necesario cargar nada más para que funcione. Todo lo que necesitas es un navegador HTML5 capaz.

MelonJS Library MelonJS Library MelonJS Library

MelonJS utiliza un renderizador WebGL con canvas fallback al igual que nuestras dos primeras bibliotecas. Viene con su propia implementación de física ligera para asegurar bajos requerimientos de CPU. También ofrece soporte para hojas de sprites y texturas junto con la gestión de la animación.

Tiene acceso a los eventos del ratón y del tacto, así como a las fuentes del sistema y del mapa de bits. También se admite la detección del movimiento del dispositivo, la orientación y el acelerómetro.

Una vez que hayas desarrollado tu juego, puedes utilizar Corodova para convertirlo en una aplicación móvil híbrida. El motor del juego también ofrece integración nativa para muchos otros plugins de terceros.

BabylonJS

Las librerías y motores que hemos analizado hasta ahora están pensados para crear juegos en 2D. ¿Qué pasa si estás buscando un motor de renderizado que te ayude a crear juegos 3D? BabylonJS va a ser una gran ayuda en ese caso.

Aquí hay un bosque simple creado usando la biblioteca BabylonJS por Pavel Starý. Puedes moverte en él pulsando las teclas de flecha.

Hay muchas características en el motor de renderizado que hacen que merezca la pena probarlo. Hay un montón de editores que te ayudan a ahorrar tiempo y a crear efectos básicos. Esto incluye un editor de partículas para crear y configurar rápidamente sistemas de partículas, así como un editor de materiales de nodos, etc.

La biblioteca ofrece un montón de efectos especiales como niebla, profundidad de campo, destellos de lente y nitidez. También hay una gran optimización que implica instancias aceleradas por hardware junto con lienzos fuera de pantalla, etc.

Three.js

El nombre de la popular librería Three.js está obligado a salir a relucir siempre que hablemos de algo relacionado con los gráficos 3D o las visualizaciones en el navegador. Es una librería de renderizado 3D de propósito muy general que puedes utilizar para muchas cosas. Esto significa que también puede utilizarse para renderizar gráficos para tus juegos 3D.

Aquí hay una demostración de CodePen por Lisa Kobrazova que crea un planeta parecido a Saturno usando Three.js para mostrar lo que se puede hacer con la biblioteca.

La biblioteca ofrece soporte para escenas, animaciones, cámaras y objetos. También puede añadir luz a una escena haciendo que parezca ambiental, direccional o procedente de un punto. Asimismo, puede crear una variedad de formas geométricas como un cubo, una esfera, un toro y un texto en 3D.

La librería Three.js tiene una gran comunidad activa para ayudarte en el camino durante tu proceso de aprendizaje. La documentación detallada y esta página de ejemplos pueden ayudarte a aprender y explorar lo que puedes hacer con la biblioteca.

Matter.js

Ahora que hemos hablado de las bibliotecas de juegos en 2D y de los motores de renderizado en 3D, es hora de incluir también algunos motores de física en la discusión.

Matter.js es un motor de física para cuerpos rígidos en 2D que puedes incorporar a tus juegos. Puedes usarlo para ir más allá de la detección básica de colisiones en cualquier juego 2D que desarrolles. Te permite especificar valores de propiedades físicas como la masa y la densidad para diferentes objetos.

Aquí hay un ejemplo que he creado para mostrar cómo Matter.js se puede utilizar para aplicar fuerzas en cualquier cuerpo rígido.

Hay muchas cosas que puedes simular con la biblioteca como la gravedad, la fricción y las colisiones elásticas o inelásticas. También hemos escrito una serie de tutoriales sobre este tema para ayudarte a empezar con Matter.js.

Cannon.js

La biblioteca Cannon.js es un motor de física 3D ligero para la web. Este motor de física viene con una variedad de características como la detección de colisiones, soporte para diferentes formas de cuerpo, y la fricción, así como las restricciones como las bisagras.

Estas capacidades del motor de física pueden combinarse con una biblioteca de renderizado 3D como Three.js para crear algunos juegos 3D como el popular juego de la pila que se muestra en el CodePen de abajo, creado por Hunor Marton Borbely.

También puedes utilizar otros motores de física 3D alternativos como Oimo.js dependiendo de cómo quieras desarrollar las diferentes características de un juego. La librería Oimo.js es similar a Matter.js en algunos aspectos, por lo que aprenderla puede ser un poco más fácil si ya tienes algo de experiencia con Matter.js. También es relativamente nueva en comparación con Cannon.js.

Reflexiones finales

Es emocionante pensar que hemos llegado tan lejos en términos de desarrollo web que es posible crear y ejecutar juegos dentro de los navegadores. Sin embargo, debes recordar que el desarrollo de juegos es una tarea muy exigente incluso con todos estos avances y bibliotecas para ayudarte. Esto es especialmente cierto para los juegos en 3D.

Mi consejo es que empieces poco a poco y aprendas sobre los diferentes aspectos y características de estos motores y librerías de juego antes de lanzarte directamente a un gran proyecto. Esto evitará que te sientas abrumado y desanimado mientras aprendes cosas nuevas por el camino.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.