Top 15: Mejores motores de juegos escritos en JavaScript de código abierto

Top 15: Mejores motores de juegos escritos en JavaScript de código abierto

Aunque la pregunta de si "¿Javascript es lento?" es una pregunta muy subjetiva, porque se ejecuta en el navegador del cliente o depende totalmente del hardware y el software en el que se ejecuta el código JavaScript. ¿Pero de qué se trata todo esto? Según diría un desarrollador, una empresa de pruebas de software y un diseñador de juegos, los navegadores modernos tienen capacidades que nunca hubiéramos imaginado hace 5 o 10 años. Aprovechando la API WebGL de JavaScript, pueden renderizar completamente gráficos complejos en 2D y 3D sin depender de complementos de navegador de terceros. ¡Queremos destacar que Javascript se puede usar para el desarrollo de juegos web! no solo juegos en 2D, sino también en 3D. Comenzar con JavaScript puro es la mejor manera de obtener un conocimiento sólido del desarrollo de juegos web.

Pero, ¿por qué recrear la rueda para construir nuestro juego desde 0 (diseñando los controles, manipulación de activos, ocupándonos de la optimización y un montón de problemas interminables que pueden llevar mucho tiempo resolver por nosotros mismos) si podemos acelerar ese proceso? usando un motor de juego escrito en Javascript? En este artículo, vamos a exponer, en nuestra opinión, los mejores motores de juegos Javascript para el desarrollo de juegos web.

15. Backbone Game Engine

Github

Backbone Game Engine Example

Backbone Game Engine es un motor de juego HTML5 Canvas elemental construido sobre Backbone. Especializado para plataformas 2D y optimizado para dispositivos móviles. Backbone Game Engine fue escrito para ejecutarse dentro de CocoonJS Canvas +, por lo que puedes convertir tu juego HTML5 en una aplicación nativa en iOS o Android.

  • Construido sobre Backbone. Eventos, modelos, colecciones, herencia y persistencia RESTful. ¿Por qué reinventar la rueda?
  • Solo lienzo HTML5. Sin jQuery, tan pocas manipulaciones DOM como sea posible.
  • Optimizado para móviles. Diseñado para ejecutarse en dispositivos móviles con soporte táctil transparente y viewport. Todo está optimizado para un máximo de fotogramas por segundo (FPS).

14. DarlingJS

Github

DarlingJS game engine

DarlingJS es un motor de juegos javascript basado en componentes y entidades con inyecciones de dependencia y arquitectura modular. Darling.js no cuesta un centavo. Código con licencia BSD simplificada. Solo necesitas anotar en la fuente que has utilizado Darling.js. te aseguro que estaré muy complacido si me avisas que estás usando el motor en tu proyecto. 

La inyección de dependencia en Darling.js te permite describir de forma declarativa cómo está conectada tu aplicación. Y cualquier componente que no se ajuste a tus necesidades se puede reemplazar fácilmente. Separa la funcionalidad y los datos en sistemas y componentes individuales que en su mayoría son independientes entre sí. Entonces, la composición se usa en lugar de la herencia. También agrupas los componentes y el sistema en módulos que se pueden conectar a la aplicación del juego.

13. JawsJS

Github

JawsJS Game Engine Demo

Jaws es una biblioteca de juegos 2D con tecnología HTML5. Comenzó solo haciendo lienzo, pero ahora también admite sprites basados ​​en DOM ordinarios a través de la misma API.

Jaws es muy adecuado para los juegos de desplazamiento lateral / superior "clásicos" (basados ​​en mosaicos o no) en los que tienes una serie de sprites animados con hojas de sprites. Jaws viene con detección básica de colisiones rect-vs-rect / circle-vs-circle que funciona bien en la mayoría de los casos. Si tienes toneladas de sprites (por ejemplo, un schmup infierno de balas) probablemente quieras usar una biblioteca de física como Box2D o hash espacial como árboles cuádruples para acelerar las cosas. El uso del lienzo de Jaws hace que las colisiones de píxeles perfectos y el terreno estilo gusano sean relativamente fáciles de desarrollar. Si tu juego tiene una GUI muy pesada, es posible que desees basar tu juego en elementos HTML puros en lugar de sprites de lienzo.

12. Enchant.js

Github

Enchantjs

Un marco de JavaScript simple para crear juegos y aplicaciones con las siguientes características:

11. Quintus

Github

Quintus game engine

