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.

First attempt

So the approach I am going with is to use zembly.com to host the game for facebook.

The first attempt was to use the normal facebook look-n-feel... to be honest, not really feeling that it looks all that sophisticated...

The logo icon itself was derived from the Nehalem tribal flag. The name portion of the logo was done with the Kelly Ann Gothic font.  That light blue color is #ccccff and the darker blue is #6d84b4.

The tabs were created with the fb:tabs and fb:tag-item.