Thursday, February 28, 2013

Maps and Boardgames (Part 4 - Creating a simple game)


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.



URL: http://psousa.net/games/xrtml


  • 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:
UnitCooldown TimeOccupation TimeMovement RangeSpecial
Helicopter2 sec6 secs4 hexsFlies over obstacles
Tank4 sec3 secs2 hexsN/A
Shield1 secN/ATeleports to any player occupied hexagon, regardless of rangeCreates an influence radius of 1 hexagon



Architecture:
There's no server-code for this game. Everything runs in the browser + the real-time cloud stuff of xRTML. If you wish to see the full source-code of my game just go ahead and view the source of the web page (the Javascript isn't minified nor obfuscated).

The map:
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).


Gameplay:
Lots and lots of Javascript. Underscore and jQuery were invaluable. Underscore for all the low-level stuff and jQuery for the DOM manipulation.

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.

Realtime:
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:
http://psousa.net/games/xrtml

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 :)

3 comments:

  1. Great work Pedro. Congrats!

    ReplyDelete
  2. Great stuff.
    But you know, there are so many great games, from Avalon Hill's "Panzer Blitz" boardgame through to PC-DOS and "Panzer General" ... it'd be a shame to plow too much energy into game design.
    The idea of fine interactive Web2.0 / RealTime in such an activity ... now that's thrilling! ;-)

    cheers

    ReplyDelete