There is a simple problem facing me at present. See exhibit “a”, a photo of one of the Britannia game boards. Each region on this board should be interactive as each region is, at some point during the game, able to have pieces moved onto them. To this end I need a means to render this within a browser. There are a few methods I could use to do this.
- CSS sprites
- SVG (Scalable Vector Graphics)
This is probably the simplest of the options. It would take a long time, would result in a few large sprites for each map, and all in all probably wouldn’t work well. Considering that down the line I’d like for users to be able to set up their own custom maps, I don’t think that it’s a good idea to rely on this as a method of outputting a map.
There’s also another issue which is one I’m keen to avoid, in that use of the artwork from the existing game would probably result in copyright issues. To this end I’m aiming to not reuse original artwork in the finished game.
SVG is the next option. With this an additional database table will be added to the configuration database. There is already information that details information about each region and the routes between each region. This additional table will simply record some points that illustrate the outline of the border between 2 regions.
This in turn can be interpreted when a new game is created so that an outline of each region can be generated. This can then be rendered using the jQuery SVG plugin by Keith Wood. Ideally I am hoping that this will enable each of the rendered areas to have their colour modified based on actions to illustrate, for example, where a unit may move to or who currently controls that region.
The fact that the outlines of each region are stored in the database also would mean that I have more information that will be useful down the line such as for interpreting how far North or South a unit is considered to be. Editing the maps would also be relatively simple once an interface to do so has been added in.
Finally again due to having the coordinates for each region stored, rendering a <map> if required would not be a big step unlike if the sprite method was employed.
Finally there’s another option. Fundamentally this would be similar to using SVG however it would use the new <canvas> functionalit
y. I had considered this however it appears as though the <canvas> output is treated as an image. This in turn means that modifying an area dynamically would require redrawing to some degree instead of just changing a property. There’s also the consideration that only newer browsers support this due to it being within the HTML5 spec.
All that aside the method that I’ve chosen to go with is using SVG to render the background map. I will attempt to place onClick/onMouseOver events on the SVG object for each region which would be fantastic if possible. Alternatively I’ll just have to render a <map> over the SVG image.
The nodes for each region will be generated from the configuration database at the time the game is created. This help decrease page load time and will prevent changes to a map propagating to a game in progress as, for example, regions may be removed or moved.
The next task on my list is to iron out the details of how the map creation interface is going to actually work. I have some ideas but need a few more days to play with them to see how well they work. I’ll also need to create the necessary JS and CFC files to standardise the rendering of the map, but that’s a task for another day!
Heyhey. A good starting point for any project is to decide what you’d like to do. The simple brief is that I’d like to be able to play Britannia without being in the same physical location as other players. Cue the bullet points …
- Multiple users should be able to play games of Britannia against each other online
- Multiple users should be able to drop-in and play players within a single game (unless disabled by the person that sets up the game). In this case, the same user will not be able to control 2 different players within the same game.
- Users should be able to view games both in progress, and complete
- Users should be able to chat in a public area (i.e.
- Multiple rule sets should be available (i.e. Avalon Hill, Fantasy Flight, other variations)
- A rule set variation should be able to be defined without defining every aspect of the rules, i.e. a variant of the 4-player rule set would allow for a 3-player game with different nation assignments
- Scores should be accessible for each rule set, player, nation to allow analysis
- Should be accessible within a web browser
- Should support email notifications where appropriate and requested
- Game states should be able to be imported so that a user can set up a game from a point other than turn 0, i.e. a game is half-completed around a table and then uploaded to the site to be completed.
It doesn’t really sound like much. There is also some room for expansion beyond this that could be interesting. Anything here is still somewhat reliant on the above actually being finished of course!
- Integration into Facebook
- SMS alerts (this would be at the users cost)
- User-customisable rule sets (i.e. user defined nations, maps etc.)
- Android and iPhone applications
- Tournaments, leagues, and ranked play
The problem is I’m currently having problems deciding exactly where to start. That can be a problem for another post! I’m rather hoping that when it comes to the front-end for this that I’ll be able to find someone to help with that. While I’m more than happy with back-end design and logic I am not best known for my front-end designs.
Coming up next will be an initial outline of the database. It’s all action here!
Oh and up there’s a nice little map that I found on Google It should be a familiar situation to Britannia players