May 10, 2018

10 JavaScript Engines To Develop Your Own Mobile And Web Games

by Jscrambler

javascript-game-engines

JavaScript has already proved its capacity when it comes to developing top-quality games. And as you might expect from a language that counts with so many frameworks and libraries, there are tons of game engine options that can fit your programming skills and needs.

Besides being free and open-source, many of these tools work within a web-editor and provide a really fast rendering for 2D and 3D elements. Thus, in case you want to create your first JavaScript-powered interactive and fun experience, here are some options to consider:

Phaser

phaser-logo

Phaser allows you to create HTML5 games for desktop and mobile. Some of its features include sprites and images, control inputs and it has three main physics engines. The framework uses both a Canvas and WebGL renderer internally and it can switch between those automatically depending on the browser support.

One of the advantages of using this software is the possibility to join a big community of developers through forums, newsletters, and social media.
To use the game engine you must have a web browser that supports the HTML tag <canvas>. Besides JavaScript, the tool also supports TypeScript code.

More information: http://phaser.io/

Pixi.js

pixi-js-logo

Pixi is an easy-to-use 2D renderer not only to create HTML5 games but any other interactive digital content. Spotify, Marvel, Google, and Adobe are some of the brands taking advantage of its features.

The tool includes WebGL renderer, but it also uses Canvas if a browser doesn’t support it.
To start using Pixi you just need to download a prebuilt build. This can be done using NPM or CDN install. And in case you are curious about how the library works, check this online playground to test its features.

More information: http://www.pixijs.com/

Babylon.js

babylon-js-logo

Sponsored by Microsoft, Babylon is a popular library that offers in-depth elements to build and render 3D games using WebGL.

One of the strongest points of this engine is the big community that it already brought together, making it easy to find tutorials, guidelines, and codes to deploy. In addition, it doesn’t require any installation into your computer, as it works within the browser/ code editor itself.

More information: https://www.babylonjs.com/

Cocos2d

cocos2d-logo

Cocos2d names itself as a unified package of game development tools. It allows developers to code an entire game using JavaScript and export it to multiple platforms. Through Cocos2d-x, the open source framework brings resource management, scene editing, game previewing, debugging and publishing features.

The engine is available for Windows and Mac. Also, it has a forum so developers can discuss and find help with their projects.

More information: https://discuss.cocos2d-x.org/

PlayCanvas

playcanvas-logo

PlayCanvas brings a complete set to build 3D games. The engine has WebGL 3D, physical rendering, light features, lightmaps, meshes, and many other elements supported within its graphics infrastructure.

Aside from those, the big advantage of using this tool is that it operates in the cloud, so it is not necessary to have plugins when running or testing your games on the browser.
Although PlayCanvas is a free open-source tool, it offers paid signatures so developers can migrate their projects to private servers or even get more storage capacity.

More information: https://playcanvas.com/

Kiwi.js

kiwijs-logo

Kiwi is one of the easiest open-source frameworks to make mobile and desktop HTML5 games. The engine uses both WebGL and Canvas rendering and can publish games and apps through CocoonJS and the Chrome Webstore.

One of the highlights of this tool is its rich collection of plugins. Some of them include an achievements engine to create and custom achievements based on user progress, quest management, sprites and shades, social media connector and even an artificial intelligence algorithm to explore.

Aside from that, Kiwi brings plenty of tutorials, so starters can learn how to create and publish their first own games very quickly.

More information: http://www.kiwijs.org/

Panda Engine

pandajs-logo

Panda Engine works together with Pixi to render 2D games for mobile and desktop in a fast way. Besides this integration, the tool comes in a very small package and supports many libraries and algorithms you might want to work with.

One very interesting feature is the possibility to track Google Analytics events inside of the game, making it possible to measure and increase its performance.

More information: https://www.pandajs.net/

MelonJS

melonjs-logo

MelonJS is an open-source project supported by its community. The goal with the framework is to offer a “plugin-free” tool to explore 2D rendering, physics, transition effects, animation management and other elements to build HTML5 interactive experiences.

One of the big advantages of this tool relies on the support: new developers can easily join the community forums about the engine to make questions and report bugs or even check out some demo applications to learn more about how different aspects of game development work.

More information: http://melonjs.org/

QICI Engine

qici-logo

Based on Phaser, this free JavaScript library provides a web-based suite to make HTML5 games. As its predecessor, Qici uses Pixi’s WebGL and Canvas rendering for desktop and mobile web browsers.

The engine contains three parts: QICI Core - a game engine library; QICI Widget - a UI library to create applications; and QICI Editor - a web-based editor with Node.js server for HTML5 game development.

More information: http://qiciengine.com/

Crafty

crafty-js-logo

Crafty is a library that puts together a collection of components to build interactive games. It allows the developer to explore the potential of pure JavaScript by creating custom calls and actions.

The engine provides a clean way to organize entities and components without the need for inheritance, has an event system for custom events and doesn’t require DOM manipulation or custom drawing routines to work.

More information: http://craftyjs.com/

Final Thoughts

There are dozens of other great options on the market to develop a game, but not all of them will support scripting with JavaScript. If your goal is to create games for consoles, VR devices or other specific platforms, for example, you will need to consider more robust alternatives like the ones below:

Have you ever developed any game using JavaScript language or a JavaScript engine? Tell us more about it through social media!