Tile Metrics: Improving Terrain Graphics and Road Connectivity

[Mercator]

This thread is based on a hunch I had this morning. However, two earlier findings played a role, namely: Allard Höfelt's "The truth about civ2 squares" (which I mostly disprove, incidentally, even though the ideas are good), and my own map grid images (which this thread builds upon).

What happens if you put a transparent terrain square below a terrain square which extends below its diamond? (see attached image, top)

The result is clear. On the left you see the usual result, a black void which turns into rubbish if you start moving around the map. On the right you see how the red from the Desert graphic fills up the top transparent half of the Plains graphic. Also note that the red only appears over the semi-transparent Plains, while it isn't visible in any other squares.

This immediately disproves Allard's thread (not to mention his "assymetrical pixel" was a load of hokey), because this shows that graphics can extend below the diamond shape just fine. The lower edge of a tile isn't a fixed boundary beyond which everything disappears. It all just depends on what the tiles to the Southeast and Southwest of it look like.

The reason for this is that the map is drawn from top to bottom, row by row. With the usual "jagged" diamond shape, there is a thin line of overlap as Allard noted. This does indeed explain the gap in North/South road connections or the lower edge of a unit disappearing.

However, as my smooth new grid images and the transparent terrain test showed, there is no need to stick to this diamond shape. You just have to make sure you are consistent, or you may end up with a few stray transparent pixels.

In the attached image, on the right, you can see my newly suggested diamond shape guidelines. If you stick to these guidelines, there will be no overlap. Furthermore, there is no irregular "3-step" in the diamond, making for a smoother grid and more intuitive tile shape.

The left-most of the three is a single-tile high graphic for terrains, for instance. The next is a one-and-a-half tile high shape for Civ2 units. The far-right image is a 2-tile high graphic for Test of Time units. Note that I've used two slightly different shades of purple to add some further distinction. Due to the 15-bit nature of Test of Time graphics, both shades will be transparent in Civ2.

This same new grid can also be applied to the Ocean and coast graphics, so I've also added a new little diamond (as used for the coastal graphics in the Terrain2). In contrast with the original ones, all four little diamonds now have the exact same shape. Each little diamond is an exact quarter of a normal diamond, so much less of a hassle to figure out how they tile.

In the lower-left corner, I've added the smooth alternatives for the three standard grid shapes. The cursor, standard grid and city grid.

With this new grid, there will be no unexpected parts of your unit disappearing. The vertical road connection will look better, as long as they stay within the purple diamond, and the grid lines run smoother.

The attached image isn't in any appropriate Civ2 graphics format, but there's nothing a little cutting and pasting won't solve.

[fairline]

Nice work The smoothed diamonds will come in handy for unit creation, certainly.

As for the roads, I guess it's a case of transposing existing road gfx into the new diamond, ensuring nothing overlaps the boundaries?

BTW, I wonder why Micropose used that irregular-shaped diamond, and not a '2-by-2' pixel regular version like yours?

[Boco]

So you narrowed the diamond! Does squares using your diamond have better looking borders at multiple zoom levels? Do East-West RR's show in full?

This is Catfish's conventional ocean diamond superimposed on Mercs diamond.

[Mercator]

Originally posted by fairline
As for the roads, I guess it's a case of transposing existing road gfx into the new diamond, ensuring nothing overlaps the boundaries?

Well, the diamonds are only a guideline anyway, so I'm pretty sure the existing roads already work. The difference between old and new is quite minimal actually, so you wouldn't have to do any major work to get it sorted.

It's mainly the terrain that needs to be adjusted, because that's what's getting in the way, so to speak.

BTW, I wonder why Micropose used that irregular-shaped diamond, and not a '2-by-2' pixel regular version like yours?

Maybe it was the programmers who drew up the diamonds, based on their engine, and being slightly graphically challenged? Or maybe they actually wanted to have some overlap?

Also, their irregular-shaped diamond seems kinda natural, because it fills the 64x32 space perfectly, while mine leaves a one-pixel gap at the left and right edges...

Well, my guess is as good as yours.

[Mercator]

Originally posted by Boco
So you narrowed the diamond!

I guess I did. After seeing that the transparent terrain thing worked and since my "smooth" grids worked earlier, I simply tried if straight edges on the diamond would still make the terrain fit.

Does squares using your diamond have better looking borders at multiple zoom levels?

I wouldn't know why not? I don't think the terrains will really look any different. You'd just be shaving off a few pixels, half of which you didn't see in the first place.

Do East-West RR's show in full?

Nope... This isn't some magical solution or anything, it just removes the overlap really. Unfortunately, the railroads use quite a few more pixels of real-estate. You will definitely see more of them, though.

But, wait a minute... If you use my new diamond, but move it one pixel down (for all terrain graphics), and "wrap around" the pixels of the diamond that fall off the bottom to the top, you get North-South RR's complete (something that isn't quite achieved yet with the earlier one).

As long as you are consistent, this should work. The only problems here might be that the terrain will be centered slightly off the square (especially if you go even more extreme than one pixel), and the coastline graphics might start giving problems. I'm not sure if they have enough leeway to be able to cope with that.

Let's see... (nevermind the mock terrain)

[Mercator]

