Design

Photo of an Avalon Hill version Britannia board mid-game

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.

1. CSS sprites
2. SVG (Scalable Vector Graphics)
3. HTML5 Canvas

    

The more I think about it, the more it seems as though use of Javascript is of course inevitable for actions such as highlighting areas. It also seems inevitable that a <map> with an <area> for each region will also be inevitable unless other options present themselves. As for drawing the actual map itself the above 3 methods are those that came to mind.

CSS sprites

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

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.

HTML5 Canvas

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.

Conclusion

Initial example of rendering with SVG

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!