Quintus es un motor de juegos JavaScript HTML5 fácil de aprender y divertido de usar para dispositivos móviles, computadoras de escritorio y más.

El motor Quintus es un motor de juegos HTML5 diseñado para ser modular y ligero, con una sintaxis concisa compatible con JavaScript. En lugar de intentar meter con calzador una estructura de motor de juego OOP estándar en un motor JavaScript HTML5, Quintus toma algunas pistas de jQuery y proporciona complementos, eventos y una sintaxis de selector. En lugar de un modelo profundo de solo herencia única, Quintus proporciona un modelo de componente flexible además de la herencia tradicional para facilitar la reutilización de la funcionalidad y compartirla entre juegos y objetos.

10. Panda Engine

Github | Examples

Panda Engine Flying Dog example

Panda Engine es un motor de juegos HTML5 gratuito para dispositivos móviles y de escritorio con renderizado Canvas y WebGL, utiliza Pixi.js para renderizar con una velocidad superrápida.

Con Panda Engine puedes rastrear eventos de Google Analytics dentro de tu juego y otras características interesantes.

9. Crafty

Github

Crafty Game Engine

Crafty es una biblioteca de juegos de JavaScript que puede ayudarte a crear juegos de forma estructurada con las siguientes características:

  • Entidades y componentes: una forma limpia y desacoplada de organizar los elementos del juego. ¡No se necesita herencia!
  • Eventbinding: sistema de eventos para eventos personalizados que se pueden activar en cualquier momento, lo que sea y con la misma facilidad.
  • No se requiere manipulación de dom ni rutinas de dibujo personalizadas.

Otros extras:

  • Comunidad floreciente: hay ayuda disponible en el foro.
  • Módulos comunitarios: una colección creciente de código generado por el usuario que puede utilizar.
  • JavaScript puro: sin magia. Funciona en todos los navegadores principales y se puede combinar con tu biblioteca js favorita.

8. Stage.js

Github | Examples

Breakout Game Stage.js

Stage.js es una biblioteca de JavaScript HTML5 2D para el desarrollo de juegos multiplataforma, es liviana, rápida y de código abierto.

Stage.js proporciona un modelo de datos de árbol similar al DOM para componer tu aplicación y administra internamente los ciclos de renderizado y el dibujo de tu aplicación, también procesa y distribuye eventos táctiles y del mouse a los nodos del árbol específicos.

Una aplicación Stage.js consta de un árbol de nodos. Cada nodo está anclado (transformado) contra su pariente y tiene cero, una o más texturas de imagen. Cada ciclo de renderizado consiste en marcar y dibujar nodos de árbol. Al marcar los nodos se ajustan a las actualizaciones recientes y luego, al dibujar, cada nodo se transforma de acuerdo con su fijación y dibuja sus texturas. La renderización se conserva y se detiene cuando no se modifica.

7. qiciengine

Github | Examples

Dota qiciengine example

Qiciengine es una biblioteca de motor de juegos JavaScript gratuita con un conjunto completo de herramientas basado en la web para crear juegos HTML5. QICI Engine se basa en el marco de juego HTML5 gratuito y de código abierto Phaser, que utiliza Pixi.js para la representación de WebGL y Canvas en navegadores web de escritorio y móviles.

Con QICI Engine, crear juegos HTML5 es tan fácil como desarrollar un sitio web, usar su editor de código favorito, usar su navegador web favorito, aprovechar el lenguaje JavaScript y las mejores herramientas de desarrollo web. QICI Engine se encarga de la complejidad de las tecnologías subyacentes, por lo que solo se concentra en lo que es importante, ¡crear tu juego!

QICI Engine se compone de tres partes: QICI Core, QICI Widget y QICI Editor:

  • QICI Core :una biblioteca de JavaScript Game Engine basada en Phaser.
  • Widget QICI :una biblioteca de interfaz de usuario de JavaScript para crear aplicaciones enriquecidas.
  • QICI Editor :un editor basado en web con un servidor Node.js para acelerar el desarrollo de juegos HTML5.

6. Kiwi.js

Github | Examples

Kiwi Game Engine

Kiwi.js es un motor de juegos HTML5 de código abierto divertido y amigable, algunas personas lo llaman el WordPress de los motores de juegos HTML5.

Kiwi.js es el marco de juego HTML5 de código abierto más fácil de usar del mundo para crear juegos de navegador HTML5 para dispositivos móviles y de escritorio. Su enfoque es el renderizado WebGL increíblemente rápido y herramientas complementarias para crear juegos serios de calidad profesional. Usan CocoonJS para publicar juegos y crear aplicaciones.

