After several months since part 3 I've decided to pick up my experiments and make a simple game out of them. "Why?" you may ask. Well, mostly because a friend of mine challenged me to, as his company, IBT, is promoting a contest for their core technology: xRTML. Also, I thought it could be a fun experiment.
xRTML is a technology which allows developers to easily add real-time features to their websites and applications. It works flawlessly and is freaking fast. Hence should be a perfect match for any multiplayer web-based game in real-time, like the one I'm showing here.
So, what's the idea?
I wanted to do something very simple. Basic rules, player opens the browser and immediately starts to play.
- There are 4 players on a map competing for hexagons, where each one has a set of units (starting with an helicopter, a tank and a shield):
- You're not limited to the initial set, as you're able to build new units at the base.
- The game ends when one of the players reaches 1000 points (by conquering hexagons) or the global timer expires.
- The score mechanism follows the "Samegame" scoring: clusters of n hexagons are scored as n2, thus promoting big sets of connected hexagons).
Total Points: 3
Total Points: 9
- The game itself includes a mini-tutorial, so should be easy enough to grasp. Although being simple it should provide some strategic options as you'll have to take into account the unit-type differences:
|Unit||Cooldown Time||Occupation Time||Movement Range||Special|
|Helicopter||2 sec||6 secs||4 hexs||Flies over obstacles|
|Tank||4 sec||3 secs||2 hexs||N/A|
|Shield||1 sec||N/A||Teleports to any player occupied hexagon, regardless of range||Creates an influence radius of 1 hexagon|
I've tried different approaches to draw the hexagons (as discussed in previous posts) on a Leaflet map:
- pre-rendered tiles with TileMill
- tiles generated on the fly with HTML5 canvas
I eventually opted for the pre-rendered approach as its backwards-compatible with older browsers, although I was pretty satisfied with the client-side version (after several optimizations it now took about 1ms to draw each tile using HTML5 canvas).
Some sections were a little bit more challenging than others. For example:
- As each type of unit has different movement capabilities: the helicopter flies over obstacles and the tank doesn't, determining the target hexagons, movement rules and occupation logic was an interesting challenge;
- The shield has an area of influence effect. Creating an algorithm to correctly mix different areas and display them was also fun;
- Tracking the state of each hexagon and painting them correctly;
- Calculating the score: lots of Underscore goodness used there;
Anyway, some challenges but technically I'm happy with the result. The performance is pretty nice and I believe it shows that real-time gaming on the web could be a real trend in the future, especially with simple games like this.
I push every action that a player does to the xRTML servers. It automatically delivers everything to whoever is listening. You create a connection, bind to a channel, and just send/receive data. Nice and easy.
Also, xRTML includes some ready-to-use realtime controls, and I've used one of those to add a chat to the game.
The game supports any number of players watching but only 4 playing. Also, I've developed this for Chrome (although it should also work with IE10, Firefox and Safari). You can play it online at:
If you're all alone in there (very likely) you can open a new browser window/tab to simulate other players.
Also, a minor disclaimer: this isn't a "real" game, and I haven't really beta tested it, so it's very likely that the units are not properly balanced and some players have an unfair advantage over others :)