1
\$\begingroup\$

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:

enter image description here

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?

\$\endgroup\$
  • 3
    \$\begingroup\$ Can you provide a screenshot of what your "cluttered" screen currently looks like? I think that will go a long way towards preventing concern that this is too broad or opinionated. \$\endgroup\$ – user1430 Mar 31 '17 at 19:31
  • \$\begingroup\$ Is this just aesthetics, or are you targetting a text only platform / operating system? (e.g. DOS, Windows Console, Linux xTerm, etc...) \$\endgroup\$ – Theraot Mar 31 '17 at 19:40
  • \$\begingroup\$ @JoshPetrie I don't currently have any screenshots right now, but without any improvements, it'd look almost exactly like dwarf fortress' graphics. Would it be okay to include a screenshot of that instead? \$\endgroup\$ – Ethan Bierlein Mar 31 '17 at 19:43
  • \$\begingroup\$ @Theraot It is just aesthetics. I'm using XNA. \$\endgroup\$ – Ethan Bierlein Mar 31 '17 at 19:43
  • 2
    \$\begingroup\$ The beauty of ASCII based graphics is you can mock up a screenshot with something as simple as notepad. If you want help with your UI, mock that up. If you show us some other game, we're basically troubleshooting that game's UI & not your game's problems. \$\endgroup\$ – Pikalek Mar 31 '17 at 19:46
3
\$\begingroup\$

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:

enter image description here

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:

enter image description here

  1. 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.

enter image description here

  1. Box-drawing

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

enter image description here


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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.