Tus juegos pueden apuntar tanto a Canvas como a WebGL. Utiliza lienzo para navegadores antiguos y la mayoría de navegadores móviles. Utiliza WebGL para los navegadores más recientes y junto con Cocoon.js para crear aplicaciones móviles nativas rápidas. Puedes crear juegos de manera fácil y eficiente para aplicaciones iOS, Android y Chrome utilizando plataformas como CocoonJS y Chrome WebStore.

5. MelonJS

Github | Example

MelonJS Game Engine

melonJS es un marco HTML5 liviano pero poderoso diseñado desde cero para proporcionar una verdadera biblioteca orientada a juegos 'escribir una vez, ejecutar en todas partes' sin complementos. melonJS es un proyecto de código abierto apoyado por una comunidad de entusiastas. Melon JS es compatible con las características actuales:

  • Un motor 2D fresco y ligero basado en sprites
  • Biblioteca independiente (no depende de nada más, excepto de un navegador compatible con HTML5)
  • Compatible con la mayoría de los principales navegadores (Chrome, Safari, Firefox, Opera, IE) y dispositivos móviles
  • Soporte de acelerómetro y movimiento del dispositivo
  • DPI alto y escala automática
  • Soporte de audio HTML5 multicanal y Web Audio en dispositivos compatibles
  • Implementación de física liviana para garantizar bajos requisitos de CPU
  • Algoritmo de colisión basado en polígonos (SAT) para una detección y respuesta precisas
  • Detección rápida de colisiones de fase amplia mediante particiones espaciales
  • Soporte de herramientas de terceros para la definición del cuerpo físico (PhysicEditor, Physic Body Editor)
  • API matemática avanzada para Vector y Matrix
  • Efectos de interpolación
  • Efectos de transición
  • Un conjunto básico de entidades de objeto (que se ampliará)
  • Agrupación de objetos
  • Sistema de partículas básico
  • Gestión básica de animaciones
  • Compatibilidad con hojas de sprites estándar y texturas empaquetadas (Texture Packer, ShoeBox)
  • Un administrador de estado (para administrar fácilmente la carga, el menú, las opciones, el estado del juego)
  • Versión de formato de mapa en mosaico + integración 0.9.x para un diseño de nivel fácil
    • Carga de mapa de mosaico XML sin comprimir, codificado en Base64, CSV y JSON
    • Compatibilidad con mapas de mosaico ortogonales, isométricos y en perspectiva
    • Varias capas (múltiples capas de fondo / primer plano, de colisión y de imagen)
    • Soporte para múltiples Tileset
    • Configuración de transparencia de mosaicos
    • Configuración alfa de capas
    • Soporte para objetos Rectángulo, Elipse, Polígono y Polilínea
    • Objetos en mosaico
    • Azulejos volteados y rotados
    • Orden dinámico de capas y objetos / grupos
    • Carga de entidad dinámica
    • Soporte de colisión de azulejos basado en formas
  • Fuentes de sistema y mapa de bits
  • Compatibilidad con dispositivos táctiles y de mouse (con emulación de mouse)
  • Soporte integrado para CocoonJS y Ejecta
  • Soporte de mensajería asincrónica (minPubSub)
  • Elementos básicos de GUI incluidos
  • Cargador personalizable

4. Pixi.js

Github | Examples

Pixi.js game engine

Pixi.js es un motor de renderizado HTML 5 2D superrápido que utiliza webGL con respaldo de lienzo. El objetivo de este proyecto es proporcionar una biblioteca 2D ligera y rápida que funcione en todos los dispositivos. El renderizador Pixi permite que todos disfruten del poder de la aceleración de hardware sin conocimiento previo de WebGL. Además, es rápido. Realmente rápido.

Pixi.js tiene compatibilidad completa con WebGL y recurre sin problemas al lienzo de HTML5 si es necesario. Como marco, Pixi.js es una herramienta fantástica para crear contenido interactivo, especialmente con el alejamiento de Adobe Flash en los últimos años . Úsalo para tus sitios web, aplicaciones y juegos HTML5 interactivos y ricos en gráficos. La compatibilidad multiplataforma lista para usar y la degradación elegante significan que tienes menos trabajo que hacer y te diviertes más haciéndolo. Si deseas crear experiencias pulidas y refinadas con relativa rapidez, sin profundizar en el código denso y de bajo nivel, al mismo tiempo que evitas los dolores de cabeza de las inconsistencias del navegador, rocía tu próximo proyecto con algo de magia Pixi.js.

