Map Tiling Algorithm – HTML5 and JavaScript RPG | Hacker News Reader

Map Tiling Algorithm – HTML5 and JavaScript RPG

stackoverflow.com

88 pointscodecurve20 comments

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

RPG Maker XP, in case anyone is wondering:

http://www.rmxp.tigerseye.uk.com/tutorial_rmxp1.shtml

yep :)

Well the link is dead.

http://imgur.com/ndIdyUN Here is the image I was referring to (looks like HN crashed the former site)

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.

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.

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.

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

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

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

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.

I've actually had pretty outstanding results using heightmaps created using perlin noise to create tile maps. Quite natural looking, ocean to beach to jungle to forest to mountain transitions. Then use another dimension of perlin noise to generate other features such as boulders and trees.

The problem with conventional editors is that it takes a great deal of effort to make a convincing looking world. Sit down and give it a serious go with any tile editor and you may find yourself agreeing with me after a few hours. Look at examples of maps generated with any tile editor for further evidence of this viewpoint.

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

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

This is why I love stack overflow

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.

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.

Vector graphics wouldn't have this problem.

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.

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.

Reply on news.ycombinator.com