Real Software Forums

I have a tile based game where the terrain is made up of combination of eight(8) tiles (grass, sand, alphalt, dirt,water etc.)
I have figured out a quick easy way to create edge transitions giving each tile type a priorty (grass is highest, water is lowest) and using grayscale masks
but it only works for top, bottom, left and right edges.... I cannot figure how to make the corners look good.
This is most probematic when a corner has multiple types of terrains involved.
99% of the "tutorials" on the web talk about terrain consisting of two types of tiles (grass and water).. I need at least 3 (grass, sand, water) but would prefer the 8 I have.

I have come up with two concepts.... but am still perplexed about handling corners.



Assuming "X" is the tile being analyzed.... my first idea would be to examine the 8 neighbors and create a mask to apply to "X" that would allow each of its neighbors to encroach inside "X"
The other would be to create masks to have "X" encroach outside onto each of its neighbors

But either way... the corners are the issue. If 2,3 and 4 were all the same terrain ... no problem... but if each were different..... then what do you show? and how do you show it?

My terrain tiles are 102 x 102 pixels so I have enough resolution to work with.


Any specific help would be great!

and gee.. if anyone even felt like taking my tiles and writing a little demo....

here is a partial screenshot of what I have so far (as you can see it REALLY needs some blending)




Note.. the TRACKS are a layer all their own.... so there is one image of TERRAIN tiles (above) and another for TRACK (and soon to be another for Buildings and bushes)

The (hopefully) end result will be a virtual "toy" train set. Build your layout.... place your trains. Drive them around the layout... all without losing 3/4 of your garage.

blend them together.
Add a mask to the top left of each tile which gives one pixel row/column with 25%, one row/column with 50% and one row/column with 75%. Than draw each tile 3 pixel overlaying the other one on left/top.

This way you'd have a more soft edge.

Greetings
Christian

Christian... did you even READ my post?

Sorry. I missed those lines.

On the corners, I would simply use roundrect drawing commands for creating the mask.
so on the edge the transparency is even higher, so 4 tiles meeting there give 100%.

Greetings
Christian

But that does not answer the question.

Putting a simple corner shape mask is one thing.... but the question is how to handle the fact that any given corner can have 2,048 combinations of neighbors
How BEST to decide WHICH terrain to apply that mask to? Inside? Outside?

I am going for a blend mask solution, as I dont want to spend the next year or two hand drawing custom tiles for a program that only took a few days to write.

Am finding it quite frustrating that there are hundreds of articles on the web, but not a single one of them discuss specifics... they are all 30,000 foot level explanations

Not Perfect... but much better....... still need to tweak it some

BEFORE


AFTER

Dave,
I don't know if you're still looking for answers to this, but here's how you might want to think about doing it.

Build your terrain tiles larger than 102x102. I built these from your originals at 142x142:



This would require that you make 8 passes to lay the tiles. Starting at water and working up to grass. That way each higher level overwrites the lower tile along the edges. You'd have to offset my tiles from your Grid origin -22 on x and y.

And let the edges fall where they may:



I think some of my edges are too heavy. But I think this would be faster than analyzing each tile.

The GIMP file is here.

Note that the GIMP file has two sets of guidelines, one is blue which defines the 142x142 box for each tile, and the other is the black terrain grid guidelines. I didn't know if you were adding that later, or had an option to turn it off or on.

I realize that you're looking for an algorithm.

I'm looking at RB from VB with XNA, and I'm still trying to figure out how to SpriteBatch in OpenGL. But that's another story.

The point is that I've been looking at graphics for more than a year. If you look at the open source game Battle For Wesnoth, they do what you're talking about. The file that holds water hexagon tiles has 537 images. Every terrain type, of which there are dozens, has "bleed" over images that are placed on adjoining tiles. So there's a water "bleed" image for every situation. There's also "waves" flowing in every direction.

In XNA (directX) this is fairly simple, but I don't know how to batch sprites in OpenGL with RB so I thought I'd give the above method a try, as an exercise. As I look at it again and again, I realize that the edges are way too heavy, but I'm sure you get the idea.

Also, you often talk about image masks, and I'm used to using transparent .png files, so my method may not help you in any way at all!

Battle Of Wesnoth is open source, so you can view their graphic display code and it might give you some ideas for building your own algorithm.

Hope this helps.
RBnoob

Another try with tighter edges:



and:



New GIMP here.

Okay, last one.

This time the grid is built into the tile using a color from the tile:



Resulting in:



With GIMP here.

Of course they no longer need to be 142x142.

And with tracks ...