3. PlayCanvas WebGL Game Engine

Github | Examples

Play Canvas auto game

PlayCanvas es un motor de juegos de código abierto. Utiliza HTML5 y WebGL para ejecutar juegos y otro contenido 3D interactivo en todos los navegadores modernos sin la necesidad de un complemento.

  • Gráficos
    • Procesador 3D basado en WebGL
    • Renderizado con base física (PBR)
    • Luces direccionales puntuales (todas las cuales pueden proyectar sombras)
    • Horneado Runtime Lightmap
    • Mallas estáticas y peladas
    • Motor de partículas GPU con editor
    • Biblioteca PostFX: floración, detección de bordes, FXAA, viñeta, etc.
    • Soporte de material predeterminado sin problemas de Maya, 3DS Max, Blender, etc.
    • Canalización de exportación de modelo completo desde Maya, 3DS Max, Blender, etc. a través del Manual de usuario de activos
  • Colisión y física
    • Integración completa con el motor de física de cuerpo rígido 3D ammo.js
  • Audio
    • 3D Positional audio via Web Audio API
  • Carga de recursos
    • Carga de recursos sencilla y potente
    • Transmisión de activos individuales
    • Variantes de activos: carga texturas comprimidas (DXT, PVR, ETC1) según el soporte de la plataforma
  • Entidad / Sistema de componentes
    • Componentes integrados: modelo, sonido, animación, cámara, colisión, luz, cuerpo rígido, guión, sistema de partículas
  • Sistema de secuencias de comandos
    • Escribe comportamientos del juego adjuntando JavaScript a las entidades del juego.
    • El intercambio en caliente de código en vivo permite una iteración rápida
  • Entrada
    • Ratón, teclado, táctil, compatibilidad con gamepad, realidad virtual

2. Babylon.js

Github | Tutorials

Babylon.js assasins creed demo

Babylon.js es un marco JavaScript de código abierto a través del cual puedes crear y renderizar juegos 3D dentro de un navegador, con la ayuda de WebGL, HTML5 y Web Audio. Mientras que dibujar un objeto 3D simple en WebGL sin formato  requiere que maneje una gran cantidad de código JavaScript, Babylon.js te permite hacer lo mismo con una cantidad mínima de código y un nivel de complejidad muy bajo.

Babylon.js puede definirse como "otro Three.js más" debido a sus potentes funciones, que le dan el poder de crear casi todo, desde juegos 3D totalmente interactivos hasta logotipos animados, en tu navegador. Aunque este marco de JavaScript se encuentra actualmente en su etapa inicial, incluso ofrece a los desarrolladores una base sólida para crear creaciones WebGL ricas en funciones que se pueden usar en casi todas partes.

1. Phaser.js

Github | Examples

Phaser.js Example

Pero espera un momento, Phaser.js es mejor que Babylon.js, ¿es esto una broma? Sabes lo que dice la gente, la carne de un hombre es el veneno de otro. Probablemente no te gustará comenzar a desarrollar juegos web utilizando tecnologías avanzadas como WebGL porque pronto te sentirás frustrado, ya que la creación de juegos no es tan fácil como crees. Y ahí es donde Phaser.js probablemente será tu primera opción para comenzar con el desarrollo de juegos, ya que es muy fácil de usar, proporcionan muchos ejemplos y no requiere mucha base de código para crear su primer juego.

Phaser es un marco de juego en 2D divertido, gratuito y rápido para crear juegos HTML5 para navegadores web de escritorio y móviles, compatible con la representación de Canvas y WebGL. Phaser utiliza internamente un renderizador Canvas y WebGL y puede intercambiar automáticamente entre ellos según la compatibilidad del navegador. Esto permite una representación ultrarrápida en escritorio y móvil. Phaser utiliza y contribuye a la excelente biblioteca Pixi.js para renderizar.

Phaser se ha utilizado para crear cientos de juegos, recibiendo millones de reproducciones al mes. Y la versión 2 es la más estable y sin errores hasta ahora. Los problemas se resuelven rápidamente y nos mantenemos al tanto del panorama cambiante del navegador.

Si crees que hemos olvidado otro motor de juego increíble escrito en Javascript, háznoslo saber y compártelo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable