Picking the best JavaScript game engine to use for your project can be tough. There are tons of factors to consider before making your final choice. Not only the big options like features, restrictions, and requirements, but also smaller details that are often overlooked—like executable export options, online communities for collaboration and support, and template opportunities for ready-made games.
Let’s take a look at five of the best game engines in JavaScript, and how each of them might stack up for your next project:
Phaser JS Game Engine
One of the more popular JavaScript-centric engines out there, Phaser puts a focus on letting coders make games quickly. The system works primarily with Canvas and WebGL, letting programmers easily build substantial games for both desktop and mobile. Phaser is also free and open source, with a subscription model for those who would like to help support its development further.
With an active community that regularly participates on the forum, Slack, and Discord channels, it’s easy to get help with Phaser if you need it. And while it doesn’t come with the option to release to multiple devices from within Phaser itself, its HTML5 and JavaScript codebase allow you to use available wrapper libraries for deployment.
Features of Phaser
One of the biggest benefits of this engine is that it is a fully-featured engine, so it isn’t restricted to doing just one thing. Here’s a list of some of the feature sets provided with Phaser:
- built on WebGL and canvas
- preloader system
- physics features
- sprite and animation handling
- particle system
- camera, input, and sound systems
- tilemap support
- device scaling support
- plugin availability
Getting Started With the Phaser Game Engine
If you think Phaser would be a good fit for your project, you can download the engine itself at the Phaser website.
After getting your feet wet, try getting a feel for how a complete game might look by checking out one of the games available on CodeCanyon. Birds of War is a complete top-down shooter game that comes with full source code, and also functions for mobile. Similarly, Tower Challenge shares many of the same features, but also demonstrates third-party API integrations and how to utilize Phaser’s physics system.
Jaguar Adventure Game Engine
If you’re a fan of adventure games, like those put out by LucasArts or Telltale Games, then this next engine is for you. The feature set for this engine runs deep within its niche, giving it an advantage over using a more generalized JavaScript game engine for your project. Most of Jaguar’s features are available through a GUI, with the source available for any modifications you might want to add.
What Can Jaguar Do?
Although Jaguar doesn’t go wide with its engine offerings, it does provide important pieces for adventure games, like:
- scene controls
- primary and secondary actions
- inventory and audio systems
- conversation trees
Up and Running With Jaguar
Sound like the engine for your project? Check out some of the amazing game templates that are available on CodeCanyon, where you can also take a look at the other features that are included.
CreateJS Suite
Not branded as a game engine, this suite of JavaScript libraries focuses on creating interactive applications in an HTML5 world. However, games are included under the interactive media umbrella, so using CreateJS for your project is perfectly reasonable. A combination of EaselJS, TweenJS, SoundJS, and PreloadJS, their culmination provides the tools needed to create your game.
The CreateJS Libraries
Each of the libraries within this suite gives you access to a host of tools, and here’s what some of them can do:
- EaselJS makes it easier to interact and work with HTML5 Canvas elements.
- TweenJS is a library of animation and tweening tools for HTML5 and JavaScript properties.
- SoundJS gives you access to functions for making audio easy to work with.
- PreloadJS allows for advanced control of asset and data loading.
Adding CreateJS to Your Workflow
If you’re looking for a useful suite of libraries without the rigid structure that comes with most game engines, then check out the CreateJS website.
To get started with CreateJS, take a look at this fruit slicing game called Katana Fruits over at CodeCanyon. If you’re looking for a more advanced game to study, the Zuma-inspired game The Sorcerer will get you off to a good start.
P2.js
If you already have a good grasp of HTML5’s Canvas, something more lightweight might be all you need. P2.js is an extensive 2d physics library for JavaScript that can handle the trickier parts of game development. It's especially useful for games looking to subvert more traditional JavaScript engines.
Features of P2.js Library
The biggest selling points of P2.js come from advanced physics implementations that fall outside of most developers' comfort zones. Here are just a few of the available classes and functionality:
- top-down vehicle handlers
- particle and ray systems
- support for several types of springs
- rigid body handlers
- collision responses
- friction, force, velocity, and gravity support
Adding P2.js to Your Project
Want to get advanced 2D physics running in your own game? You can grab the source for P2.js over on GitHub. There are several demos available over in the GitHub repository, or if you want to see the library in action, check out this Lucky Wheel game template.
BabylonJS
Considered a complete JavaScript framework for building 3D games and experiences, Babylon is a good choice for 3D and VR. Using WebGL for graphics, the feature set for Babylon is extensive. It covers everything you’d expect from a JavaScript game engine, but also adds additional features not often seen in freely available systems, such as Mesh handling.
Although its community seems to be limited to a forum, it is fairly active, and most people with questions get the answers they need.
BabylonJS Functionality
The listed features for Babylon are enough to write an entire article on alone, so here are a few of the most significant:
- support tools and exporting for Unity, Blender, Maya, and 3ds Max
- game engine staples such as scene picking, collision handling, and scene graphs
- particle and animation systems
- performance optimizations such as frustum clipping, hardware scaling, and occlusion queries
- shader, rendering, and texture systems
- expansive mesh support
Where to Start With BabylonJS
If your 3D gaming project could use a boost, you can take a look at the source code and documentation for BabylonJS on their official website. They offer a number of tutorials and examples to help you get started.
What Are Your Favorite JavaScript Game Engines?
We’ve talked about some of the top frameworks available for JavaScript games, but it’s far from a complete list. Do you have a favorite of your own? Feel free to tell us all about it in the comments!
