
Map Tiling Algorithm – HTML5 and JavaScript RPG - codecurve
http://stackoverflow.com/questions/8901987/map-tiling-algorithm
======
gavanwoolery
My suggestion: almost never blend between textures, there are very few
situations where it is appropriate. More importantly, blending can kill the
visual style of your game - a clean, minimal palette almost always looks
better (with distinctive borders between colors or color gradients). A better
solution is to give each tile type a layering priority - i.e. grass tile edges
overlap dirt, sand, etc. Rather than blending, disintegrate the edges
appropriately (i.e. grass gets less dense as it goes towards a barren tile,
sand is dispersed as it goes over a rock surface, etc).

For example, look at the grass in this image:

[http://www.rmxp.tigerseye.uk.com/images/td9_1.png](http://www.rmxp.tigerseye.uk.com/images/td9_1.png)

~~~
quink
RPG Maker XP, in case anyone is wondering:

[http://www.rmxp.tigerseye.uk.com/tutorial_rmxp1.shtml](http://www.rmxp.tigerseye.uk.com/tutorial_rmxp1.shtml)

~~~
gavanwoolery
yep :)

------
lifeformed
I know the focus is on the technical aspects, but I have a small suggestion
regarding art style in games:

Don't mix pixel art with fine gradients. Or more generally, don't mix pixel
resolutions. If your pixel art has big chunky pixels, don't ever have a pixel
smaller than that. It makes the style look inconsistent and built out of
mismatching pieces.

The gradient edges could be replaced with a static edge piece, or at least a
banded gradient. I know the images are probably just placeholder art, but it's
something still to keep in mind.

------
Ellipsis753
Strange. As soon as I load that page Firefox totally freezes up. It's just
stack overflow which is normally fine but loading this page makes Firefox go
to 100% cpu and freeze until I end process it. Does anyone else have this
problem? I've never had a similar problem before. I'm on Gentoo linux with
Firefox 24.0.

~~~
archangel_one
Nope. Firefox 23 on Gentoo here, it's fine. Odd really, there are quite a few
pictures of the map tiles, but nothing unusually large. Nothing I'd expect to
kill a browser.

------
gosukiwi
Why not just use a map builder like Tiled, you can build a much nicer map with
several layers, heightmaps are really for 3D stuff

~~~
DanBC
> _in which a 200x200 map is generated from a randomly created heightmap._

The question asker is using a height map because they're nice ways to get
pseudo-realistic terrain, and because they're easy to generate randomly.

I had a quick look at Tiled[1] and it seems nice. But can it do random
generation?

It seems it can fix transitions. Here's a basic shore, turned into a nice
lake.
([https://github.com/bjorn/tiled/wiki/Automapping](https://github.com/bjorn/tiled/wiki/Automapping))

[1] [https://github.com/bjorn/tiled/wiki](https://github.com/bjorn/tiled/wiki)

~~~
chii
i dont believe tiled can generate random maps, but you could potentially write
a program that generated a random tiled document (the tmx format is well
documented), and then use tiled to touch it up. But i guess this only works if
your pipeline is offline, and won't work if you want to be able to generate
random maps at runtime.

------
susi22
Seems like a classical low pass filter which can be implemented quite
efficiently using an FFT. Or am I missing something?

------
yetanotherphd
This is really just a 2d version of marching cubes - "marching squares".

------
nateguchi
This is why I love stack overflow

~~~
asveikau
I actually thought the questioner was a bit too verbose for the SO format. It
read more like a blog post. Too much irrelevant setup. (Does it matter if he's
using JS and HTML here? Or how big his tiles are in pixels?)

It's an interesting problem and a good read though. The pictures demonstrate
the problem and accepted solution well.

~~~
csense
I respectfully disagree. I thought the questioner showed exceptional
initiative in properly explaining their question.

When someone's asking for help, not enough information means gurus waste
valuable time in the following ways:

(1) Explaining things the questioner already knows

(2) Answering the wrong question because it wasn't phrased clearly enough

(3) Jumping to the wrong conclusion because key details were omitted

(4) Being unable to reach a conclusion and having to ask for more information
because key details were omitted

OTOH if you're too verbose, the worst that can happen is that the guru
answering your question has to use his/her scroll wheel to skim to the most
important parts.

------
Vektorweg
Vector graphics wouldn't have this problem.

~~~
vidarh
Why in the world do you think that? You still need to decide how to handle
transitions from one tiletype to the other. The exact details of the problem
are different, but you won't get away from it.

~~~
Vektorweg
Yes, but i think, the problem is far easier to solve. In vector graphics, you
just set a (repeating, bending) "texture" along the path (between tiletypes).
From a higher view, it looks very simple, but looking deep in those vector
algorithms is difficult. In the other hand: using a grid, like in the
question, is from a lower view very simple, but it grows lots of complexity,
when going upwards.

So, if you know your math or have a VG toolkit, its as easy as having no
problem.

