Map tiles

So I have been thinking about the best way to do different map tiles (ie: grass in top left quadrant only -- no wait, bottom left too... no wait!)

So to make this work, I need to make sure that the 'feathered' sections are overlapping to avoid a gap.  So the section marked 8 will actually partially overlap sections marked 1 and 64 and 16. Those sections in turn would also overlap the other one.  Now while that might make some wierd edges...  it's got to be better than everything being off 1 pixel (that was annoying as hell earlier today).

The numbers are binary notation specifying which quadrants to display... The #7, for example, states to populate the grids currently marked 1, 2, 4.. similarly #79 would tell us to do #1,2,4,8,64  We'd need an image (feathered OUT) for all 9 of the listed zones... per turf...

Map: Isometric?

Another option would be to do isometric (see this for an example). It's quite a bit more complicated but could potentially look A LOT better... hmmm.. and maybe make group campaigns easier...

Grids: Hex or Square?

Test3 was generated as 11" x 10" using the 1" squares...

These are generated as 22"x20" using 1" squares/hexes then scaled to 50% (doubling the capacity)...

But which to use?

Third Attempt

This third example was quite a bit better.  The main difference here is that the map takes up the entire real estate - with the intention that HP bars, buttons etc would all be overlaid.

The other main difference is that this one was generated with individual images and letting the browser do the layering.   So the gravel is one layer, the grass is another, the bushes are another, the trees are another... The gates and well are put in independently.  The building... well, that's a bit more complicated...

The building was not clickable when I put it below the treeline because there was a transparent image above it consuming the clicks.  To get this to work, I created two divs in the same place with different z-indexes.  The bottom one had the img. The top one had a href tag with the same size of transparent image.  That allowed it to APPEAR that you were clicking on the building when in actuality you were clicking on nothing.  Clicking on the building pops up a fb:dialog.

Also, in the top left there is a link. If you click that link repeatedly, it will toggle the grid on and off.  That is done using the facebook clicktotoggle event.

Overall, the biggest issue with this one is that the map wasn't zoomed out as far as in the previous test.  I think we need to zoom out a bit in order to appear to have more real estate per screen refresh.

Second Attempt

The second attempt was to do a bit more RPG-ish.  I spent quite a bit of time trying to use the html float attribute, but the menus kept screwing it up. It ended up with everything absolutely positioned.

The graphic logo was rendered with http://cooltext.com.

The username shows up in the top left corner. The HP, MP and SP bars were generated by having a wrapping div (overflow:hidden) and then specifying the width:85% or whatever. Clicking those does a Dialog popup telling you what your current/max [%] of that stat is.

The toolbar icons were generated using a marble background and a brighter background on :hover with the actual transparent tool image on top of it.

The map was generated as part of this tutorial.  That was actually quite good.

This one looks better than the last one, but it is starting to get pretty cluttered.  Also, there was no way to put the building into the correct layer since the entire background (minus the building) was a single jpg.

The 'lorem ipsum' sections were just placeholders as I tried to get the layout right.