For beginner game developers, creating browser-based games can be a great way to get your foot into the game industry, and offer a potentially lucrative hobby. There’s quite a few ways to monetize browser games, which we’ll touch on later in this article. Unlike the AAA game industry, simple browser games fare much better than mind-blowing graphics.
If you take a look at some of the most popular browser games, or browser games that went viral and earned massive revenue, you’ll notice a few trends.
-
- Ultra simple gameplay: Browser games can be complex, but many of the most popular ones are simple sidescrollers or strategy games. Fireboy and Watergirl, for example, are a series of puzzle-based sidescroller games, where you basically control two characters simultaneously. One character is controlled with WASD, the other with the arrow keys. You need to navigate both characters through puzzles and obstacles, solving puzzles using one character for the other to progress, until both clear the level. You can check out Fireboy and Watergirl on Crazy Games.
- Remaking of classic games: Snake io games like the one you can play here, for example, are pretty much a modern take on the old Snake game, with multiplayer gameplay. These kinds of games are incredibly easy to build – Slither.io was developed in 6 months, most of the development spent on tweaking server handling – and earned $100k in daily revenue for its creator.
So now that we have some examples out of the way, how do you go about creating your own browser-based multiplayer game? There’s a lot that goes into it, so we can’t offer you a step-by-step guide, but we’re going to explain the concepts and point you towards a lot of useful resources
For starters, you need to decide how you want to create your game. Most simple browser games are created using HTML5/Javascript, so an engine framework is a great place to start. There are a lot of frameworks out there for getting started with creating HTML5/Javascript games, but two of the most popular:
- Phaser.io: Possibly the most popular framework for beginners, Phaser.io allows you to develop games that target browser and mobile with Canvas and WebGL technology. It is geared towards 2D games.
- PlayCanvas: A cloud-based HTML5 engine, PlayCanvas is geared towards creating 3D games.
There are a lot of game engines out there, some more complex than others. Once you become a bit more advanced in game development, you can also consider Unity, which is mostly for native desktop and mobile games, but can export to WebGL and be used for browser games. The popular browser-based first person shooter Bullet Force was created in Unity.
As many devs will tell you, creating a game isn’t the hard part. It’s actually quite simple once you become comfortable with scripting, level editors, and basic gameplay elements. The hardest part about creating multiplayer browser games is the networking.
If you create a multiplayer game, you can’t have thousands of players all in one room, or even one server. I mean you could, but it’d likely be a horrible experience for everyone. You have to take into account network code, data transfer…in fact, let’s break it down.
Say you have 64 players in close proximity to each other. Each chunk of data (player movements, game updates, etc) needs to be broadcast to each player. So if you only had 2 players, you would need 1 chunk of data per frame per player (so 2 chunks per frame).
Now you start increasing your amount of players. At 4 players, you’ve increased your network to 16 chunks per frame (4*4). Now keep scaling up, and you get the picture. Eventually, your servers going to get choked up, either due to bandwidth limitations, or poor network code. This is why many online games, like first person shooters, limit games to about 16 – 30 players per server. AAA companies can afford a bit more, hence why games like Battlefield 4 can have up to 64 players.
There are tools and resources that make handling the network side of things a bit easier.
- Nengi.js: A tool for deploying games to an Ubuntu server, with a focus on high performance and low bandwidth consumption. The developers claim its possible to have up to 100+ on one screen.
- Socket.io: A flexible server-side and client-side component which ties into Node.js seamlessly.
- Node.js: A cross-platform JRE (Javascript Runtime Environment) for providing real-time communication between clients (players) and the main server. It has a large development community so there’s a lot of support available.
Here’s a good blog that explains the basics of setting up a multiplayer network using Socket.io and Node.js, for an HTML5 game.
Once you have a game developed, monetization for browser-games is typically through ad revenue – getting traffic to your game. You can try to do this on your own, but many developers like to license their games out to game portal websites, and share ad revenue.
