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.
"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).
<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 😅).
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.
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.
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...).
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 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.
"A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5."
Pro: Battle-tested, Modular through its module system.
Con: Fewer learning resources than the option below.
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.
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.
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.
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.
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. 🎉
Top comments (21)
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.
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. 😉
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. 😉
What a fabulous first post
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!
Great post! I just want to add PlayCanvas in your list of tools as a powerfull game engine for WebGL and the JS world!
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
You're welcome! 😊
Is your simple editor VIM? Or is it something else?