Choosing an HTML5 2D engine
Because Dragon Attack’s performance on Crafty.js was disappointing, and the libGDX port also had problems running smoothly when compiled to JavaScript (plus some unfortunate technical decisions I made along the way), I’ve decided to go for a third rewrite, using better tech. (“Rewrite” sounds worse than it really is – we’re talking about a two-day Ludum Dare project, after all.)
So it’s time to choose an engine (or framework, if you will; the line is blurry). My requirements are, more or less from most to least important:
- Speedy. As fast as it would be when I wrote from scratch in JavaScript. Any transpiled languages are therefore at a disadvantage.
- Must support WebGL. Canvas-2d only is out of the question, because I want to do some shader tricks.
- Decent code quality. I’ve been working a lot with HaxeFlixel lately, and it is so full of weird architecture and undocumented behaviours, it’s not even funny.
- Open source. Because whether or not the code is bad, the documentation nearly always is, so I want to be able to peek under the hood.
- Maintained. Must have been committed to in the last month or so.
- Well documented. I don’t care much for examples, because they usually show exactly what I don’t want to do; proper API docs are much more useful.
- No cloud lock-in. I like my independence, thank you.
I found this article as a starting point. It’s a year and a half old by now, which is about half a century in webdev years, but let’s see.
Construct2 looks really nice, but it doesn’t run on Linux. That’s such a basic requirement that I didn’t even list it above!
[Update, 2017-11-20] Construct 3 does run offline on all major platforms, but for any commercial use you have to rent it at €139/year (and even for personal offline use you need the €90/year license).
I used Phaser before, in a Ludum Dare project, and while it’s reasonably nice, I didn’t fall in love with it. It just feels a bit bloated and un-modular. Still, it’s a decent candidate.
ImpactJS is commercial with no free trial. Not right now, thank you.
PixiJS had its last commit 15 minutes ago when I looked. It’s the rendering engine used by Phaser, so it won’t be any slower than that. It’s just a rendering engine, not a full game engine, but it seems to do that one thing really well. It also allows for WebGL filters and provides a scene graph.
MelonJS had its last commit in May, almost half a year ago. The community also seems to have been inactive since.
I used Cocos2d-X before, and would prefer not to repeat the experience with any port.
LimeJS had its last commit over a year ago, and its last blog post over three years ago.
EaselJS, part of the CreateJS suite, is still active. It looks decent. Maybe I should try it some time, but PixiJS remains my number one choice for now.
CraftyJS is nice to get started with, and I may use it again for prototypes. But the original Dragon Attack, called Glauron, was made with it and had major performance problems on mobile.
LycheeJS is listed as a 2D game engine, but seems to have evolved into something else entirely.
Canvace is supposed to be a visual development environment, but even its website seems to be dead.
KiwiJS appears active judging by its website, but the last GitHub commit was almost a year ago. The link to the API docs is dead too. Pity, because it looks reasonable otherwise.
IIO.js looks a bit too simple for my purposes.
GameMaker Studio has a very long history, going way back to the Windows 95 days. Back then, it was just a toy that let non-programmers do very simple things. It seems to have matured since then, but sadly, it is still Windows-only.
PlayGroundJS doesn’t seem to support WebGL, as far as I can find.
Quintus saw its last commit over half a year ago.
Panda.js, like Phaser, uses PixiJS for rendering. It looks pretty complete and mature. Oddly though, commits ceased a year and a half ago. What is it with all these engines – are they done or something? But still, seems worth checking out some time.
Mighty Editor is cloud-based. Not my cup of tea.
From here on, most of the engines are even less well-known, which doesn’t bode well for their activity, quality or completeness.
I did try out Matter.js, a rigid body physics engine I could use in combination with PixiJS. Matter.js seems solid (pun intended), but looking around I found p2.js, which offers the same functionality behind a cleaner API, and seems to give slightly better simulation results (less springy stacks, which is a notoriously tricky problem for physics engines).
So, that’s it for now. Tomorrow I’ll get started with PixiJS and p2.js. For sound I’ll probably use SoundManager2 or Howler.js; both have served me fine in the past.
Is there a noteworthy engine that I missed? I did work off of a list from 2015, after all… Or did I get any of my facts wrong? Let me know in the comments!