Experimenting With Outlines

I posted recently about how I often do one-week projects to learn and experiment. I don't have a strict one-week time limit. Sometimes I'll extend a project or come back to it after I've learned something new.

Ten weeks ago I had a one-week project in which I wanted to draw outlines on an isometric view of a dungeon game. I didn't want to outline each block, which could be implemented easily by editing the sprites. Instead, I wanted to outline the larger units. Here's a comparison:

Outlines around every sprite vs around walls

The second thing I wanted to do was to implement all of this in shaders. My first attempt was to draw a "surface id" to a texture, and then draw black outlines whenever the surface changes.

Draw a black line whenever the surface id changes

There were lots more details to implement, including outlines around billboard sprites, field of view, and lighting of wall blocks beyond the outline.

Dungeon map with outlines

I was pretty happy with that, even though it had some glitches, and I decided that project was finished.

A few weeks later I re-opened this project to explore a different approach. Instead of drawing the lines in a post-process step, I wanted to draw the lines as the sprites were being rendered. I posted some images on Twitter and got a suggestion from @Rezoner, who had made a version where some lines were white and some were black, depending on camera direction. I took that idea and ran with it, making white lines where the player could see the walls.

Dungeon map with lit and unlit outlines

I was pretty happy with this version too. I then merged the code together into one unified demo, with a toggle. Now I think I'm finished. But who knows? Maybe I'll re-open it later.

Take a look at the demo!

Things for me to keep in mind:

• The one-week self-imposed deadline is just a rough guide. I don't have to follow it strictly.
• Sharing unfinished work can lead to more ideas for improvement. I should share more things early.
• Sometimes all I need is a proof of concept. I don't need to make everything work perfectly. If I actually use this in a real project, I can work out those details then.