loading...

An Overview of the Javascript GameDev Ecosystem

arnaudmorisset profile image Arnaud Morisset ・7 min read

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. πŸŽ‰

Posted on by:

arnaudmorisset profile

Arnaud Morisset

@arnaudmorisset

πŸ‘¨πŸ»β€πŸ’» Programming Software & 🎲 DM'ing Tabletop RPGs

Discussion

markdown guide
 

This is a great post, thank you Arnaud!

I knew about some frameworks like Pixi or Phaser, but had not heard of Excalibur. Looks promising!

Hopefully this can get me out the analysis paralysis and finally start spinning up a game.

Thanks again!

 

You're welcome.

the analysis paralysis and finally start spinning up a game

I know that too well. πŸ˜…

I will try to complete my first game for the JS13K Game Jam.

 

Nice, can't wait to read your post about the process! Best of luck. πŸ˜‰

 
 

Excited to see where Excalibur goes.

You should check out kontra.js!

It's a simple version of phaser made for the js13k game jam.

 

Thank you for sharing this link I was working on a js13k version of phaserjs and wondering to see if there any attempts to make something in this sense like kontrajs for instance

 

no problem! If you give kontra a try let me know!

 

I recently tried Kontra.js (with webmaker.app) and it's really nice.

I will try to make a game for js13k with it. πŸ˜‰

 

Great! I expect a post on the experience, or maybe a tutorial soon!

 

This is a great list - thanks! I was just trying to figure out how to make a simple game with JS for fun, so this is great.

It looks like Phaser even has a library for React Native called ExpoPhaser (github.com/expo/expo-phaser) - so that's exciting too!

 

Thanks for the comment.

I didn't know ExpoPhaser! Thanks for the link. πŸ˜‰

 

Great post! I just want to add PlayCanvas in your list of tools as a powerfull game engine for WebGL and the JS world!

 

Thanks!

PlayCanvas is impressive, do it have an offline mode?

 

No... I'm sad too... But the core engine is open source at GitHub so I think anyone can use it offline without the power of the visual editor.

 

Awsome article needs an awsome update so I have updated my Awsome Phaser in this sense

THX A LOT

 

This is a great post, well written and extremely insightful. Thank you Arnaud

 
 
 

Is your simple editor VIM? Or is it something else?