The coastal graphics can (should) also be changed to fit the new grid, so I added some text about that too, and included a small diamond in the image (see first post).

[Catfish]

Originally posted by Mercator
The coastal graphics can (should) also be changed to fit the new grid, so I added some text about that too, and included a small diamond in the image (see first post).

Where? Am I going blind?

Alternatively, you can just stamp this selection (minus the white, of course) over your existing coastline.

[Mercator]

You should reload the thread, your browser probably still loads the old image (that's what happened with me anyway).

Mine are better than yours, na na na...

Seriously, my updated little diamond doesn't just update the outer-rim of the tile, but it changes the shape of all little diamonds to one and the same shape (like a miniature version of the big one). So that makes the whole coastal graphics much more regular, rather than the botched shapes of the original coastline graphics.

Then again, my version might need a little extra work to convert, so your version works just as well (it just isn't as purty as mine ).

[Catfish]

Originally posted by Mercator
You should reload the thread, your browser probably still loads the old image (that's what happened with me anyway).

Yes, it's most definitely a cached image that I'm viewing then. I still can't see it BTW. I could flush the cache, but there's no urgency. In this instance I decided to attribute its absence to a stuff up on your part (on the basis of probability ), so this didn't occur to me at the time.

Originally posted by Mercator
Seriously, my updated little diamond doesn't just update the outer-rim of the tile, but it changes the shape of all little diamonds to one and the same shape (like a miniature version of the big one). So that makes the whole coastal graphics much more regular, rather than the botched shapes of the original coastline graphics.

I haven't examined the tiling process in great detail, but I assumed that the inner edges of the four small diamonds interlocked precisely with each other to form the larger diamond. That was the assumption I made when I conformed my coastal terrains to the "streamlining" of the larger tiles.

Oh and

[Mercator]

Originally posted by Catfish
Yes, it's most definitely a cached image that I'm viewing then. I still can't see it BTW.

If you right-click and save, I guess the new one should download...

In this instance I decided to attribute its absence to a stuff up on your part (on the basis of probability ), so this didn't occur to me at the time.

I haven't examined the tiling process in great detail, but I assumed that the inner edges of the four small diamonds interlocked precisely with each other to form the larger diamond. That was the assumption I made when I conformed my coastal terrains to the "streamlining" of the larger tiles.

Well yes, they do. There's no overlapping or anything, but it's possible to adjust how they interlock, obviously, if you change the shape of them. The only merit my suggested diamond has over yours is that it's more consistent and symmetric. I'm a perfectionist.

Oh and

[Catfish]

Originally posted by Mercator
If you right-click and save, I guess the new one should download...

I thought about that, too, but nope, it's still the same one - date stamp 31-1-2004 and all. I guess I'll just have to wait to see your masterpiece.

Originally posted by Mercator
There's no overlapping or anything, but it's possible to adjust how they interlock, obviously, if you change the shape of them.

Prior to editing the coastlines, I actually rebuilt the larger diamond from the smaller ones to ensure that the pieces would fit perfectly – I just wasn't sure what the game engine would do with them. Funnily enough, I'd just finished doing the coastlines before I came on-line, only to find you posting about the very same.

Originally posted by Mercator
The only merit my suggested diamond has over yours is that it's more consistent and symmetric. I'm a perfectionist.

In other words, since this magnificent symmetry is not manifested in the game (only in your mind – and terrain2, of course ), it doesn’t matter. It's easier to update existing coastlines using my method and I imagine this would account for most cases.

This is getting silly.

[Mercator]

Originally posted by Catfish
I thought about that, too, but nope, it's still the same one - date stamp 31-1-2004 and all. I guess I'll just have to wait to see your masterpiece.

Can you see it... now? I uploaded it again, with a new filename.

Funnily enough, I'd just finished doing the coastlines before I came on-line, only to find you posting about the very same.

I noticed that too, and it was Bitterfrost that got me to change it too.

In other words, since this magnificent symmetry is not manifested in the game (only in your mind – and terrain2, of course ), it doesn’t matter.

Burn the heretic! All hail Mercator! Long live Mercatorism ![/megalomaniac] (hey, I didn't start all those plays on my name)

It's easier to update existing coastlines using my method and I imagine this would account for most cases.

Yep. So to your coastal template.

This is getting silly.

I'll stop it. I promise... (wouldn't want this thread to get toasted after all)

[Catfish]

Originally posted by Mercator
Can you see it... now? I uploaded it again, with a new filename.

Nope, so just for you, I cleared my browser cache.

I see it! I see it! I'm... speechless. Totally blown away!



Now I have to wait for all those bloody web pages to load again.

Originally posted by Mercator
Burn the heretic! All hail Mercator! Long live Mercatorism ![/megalomaniac] (hey, I didn't start all those plays on my name)

Hey, neither did I. I think it was Boco. Hell, I'm gonna start blaming him for everything from now on. I've seen the term, "Catfished" used on a couple of occasions. I'll have a rival cult soon, then we'll see who does the burning around here.

[Mercator]

[Boco]

I didn't do it; don't know how; don't have any. Oh wait, I'm not at work anymore.

You reach cult status when scenario designers name cities after you.

[St Leo]

Thread moved.