How to make 2D map beauty, but not such complex

Good day!
I think about 2D tile map again, but now i want to make it more beautiful and realistic.
For this I must to draw tiles for all terrains and tiles for connect of this different terrains. If I will have many types of landscapes, i need to draw really many connects… And I will write long “if else” or “case of” constructions to choose right tiles.
I saw, how it makes in StarCraft Brood War, for example. They maked “main” terrain for every planet, his tiles connect with any else tiles. And this terrain is like connector for others… But, if “Dirt” is main terrain in planet, "Asphalt, “Rocks” and “Grass” never be a near, “Dirt” always between them. You can see it in screenshots in internet. I like this idea, because it simple, but it not so beautiful sometimes (howewer, I adore SC1 looking style).
Next - Heroes Of Might and Magic. They have wery beatiful map. But i looked to HOMM tilemap. Is titanic work for me now. So many tiles and, i think, so many code to process them. They have tiles for connect 3 different terrain types in one point, nothind need to say more :smiley: .
So, maybe you can give me idea, how unite beauty and simplicity with minimum compromises? For example, all tiles have an uneven border that extends beyond the cell and overlaps with neighboring tiles? But border between water and grass is different that between forest and grass. So, i think it will be ugly.
And, if I draw big tile map and write all algorithms for it procedural drawing (about 200 tiles, i think), is they will work fast?
I must to sort out all neighbor tiles of every tile, and for each sort out every terrain types, until progpram find right connect, yes?

Hm, I looked more carefully to HOMM, they use one terrain type to bonding other terrain types. Like StarCraft, hm.
So, i think it’s a only way to did it.

Yes, creation and dynamic management of “border tiles” is the way to go, e.g. pay attention to the border tiles in upper left of RPG Tiles: Cobble stone paths & town objects |

However, technically you can have some special way of treating this usecase. As you can have 3D and/or transparent objects you can simply make those overlap. E.g. sand scene could be slightly larger than the tile size and would properly tile with other sand tiles, but will be “above” the dirt therefore creating some small slope with maybe rocks or other items which would otherwise be hidden by nearby desert tiles. This is a narrow usecase but it can work well.

The Battle for Wesnoth uses slightly similar approach. They don’t have the “core” tile larger than the tile size, but depending on “nearby tiles” they add semi-transparent overlay. E.g. if there is sand on north of this tile, then they’ll add “sand-north” tile to this one. This way the tiles can stack and you don’t have to account for all possible combinations, at the slight cost of performance.


Thanks, interesting idea, will think about this! Both ways seems nice, but on different. Border items give more detail picture, but terrain will not so variable.
Semi-transparent overlay have low performance in compare with border tiles, despite the more compact code? Transparency so “heavy”?
And, if I will use it, I must join overlays to the TCastleImageTransform of main tile? Because overlay is are new object, but i use fixed number of items in the map array of TCastleImageTransform. Will see about it in recent theme “Build (or combine) and tint sprites (or change its colours)”.

No, but if you render a single ready image - it’s one image. If you render 6 overlays (for hexagon map in Wesnoth) plus base tile then you need to render 7 images.

And i see one more difficulty.
I use overlay, if “above” not green. But, if “above-right” is green, it use overlay to the left (for the same tile) and i will have double overlay in the angle.
I can use angle overlay, but. If “above-above” cell use overlay to - all repeat again (I added picture).

I watch to Wesnoth screenshots, but, of course, don’t see double overlays. How they do that?..
Really, i have same problem with border tiles. And I think to use four tiles for one game cell, for construct angles without problem. For example: my “real” world array is RealMap[ i ][ j ] (48 x 48 cell size), but i draw PictureMap (24 x 24 cell size) like:

PictureMap[i * 2][j * 2] := Left-Above.png;
PictureMap[i * 2 + 1][j * 2] := Right-Above.png;
PictureMap[i * 2][j * 2 + 1] := Right-Down.png;
PictureMap[i * 2 + 1][j * 2 + 1] := Left-Down.png;
{ …and choose optimal tile for every position in every case. Is it bad way or not? As I say before, game draw ~10 tiles around player sometimes, when he change location. }

And one more question - what faster: use one border tile and rotate him to the left/right/down, or draw and donload different tiles for every direction?


I am new here, new to CGE.
Nevertheless maybe i can share some links / info to the topic “2D tiling”: Wang-Tile-Shading.

Coming from 3D-Graphics it always annoyed me, to see repeated patterns on an terrain ground for example. Therefore i did a research and found out, that there is a wang-tile shader for such a problem.
What make a 2D-Texture or a 2D Map more beautiful, more realistic.

Here are some Links:

Maybe you can adapt it in some way to CGE / pascal. Hope it inspire you / users who want a more realistic pattern.

1 Like

Thanks, It seems close to approach with “core” ground style, but more easy to make.
For now i realised method with “four tiles in one tile”. In fact, this is a kind of “overlay tiles”, but with some specific changes.
I like how it works and I want to show it… When I get free time to polish some details and draw more tiles (at now there are only 3 terrains). I’m interested by opinions about my code for this case.