A TiledLayer is built for a grid of squares, not a grid of hexagons. You're going to need to implement a kind of "hex grid manager". This is not a big deal... Hexic works the same way.

Obviously, an image is always rectangular. Placing the hexagons on top of each other is easy:

Code:

int totalHeight = hexagonImage.getHeight();
y += totalHeight;

But left to right is slightly more difficult. The trick is to get the proportions of the hexagon right, so you can work out the position of the next column from the size of the image. Look at the web game you posted, you'll see that the hexagon image is 38 pixels tall... an even number makes it easy to work out the "y" value of the next column.

Code:

y += totalHeight / 2; // or -=, if the next column starts higher

In the 'x' direction, they need to overlap, so you need to advance the x by some fraction of the total image width. This fraction is: the width of the hexagon's base (the bottom side), plus half of the remaining image width. (See attached image.)

Code:

int totalWidth = hexagonImage.getWidth();
int baseWidth = (some fraction of the total width)
x += baseWidth + ((totalWidth - baseWidth) / 2);

In the attached image, the total width divides by six, and the base width is:

Code:

int baseWidth = (totalWidth / 6) * 4;

The proportions are not great, I'm sure you can come up with something better. Keep the divisor small, though, or it will become hard to make images of different sizes. I made mine square, but the web-game, the hexagons are short and wide - this probably looks more appealing.

Cheers,

Graham.