An Overview of the Javascript GameDev Ecosystem

Introduction

Days ago, a friend of mine (a developer too) asked me if I can show him how we can create a game with Javascript, which frameworks and/or libraries are available to us, etc...

Well, this is not the first time that someone comes to see me for this. For some people, I'm "the man who is interested in game development" and I often answer questions related to this field. I often repeat myself when it happens, so I decided to write down my knowledge of the current Javascript game development ecosystem. I hope it can be useful to you too. 🙂

Why Javascript?

When you give public advice to another developer (online or during a meetup), you will see some people join the conversation. One of them is gonna question the programming language behind the tools you recommended. It always happens, so let's answer that first.

"Aren't real games made with C++?"

This one came often. By "real", I understand AAA games so, yes, most of the impressive games you can see in the market (God Of War, Assassin's Creed, Skyrim, ... to name a few) are created with C++ (but not only). They're also created by one hundred experienced people with a million dollars budget. Is this your context? Yes? Then go for it (and I'm a little jealous, to be honest), otherwise, I seriously encourage you to stay with what you know.

You can make a game with anything, some people create cool games with "unpopular" programming languages and that's okay. If you're a developer working with Javascript, then stay with Javascript. You're working with Java, C# or Python? Good, there some options for you too. Learning game development is by nature, a hard task. There's a lot of concepts to grasp so, the less time you spend fighting the tools, the best it is.

"But there's Unity now!"

Unity, Unreal Engine, CryEngine, Godot... all them are good solutions to make a game. If this kind of software is more appealing to you, then you should go for it. Personally, I like the development environment that I set up for my day to day job. Nice programming languages without too much boilerplate code, an efficient terminal emulator and a simple text editor made my day much more pleasant. 🕺

Each time I'm leaving this setup (to try any kind of IDE). I'm a bit sad, and I know that a lot of developers are like that. That's why I strongly encourage you to stay with your favourite tools and to ignore all the people telling you that you chose the wrong tool(s).

Foundation

Before listing frameworks, we should look at the technologies that allow us to write a game with Javascript. You already heard that we speak about "HTML5 Games", right? If most people say that, that's because the 5th version of the HTML specification brings us the <canvas> tag that allows us to create a context for drawing on our web page.

More or less at the same time, the Khronos Group created the first version of the WebGL specification. This one is a web version of the OpenGL ES specification and allow developers to communicate with the graphic card from the browser (and, trust me, you don't want to know how it works 😅).

So, we're now able to create 2D and 3D scenes that run on the GPU (which is much more performant than if we running them on the CPU). Great! But if you gave a look at what look like the javascript code using those technologies, you will feel sick. Making a game by hand with Canvas is still manageable (and fun) but working from scratch with WebGL is like deep dive in hell with Dante.

Let's search a cool framework that abstract the WebGL stuff for us instead.

Disclaimer: I will not speak about all existing game frameworks and JS bindings that exist. I will only show a subset of them, the most important ones in my (not so) humble opinion.

2D Frameworks

PixiJS

Even if you want to create 2D games, you should choose a technology that uses WebGL as a back-end for is rendering engine. It's thinkable to create a complete game using only canvas but most developers will do that for learning purpose only and will prefer WebGL for a complete game (mostly for performance reason).

But, as I said, working directly with WebGL can be tedious, even for 2D stuff. Fortunately, we have PixiJS.

PixiJS is what we can call a 2D WebGL renderer. That means, that this library will offer a lot of functions which are designed to render 2D scenes and objects in the most efficient way possible. So, you can focus on building a great game and leaving the hardcore "low-level" stuff to PixiJS developers.

This is not a complete game framework, this is a library focused on one and only one thing: rendering a 2D scene. It does it so well that a lot of Javascript game frameworks use it as rendering engine instead of writing their own (and so can you if you plan to write your own game framework).

Pro: The fastest WebGL 2D renderer available, perfect for complex animations on websites or for building another framework on top of it.

Con: If you plan to create more than an animation (a complete game for example), then you will need to find additional libraries for the other parts of game development or write them yourself (physics, device scaling, more advanced particle system, tilemaps, etc...).

ExcaliburJS

Here we have a complete game framework (but still in beta) written in Typescript. Complete scene system and cameras, sprites and animations, sounds, physics, etc.. all the interesting features are here. I really like the API provided by ExcaliburJS. I don't know how to explain that but I feel like home with this framework.

It's probably related to the fact that is creators are all coming from the web world (some of them are web developers, some others are DevOps) so most patterns and way of doing things are the ones which are already popular in web development. If you're a web developer, you should definitively try this framework.

Pro: A nice set of features and a pleasant API.

Con: Still in version 0.xx, there might be dragons in certain parts of this framework.

ImpactJS

ImpactJS is mostly known to have been the first web game framework "that makes sense", most web game frameworks published before were just experiments and not "commercial grade" game frameworks. It's now free and open-source and comes with a nice level editor.

This framework is not the most simple or documented but its robustness has already been proven. For example, CrossCode is based on a forked version of Impact, its dev chose Impact as a base system 'cause it's well architectured for performance and perfectly extendable to fit the specific needs of a game.

Pro: Battle-tested, extendable, performant.

Con: Much less popular than before, you will learn to use it through some books and you will wait longer if you need to obtain an answer on a forum.

CreateJS

"A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5."

That's how gskinner, the excellent creative agency behind CreateJS, describe this framework. It provides everything you will need to create a complete game through distinct Javascript module than you can use together or separately. For example, you can take PixiJS for the rendering part and SoundJS to work with Audio stuff, etc... Those frameworks are battle-tested too, you can check the portfolio of gskinner to see that by yourself.

Pro: Battle-tested, Modular through its module system.

Con: Fewer learning resources than the option below.

PhaserJS

The most popular one, PhaserJS is a complete set of tools to create web and mobile games. This framework have a huge community which is really productive, each week we can see a lot of new articles, demo and tutorials based on PhaserJS. That provides a great context for people who want to make their first steps in game creation and needs tutorial in various fields. Since the 3rd version, it's also one of the most performant web game framework available.

Pro: Huge community, a lot of learning resources available, a lot of features.

Con: Well, Phaser 2 had severe performance problems on mobile but Phaser 3 fixed that (mostly), I don't really know the current cons of using PhaserJS.

3D Frameworks

ThreeJS

Okay, so you already play with 2D frameworks or you're not really interested in 2D and you want to deep dive in the 3D world? Okay, again I will offer you two good tools to avoid manipulating WebGL directly. Let's start with ThreeJS.

ThreeJS is Javascript 3D library, maybe the most popular one. This library offers a set of functions that represent common operations you want to do in a 3D scene. This operates at a higher level than raw WebGL and you'll need to do less low-level stuff.

Pro: Popular, performant, simple

Con: I don't really know this library, so if you know the bad parts of it, please share it in the comment section below.

BabylonJS

I think I can say the same thing about BabylonJS than I previously said about ThreeJS. The main difference is that BabylonJS offer more abstraction than ThreeJS and give you more pre-built tools to manage your 3D scene.

Pro: Popular, performant, simple... wait... I have a sensation of déjà-vu.

Con: The older version was poorly documented but I recently discovered the new website (and the new doc) everything looks cool.

Conclusion

In the end, it doesn't really matter which framework you choose as long as you find game development fun. Don't focus on the framework’s showcase page, just choose the one that inspires you.

Do you find the API nice and clean? Do you find the documentation pleasant to read? Is there nice learning resources? If you find one which gives you a "yes" to those questions, then you should pick it and start marking games.

Once you learned the fundamentals, you can switch to whatever languages/frameworks you want, whenever you want.

Have fun. 🎉