JavaFX

It looks like JavaFX might be an option as well.. Looking into that. There are some examples of using JavaFX via Zembly on Facebook - so it should be possible. Of course, that is yet another platform to learn ;)

If I can use JavaFX however, I think I can reduce the bandwidth usage and increase the flexibility... JavaFX seems to be very dynamic (Flash-ish) so I might be able to do things like have a single grass image and then alter it in-browser (trim, feather, etc).

Attempted Logos Thus Far

Here are the logo attempts thus far....
1.

2.

3.

4.

5.

6.

7.

8.

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...

User's name/pic

PIC: <fb:profile-pic uid="loggedinuser"></fb:profile-pic>
NAME: <fb:name uid="loggedinuser" firstnameonly="true" useyou="false"/>

GIMP: Installing Fonts

pfexec cp FONTNAME.ttf /usr/X11R6/lib/X11/fonts/TTF
pfexec fc-cache
restart gimp

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?

Money

So the plan is to use Copper, Silver, Gold and Platinum.
Platinum is only available via cash purchase (or selling an item).
The rest are in-game only.

Based on the industry standard, the coins usually are worth:

Game	"Real"
Copper	10 cents
Silver	1 dollar
Gold	10 dollars
Platinum	100 dollars

So, for example a 2gp backpack would cost about $20 which is fairly realistic....

I was talking with Jason about how we have to basically sell the Platinum on the cheap (no one is going to pay $100 cash) and he suggested changing the payment structure to fix that and to help avoid any lawsuits...

Game	"Real"
Copper	50 cents
Silver	1 dollar
Gold	5 dollars
Platinum	10 dollars

Now that means we couldn't use any standard chart (free or not) but would have to come up with our own... but it is also more realistic to sell 1 platinum for $10.

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.

Welcome

This blog is to manage development notes for Nehalem.