How To Make A Browser Game In 2018

Creating a browser game in 2018 should be easier than ever, in theory – there’s a literal plethora of engines, tools, and scripting languages available to create and deploy a browser game. However, that same freedom may also be a bit of a burden for newcomers – sort of like “information overload”, it can be difficult to sift through all the available methods of building browser games. Not to mention the hurdle of learning JavaScript itself, though there’s plenty of excellent JavaScript books out there worth reading.

There are two main methods of building browser games in 2018, and they both revolve around using game engines. We’ll explain these a bit:

JavaScript Frameworks

An excellent and matured language for beginners and veterans alike, JavaScript (or JS in most circles) can be pretty powerful and has a ton of libraries to work with. You can also access the client’s GPU using WebGL these days, which means you can even add shaders using GLSL (OpenGL Shading Language) to create really nice post-processing graphics effects.

BioLab, a game demo created with Impact.js

Java’s main drawback, especially for a beginner, is going to be resource and asset management – when you’re building on top of huge asset loads and garbage collection systems, and you start to fill up the asset memory, JS will start to show its cracks in the form of automatic garbage collection and asset compression – which means you’ll need to build a slow asset caching system, or your game performance is going to be quite terrible.

However, for smaller 2D games, JavaScript frameworks can really be perfect – many popular browser games (CrazySteve.io is a nice example here) are being deployed entirely in a combination of JavaScript + HTML5, using JavaScript game frameworks like Phaser, Crafty, Pixi.JS, and others.

Unity3D Engine

The popular Unity3D engine supports creating pure browser games, if the project being built is targeted for the “WebGL” platform – the drawback here is that the user’s browser must support WebGL, but Mozilla Firefox, Google Chrome, Apple Safari, and MS Edge all already have it, so it’s a very small audience of people that don’t already have WebGL support.

Unity WebGL demo Angry Bots

Of course, WebGL games built in Unity3D are going to be built in JavaScript, unless you write the game code in C# / UnityScript and then allow Unity3D to convert it using IL2CPP (Intermediate Language to C++) – but one of Unity3D’s main appeals is its humongous asset library, which means you can build games pretty much entirely from scratch without writing a single line of code using resources from the Unity store or community resources.

Unity or JavaScript Framework, Which to Use?

So now you might be wondering, if dedicated JavaScript game frameworks and Unity3D both require Java in the long run, what the advantages of one over the other? Well now that all boils down to how hands-on you want to get with the engine, and what type of games you want to create.

C# language is incredibly powerful and one of the best programming languages for game development, which is why Unity3D is so popular – but JavaScript offers amazing cross-platform compatibility, and is also considered the official language for creating Android games.

Unity3D was built mainly for creating native 3D games that are installed to the user’s computer or mobile device, whereas Phaser (and similar JavaScript frameworks) are, for the most part, geared specifically towards creating 2D browser games.

So, think of it this way – if you want to build mainly 3D browser games and perhaps dabble in creating 2D games that are installed on the user’s device, go with Unity engine. If you want to focus exclusively on 2D browser games, something like the Phaser 3 framework would be much better for this purpose. All that you need is to decide about the details of your game. For example, take a look at these parking games – each one might use a different framework despite the fact that all of them look pretty similar.

Also, if you’re a complete beginner, you might want to learn on a JavaScript framework first – because that way your JavaScript skills can transition over into Unity, should you decide to give it a try. If you start out using Unity, you can’t take your C# / UnityScript skills into a JavaScript framework!

One other thing to consider is if you want to target mobile users as well – Unity WebGL doesn’t exactly play nice with Android browsers, so much in fact that Google Chrome for Android has Unity WebGL disabled by default. It’s much better to build a game as a separate Android build, but this isn’t too much of a concern, considering not too many people are playing browser games on their Android device – and some browser-based IO games, like Slither.IO, do in fact have highly successful mobile ports.

Final Thoughts – Choosing the Right Path for You

We’ve spent a lot of this article talking about the difference between JavaScript frameworks and the Unity engine, but that’s for a specific reason – as a browser-based game developer in 2018, you’re going to be using one of these methods, and it’s important to understand the key differences between them.

In a nutshell, you’ll need to decide if you want the ease-of-use that comes with Unity3D, and the ability to quickly throw together games with assets and resources from the Unity Store, but be limited to C# / UnityScript (if you don’t have any prior JavaScript knowledge). Or if you want to dive into JavaScript and spend a bit more time creating your games from scratch, but your JavaScript skills will generally transfer to any game engine that supports coding in JS in the future.