Texturing Terrain Tops

All the terrain in this game is made of individually simulated "atoms" (pixels) - just like the water, acid, flammable gas, etc.

But terrain doesn't move, so how can we make it look a little more visually interesting?

Well, we can apply a texture - but it isn't quite as easy as that...

Starting Point

A long time ago, in a game prototype far away, each individual atom was given a slightly-randomized colour:

Assigning colours based on the element of each atom, with some randomization for certain elements.

That looks pretty bad, right? Let's see how we can spruce it up.

Tilesets

In pixel art games, it's common to use "tiles" (square images) together with an approach called "autotiling" to add some visual interest to your levels:

But even though I implemented autotiling at one point, I plan to move away from using square tiles for level design,¹ so let's move on.

Texturing Terrain

A more flexible approach is to sample a tiling texture, which is nerd-speak for drawing a repeating image over the top of terrain atoms.

Repeating an image sounds bad, but if you also randomly darken² some areas, the repetition is far less obvious:

Applying a texture to atoms (left), then again with some randomized darkening (right).

This is already a massive improvement,³ but the edges of terrain still look unfinished.

And that is where it gets tricky.

Texturing Edges

In an autotiling approach, it's quick and easy to tell where the edges of your terrain are and what tile image you should apply to each square of atoms: for example, oh this is a tile with empty space above, so pick a tile with an edge on top.

But when you are looking at each pixel individually to determine its colour, it gets quite expensive to work out how far away a pixel is from each edge!

After some research,⁴ I figured out a reasonable approach: first, group atoms into islands:

Identifying the connected islands: all the same-element atoms touching each other.

Then for each island of connected atoms:

1. Run a marching squares algorithm to convert it into a polygon (possibly with holes).
2. Trace the edges of the polygon, stopping every so often.
   • Whenever you stop, move inwards a little, and draw a small "edge graphic" image onto the underlying atoms.

Tracing polygon edges (red lines) and stopping every so often (green lines) to draw edge graphic images onto the terrain.

The little images do technically get drawn over each other sometimes, but I don't think you can really tell - and the same idea can also be used to add some outlines around the edges of the stone,⁵ which makes it look a bit more finished.

Now we just have to put it all together and see what it looks like.

Of course, it still looks a little silly with all the square edges, and that little metal bridge still looks terrible - but those are problems for another day.

Discerning Eyes Wanted

• Are you staring at the above and wondering What The Heck Was He Thinking?
• Have you got a pet peeve that you think is holding this game back graphically?
• Or maybe you just like being particular about colour choices, pixel art rules, or badly programmed graphics shaders?

Then please, get in touch! I'm trying to polish up the graphics and I'd love to add more things to my hit-list.

Playable web build‎

As (almost) always, here's a new playable web build for you, now with approximately 20% better graphics!

(And yes, there's a neato parallax background now, but we don't have words left to talk about that. There are rules about these things, you know.)