How can I minimize visual clutter in an ASCII rougelike game?

Question

I'm currently designing an old-school rouguelike, similar to games like Nethack or Dwarf Fortress. While I love the ASCII graphical style they employ (which my game will also employ), they also suffer from visual clutter, caused by the large amount of text usually present on the screen at any given time. The graphical style of my game without clutter-reducing improvements will effectively be identical to that of Dwarf Fortress's:

I've thought up a few things which could potentially alleviate this problem, but they're probably not enough:

• Separate the UI rendering and game rendering into separate "layers".
• Apply a unique color filter to each layer to visually separate them.
• Tone down the use of ASCII characters, and instead opt for solid coloring in some places when possible.

How can I minimize this visual clutter?

Answer 1

You want an ASCII based aesthetics, but not exactly because you want to have less clutter. How far do you deviate from the classical aesthetics of Dwarf Fortress et.al. is up to you.

Consider that Dwarf Fortress will look very different if you use custom fonts, or if you use a viewer that uses tilesets:

Of course, those have the limitation that they need to preserve the characters that will appear in text in the game. You don't have that limitation.

---

If you don't want to move to tile graphics, I suggest to do the following:

1. Use colored backgrounds

I'm taking the NetHack example from Wikipedia:

                                        ------------
                                      ##....._.....|
                                        |...........#          ------
                                       #...........|           |....|
                   ---------------   ###------------           |...(|
                   |..%...........|##########               ###-@...|
                   |...%...........###    #                 ## |....|
                   +.......<......|       ###              ### |..!.|
                   ---------------          #              #   ------
                                            ###          ###
                                              #          #
                                           ---.-----   ###
                                           |.......|   #
                                           |........####
                                           |.......|
                                           |.......|
                                           ---------

If you replace each "." with a white space with silver background, and each "#" with a gray background, you get this:

2. Use emoji / special fonts

I have used emoji to replace the objects in the map. I had adjust spacing manually to prevent the text to break aligment as the emoji font isn't monospace... that shouldn't be a problem for you if you place objects in a different layer.

3. Box-drawing

By using Box-drawing characters we can get the following result:

---

If you are thinking that that's not text... well, there I didn't use images or draw lines. Just text, font, color and a few space tweaks. Here is my evidence:

p{line-height:12pt;margin:0;border:0;padding:0;font-family:"Courier New";color:black}
span{font-size:12pt;font-family:"Courier New";color:black}

<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
┌──────────┐</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:silver;letter-spacing:-1.8pt;">&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="background:silver">🛐</span><span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;
</span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
│<span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ┌────┐</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="background:gray">&nbsp;</span><span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; │<span style="background:silver">&nbsp;&nbsp;&nbsp; </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ┌──────────────┐&nbsp;
<span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span>└──────────┘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; │<span style="background:silver">&nbsp;</span><span style="background:silver;letter-spacing:-4.6pt">&nbsp;&nbsp;</span><span style="background:silver">📦</span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; │<span style="background:silver;letter-spacing:-3.75pt">&nbsp; </span><span style="background:silver">☠️</span><span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>│<span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:silver">&nbsp;</span><span style="background:silver">👨</span><span style="background:silver;letter-spacing:-2.8pt">&nbsp;&nbsp; </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; │<span style="background:silver;letter-spacing:-2.5pt">&nbsp;&nbsp; </span><span style="background:silver">☠️</span><span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span> │<span style="background:silver">&nbsp;&nbsp;&nbsp; </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:silver">🚪</span><span style="background:silver;letter-spacing:-2.17pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="background:silver">🕳️</span><span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span> │<span style="background:silver;letter-spacing:-2.7pt;">&nbsp; </span><span style="background:silver;">🏺</span><span style="background:silver"> </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
└──────────────┘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span>&nbsp;&nbsp; └────┘</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span></span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="background:gray">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:gray">&nbsp;</span></span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┌──<span style="background:silver">&nbsp;</span>────┐&nbsp;&nbsp; <span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span></span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
│<span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>│&nbsp;&nbsp; <span style="background:gray">&nbsp;</span></span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
│<span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="background:silver">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span><span style="background:gray">&nbsp;</span></span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
│<span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│<span style="background:silver">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>│</span></p>
<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
└───────┘</span></p>

Of course, how that looks may change depending on what fonts are available on the browser, on what zoom the user is viewing, etc... you shouldn't have that problem in XNA.