on
JavaScript is a great backbone for game development – it’s a
fast, efficient, and matured language that is compatible with nearly any device
and platform out there. Creating games in JavaScript isn’t as simple as just
installing the Java SDK, however – unless you’re some kind of genius coder who
can do everything from scratch. For
that reason, there’s a lot of JavaScript game engines (also known as frameworks) out there.
It can be difficult to sort through them all and figure out
which is the right one for you – and that’s why we’ve went ahead and did the
work, so you can easily review this list and find the best JavaScript game
engines and frameworks that are suited to your creative needs.
Since Google Chrome ceases its support for Adobe Flash at the
end of 2020, some cool browser games such as Run 3
won't be accessible. Therefore, we encourage all youngling game developers to
pursue with JavaScript Frameworks.
This list will mostly focus on open-source JavaScript engines and frameworks that have strong
community support, but we’ll include a few premium engines as well.
Phaser.js
Phaser.js is often touted as one of, if not
the best JavaScript game engine available. It is extremely easy to use, has a
ton of documentation and examples to follow, and a highly active community if
you need additional help.
Phaser is best used for creating 2D games such as RPGs and
side-scrollers. That’s not to say its limited to just sprite-based graphics,
however, as Phaser fully supports Canvas and WebGL rendering – which means you
can use advanced lighting and post-processing graphics effects in your game.
Babylon.JS
Perhaps the best competitor to Phaser.js, although comparing
Babylon.js and Phaser.js is a bit like apples and oranges – sure, they’re both
JavaScript game engines, but while Phaser is more geared towards 2D titles,
Babylon excels at creating 3D games.
Basically, Babylon.js allows you to build 3D browser games
through a combination of WebGL, HTML5, and Web Audio – and while creating even
simple 3D objects in WebGL can normally be full of hurdles and JavaScript
coding, Babylon really simplifies it all for you.
PlayCanvas WebGL Game
Engine
PlayCanvas is a super powerful game engine that uses HTML5 and
WebGL to create some really beautiful looking browser games, with a ton of
fancy features like physically based rendering, high quality PostFX that
includes bloom, edge detection, and really just a ton of other features that
make PlayCanvas a seriously powerful game development engine – it can be used
for anything from beautiful web presentations to incredibly engaging race
games, similar to Getaway Shootout (we use “similar” because it was made in Unity3D) with graphics that
rival native applications.
The only drawback is that it
isn’t free – you didn’t think all those fancy features would be, did you?
PlayCanvas operates on a tiered subscription platform, so while you can use a
free account, you’ll gain a lot more feature access if you subscribe to one of
their monthly plans.
Pixi.JS
If you need a fast and lightweight JavaScript framework,
Pixi.js may be exactly what you need – it uses HTML5 2D rendering combined with
WebGL and HTML5 canvas fallback, which means you’ll be able to write games that
utilize hardware acceleration with no prior experience in writing for WebGL,
and the engine itself is really just incredibly fast.
Crafty
A WIP game from CraftyJS Game Tutorial
If you’d like an engine that helps you lay out a roadmap for
project completion from start to finish, Crafty could be the game engine for
you. It uses a handy “components” system that allows you to make a series of
choices by choosing various components, which will lay some of the foundation of
your game engine – there are also a lot of community-made components available
for download.
These components include things like entity hitboxes, level
progress bars, tiled map builders, and just a ton of other things you would
normally need to code from scratch – think of Crafty like being able to write a
game using third-party building blocks, which may not appeal to everyone, but it’s certainly useful –
especially for beginning game developers.
MelonJS
Another lightweight and powerful HTML5 framework, MelonJS does
its best to provide a plugin-free experience with a focus on its ‘write once,
run everywhere’ library. It is a completely standalone library which means it
only requires an HTML5-compatible browser to run, and has an entire range of
features such as high DPI / auto scaling, multi-channel HTML5 audio, polygon
(SAT) based collision detection, a nifty particle system, and just a whole
handful of other features.
Kiwi.js
If you’re an absolute
beginner and need something that could literally be considered the easiest JavaScript / HTML5 game
framework, Kiwi.js could be your best bet. Kiwi.js focuses on fast WebGL rendering, with CocoonJS for publishing
and app creation.
Its been called the “Wordpress of HTML5 game engines” because
it is really so easy to use, but don’t mistake simplicity for lack of features
– Kiwi.js can be just as powerful as many other game engines, its mostly the UI
and documentation that makes it so easy to use.
QICI Engine
You could consider QICI Engine as an
expansion of Phaser, as it built on top of the Phaser engine – but it utilizes
its own interface that focuses entirely on game development within the web browser itself. This
means you won’t need to have your code editor, tile mapper, sprite tools, etc
all open in separate windows – everything is convenient done within the web
browser.
Usually this sort of convenience is earned by sacrificing
features or engine flexibility, but not so with QICI – being based on the
Phaser engine, it has all the powerful features you’d expect from Phaser, but
QICI offers a feature-rich dashboard that really just makes game development so
much more convenient and easier.
