Border Lines on a Strategy Map

Happy Thanksgiving!

A couple months ago I was noodling on techniques for displaying the map in a strategy or tactics game. Well, lately I’ve been thinking a lot about one specific aspect of how those maps work: representing borders on the map.

I’m talking about the colored lines on the ground in this screenshot:

This particular screenshot is Civ5, but this same visual effect is common to many game maps. Now, I already know ways to do outlines like every hex in that screenshot, and many tactics games simply outline every tile for displaying, say, a unit’s movement range.

However that screenshot also has red and yellow lines showing territory control, and that’s what I’m unsure of. I have never drawn lines which surround a collection of tiles, rather than every single tile.

On the one hand, one could say “use the same techniques as drawing lines around one tile, but calculate lines that surround a bunch of tiles, not just one.” That sounds simple, except the visual tricks I use don’t calculate lines to draw. Instead, there are efficient rendering tricks that use things like vertex color and dynamically generated texture coordinates to draw polygons.

So I’m thinking I could do tricky stuff in shaders to do similar things for clumps, instead of only one at a time. For example, Minions Art used world position in a shader to draw circles on a mesh surface, so I can probably do something similar with other shapes.

This brings me to something called “signed distance fields.” Long story short, these are useful for drawling high-resolution lines on a mesh without requiring high-resolution textures. SDF rendering is great for fonts and is used by Text Mesh Pro.

Well, as the animation at the top of this SDF shader tutorial illustrates, they can be used for drawing other shapes too, not just fonts.

 

So yeah I’m going to experiment with this on a strategy game’s map, and hopefully I’ll have a functioning demo next post. Here are a couple Unity-specific resources I’ve found, with the latter including a link at the bottom to a page with functions for various shapes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s