Random ideas and idle hands lead from one thing to another. While waiting for the Planetside 2 (a large scale MMOFPS) beta to land, I decided to make a hex-grid of the game’s map.
Once the map is complete, someone suggests it should be colored in one of the three in-game faction’s colors… then I realize, why not just let the user click the map to change the color of a hex to his favorite faction’s?
End result: In the span of 12 or so hours, thousands of people come to play a game where the sole purpose is to franctically click hexes in competition with everyone else playing it.
Read on to find out what on earth am I talking about, how it worked (hint: node.js) and some thoughts on why it became so popular for a while.
ClickmapSide, the Planetside 2 minigame
The map and hex based “minigame” which I decided to call ClickmapSide – essentially all you do is click the map afterall.
You can try ClickmapSide here.
Maybe I should explain it a bit more for those unfamiliar with Planetside.
Planetside is an MMOFPS – a Massively Multiplayer Online First Person Shooter – where you play as one of three factions, The Terran Republic, The New Conglomerate or The Vanu Sovereignity. The goal of the game is to capture as much territory from the map for your faction. It involves capturing bases, infantry and vehicular combat and all sorts of strategy and tactics. You could think of it as similar to Battlefield but in a futuristic setting and with lots and lots of players simultaneously (Planetside 2 will support 2000 players per continent).
So, essentially ClickmapSide strips the concept of Planetside to the bare bones: You still fight over territory, but only by clicking the hex you want to capture and that’s the entire mechanic. It’s pretty hectic when there’s 80-100 people simultaneously playing, as happened when a total of three things happened:
- The thread about it on Reddit became popular
- Several Planetside 2 developers and Sony Online Entertainment employees and other people tweeted about it
- The thread about it on Planetside-Universe became popular
Why was the game suddenly so popular? I was kind of surprised how much peopled enjoyed it for a while.
Before that, let’s first look what makes the game tick as this is a programming blog afterall ;)
Under the hood: Raphael, nodejs and socket.io
The three key tools in use are Raphael, node and socket.io.
The map you see in the background was, according to rumors, ripped from a leaked E3 copy of Planetside 2 and can be found here.
The hex grid on the other hand is based on a screencap of one of the E3 streams of the game, which shows how the hex grid is positioned in-game and can be found here
Creating the hex grid
The hex grid is using Raphael, which is quickly becoming my go-to tool for drawing interactive graphics for things like this due to its simplicity and ease of use.
I wrote a quick algorithm to create a rectangular hex grid. Then, in order to remove the extra hexes, I added a small feature which would let me click the unwanted hexes and write their position in the hex array into local storage (as you can see in the screencap, the real game map doesn’t have the hexes in a rectangular grid like shape).
From the local storage, I could easily grab the list of the unwanted hexes and dump it back into the JavaScript code, so I can use it as a list of hexes to skip drawing – and the approach worked really well, as I could just go and click every hex that I didn’t want, which is about hundred times simpler than having to fiddle with the code to find them.
Creating the grid took maybe an hour or two of fiddling around to get it working nicely.
Creating the multiplayer game stuff
Then, adding nodejs into the equation, I of course decide to use socket.io, because it’s really, really easy to create real-time event systems like this with it.
The nodejs backend for this is extremely simple: It contains an in-memory representation of which faction is in control of which hex, and the functions which respond to socket.io events.
There are two kinds of events for socket.io in the game: map-status and map-update.
- map-status is published to the client when it connects, and as you can guess, it contains a list of the status of each hex
- map-update is published in real-time every time someone captures a hex and simply contains the data for the captured hex so the UI can be updated
The clients only publish a single event: take-hex, which is published when the user clicks a hex to capture it.
There is very little verification on the server. It simply updates the state of the in-memory hex data and publishes updates to other clients. Later, I had to actually add a minimum speed at which users could capture hexes, as some enterprising individuals decided to write scripts which would automatically capture the map for their faction :D
The result
The resulting game was able to run 103 concurrent players at best (according to google analytics real time stats) and considering how quickly the average person can click, the amount of events pushed around 500-1500 per second.
Considering everything is again running on my VPS which is on the lower end of things from Linode, and that the server is maybe 20 lines of code, it really shows how easy it’s to create real time systems like this with node.js and how well it performs.
Why was it so popular?
The game was popular for a while: currently there’s 1-10 users playing most of the time, but within 1-24 hours after the launch, the game was consistently at over 50 users and 80-100 at best.
Still, it’s kind of interesting how such a simple thing could become something people actually play for a while, especially considering some people went as far as writing scripts that would “win” the game for them by capturing the entire map at once.
Why is this?
I think a couple of factors contributed to this:
- It’s very simple
- It gives you instant feedback on your actions
- It was very hectic as everyone was capturing things at the same time
- It captured what was considered by Planetside fans as the “core” of the game
1 and 2 are something that can be seen in more casual type games and some older games too. Simple games are often fun to play for a while, especially if it feels very dynamic and you instantly get in on the “action”. Number 3 contributes to this a lot I think: Because there was tens of people capturing the relatively small map at the same time, there was a feeling of having to really put effort into it, as often as soon as you captured some hexes, someone else would come and capture them back.
The points 1, 2 and 3 provided a simple but somewhat addictive gameplay element for a while. Emphasis on “for a while” – it obviously lacks longevity, but a lot of people seemed to have fun with it for a while.
What makes it more interesting is 4. Several Planetside 1 players commented that it captured what they considered the core elements of the game: The three faction “warfare” and the territory capturing. Planetside fans have a very strong loyalty to their faction of choice, and there was often a clear effort by several players in the same faction to capture the whole map for their faction.
So, completely by accident, the game captured one of the main things the veterans of Planetside 1 seem to enjoy a lot: Faction rivalry. This seemed to boost the appeal of even the simple game mechanics to many, as people competed to who would control the map and posted screenshots of how their side controlled the entire map.
Conclusion
A completely random idea starting off as a joke, ending up creating a small “phenomenon” amongst the Planetside fans. I’m pretty surprised it gathered thousands of people to try it.
The code was just thrown together on a whim, yet it worked very well for a limited application like this, and the server was extremely stable even though it had hundreds and hundreds of events with the default out of the box socket.io configuration on a low-end VPS.
This demonstrates quite nicely what can happen even with very simple things I guess :D