Dr Nic

[BTS] Dr Nic’s Civilizations 2.0

I’m not promising there ever will be a Dr Nic’s Online Civilizations game, but it has seemed like a good idea for a few weeks, and today I went from ASCII map through to beautiful CSS rendering of the map.

ASCII to HTML mapping
Base tiles
Correct edges
Convert table to div structure
Simple layout of map Basic tiles Correct edges Removed table structure

I miss home.

TilesheetThis was a technically interesting process. The images used are actually all on the one base tile sheet [1], and each panel of the map is allocated a separate CSS class relating to the specific tile required.

So for example, to show the base grasslands tile, you’d need some CSS like:

.tiles {height: 30px; width: 30px; background: url(tiles.png) top left no-repeat; ...}
.grasslands {background-position: 0px -30px;}

For a desert tile, with some grasslands to the left, you might use:

.desert-left {background-position: -60px -60px;}

This really gives a nice tiling effect without you needing to do any fancy image manipulations or the user loading up lots of small images. You just assign the appropriate CSS class to the panel (a DIV or TD, for example). Want to change a tile? Change the class (e.g. using Prototype/jQuery libraries)

Yes, this solution requires lots of individual CSS class definitions; but you’re clever – you’ll generate them won’t you :)

Reader assistance required

The one technical trick that I don’t have a solution for at the moment is a Google Maps-like interface for scrolling map around. I’d love to hear from anyone with some bright thoughts on how they implement that (I don’t want to have to try to read their compact Javascript code).

Any thoughts?

[1] The source images came from the FreeCiv GPL game

Related posts:

  1. Turn-based game DSL Late in the night, whilst the baby feeds, I continue...

3 Responses to “[BTS] Dr Nic’s Civilizations 2.0”

  1. Look at Ka-Map and OpenLayers.

    Should be able to return images/tiles through that.

  2. Hello Nic!

    If I understood you correct, you’re writing a Browsergame in Rails. In that case, I’d like to “combine” our efforts, since I’m at writing one myself and I’m the only one and nobody wants to help me :-(

    If you like the thought, just send me an email or Skype me (fallenbln) or ICQ me (#196290943) or GoogleTalk me (my email) or drop by my Home :)

  3. best way to do it is to draw your entire map into a div, then set clipping regions for your scrolling. You can simulate zooming doing the same sort of thing.