Improving Angband's appearance, esp. colors

[tilkau]

This is a discussion thread for improving the way Angband uses colors, mainly -- and possibly also its fonts. Feel free to comment on any of the following, particularly on the key points highlighted with italics.

Discussion was kicked off by Nefandi's comment here, listing some 'most aesthetically pleasing RLs', including Angband.
Discussion proceeded as follows (key points are highlighted in italics, side comments are mostly omitted, some sentences clarified). Later Nick offered his comments.

tilkau

Angband 4 (the latest vanilla, looks damn great imo)

Have any screenshots? Last I checked Angband had way oversaturated text (primary green/yellow/blue/red/cyan etc) with too-high contrast. This is on Arch Linux, angband 4.0.3, run with angband -mx11.

This album shows what I see.

• Just changing a lot of the characters that are rendered with white to the light pastel blue or light grey would help a lot
• Desaturating the colors shown as P y R G B T in the color editor(Press =, c, c), and darkening them slightly, would probably also help a good deal.
• Town looks better than it used to. more interesting design too
• Lit squares are too high contrast. white on black can get out. Try light grey on dark grey, at least for squares that don't have a monster or item.
• Unlit squares look good.
• Font is generally heavy (which worsens any high-contrast problems)
• Status screen is way too high contrast, it makes it a busy mess. Ditto for standard sidebar, death screen, highscore list, most of inventory / menu system.
• Status line (ie. L:1 Confused etc) seems decent, if a little high contrast. Might be improved by adopting DCSS's practice of using different background colors for different statuses (not sure whether that would be practical.. I know Angband has a truckload of statuses..)

Nefandi

I like many of the points you list. You seem to have a fine taste. However...

Font is generally heavy

I disagree because I'm a low vision player and so I don't do well with thin wispy fonts or tiny fonts. I prefer big fat super-legible fonts, if possible. (Although there is such a thing as too fat even for me when it comes to fonts. If I were a font designer I could probably be more specific about the thickness, but my knowledge of typography is only 1 notch above the pedestrian level.)

If anything, Angband's uppermost font size is way too small for me, but it's doable.

I particularly like the dots on the floor. Those are some sexy dots, if you ask me. (The floor's dots are one kind of glyph (? right term?) that I actually don't need or want to be very fat in a roguelike. In print I do like fat dots, commas, etc.)

tilkau

Heavy is relative to the contrast you use. Changing that white to light grey, and dropping the saturation of the primaries, would immediately make the text appear less heavy, without actually making it take up less pixels. I'm not sure how this interacts with your low vision, but if darkened areas as they currently are look okay to you then this might be fine.

Nefandi

I pretty much 95% agree with everything you say. But even if you take a 1px wide thin wispy font and crank the luminosity, saturation, way up, I still wouldn't like it. So maybe a somewhat heavy font can be 'rescued' by toning down saturation and/or luminosity, but from my POV a wispy font is less able to be rescued by tuning these values up.

I just seriously dislike thin, wispy fonts that look like spider webs. But it's possible for a font to get too heavy too, even for me.

Maybe the # glyph is a bit of an offender, but I kinda like it, actually. They're supposed to be walls... so it's forgivable in that case. And normally I would not like airy dots, but as a floor glyph, it's perfect.

[...]

tilkau

wispy fonts

In case it's ambiguous, I don't really want to thin angband's font -- it's curves could be a little more elegant, like fantasque sans mono, but otherwise it's not bad.. Just the way it is used.

[some posts omitted]

( there was also a separate thread here, but the only thing of note IMO was the following : )

tilkau

[...]
Solarized is sort of the exemplar of exploiting balanced hue contrasts to produce a color scheme that's both gentle and quite visible; it is even swappable between dark and light like you mentioned.
[...]


(I brought the thread to his attention and Nick replied as follows : )

nck_m

[...]

• Fonts vary a lot between the frontends - there's Windows, OS X and three Linux ones (x11, sdl and gcu). The x11 port has not had any attention for some time; if you can suggest a better default font or other specific improvements, that would be great.
• I find it very hard to disagree with anything you've said about colours. Desaturating the colours you've suggested is certainly something that could be one, and where we would appreciate suggestions (preferably with actual numbers); it's possible that some need higher contrast too (notably b and D, and possibly v and U). A quick experiment tells me that mostly changing w->W and only using w for effect should be a win.
• Status screen, I could not agree more. A complete redesign of at least colour and preferably format as well would not be before time. Other menus a bit too, although desaturating colours and doing the w->W thing may solve a lot of that.
• Many of the specifics are or could be encoded in files in lib/customize - for example, the colours of terrain for different lighting states. As an example (done for tiles, but the same idea works for ascii), look at lib/tiles/shockbolt/graf-shb.prf.

[tilkau]

Here's a basic, color-only edit of the status screen, illustrating a few possible changes:



The three colors I changed are annotated. Others are eyedropped from other screenshots, so should be within the standard set.

And here's an imgur pseudo-gallery that should let you get a side-by-side view of old and new:

Link

Principles used:

• a little saturation is enough (may still be too much; but is much more tolerable like this)
• alternate colors to make neighbouring headers differentiate better
• darken unimportant info

Things I didn't do (yet)

• Maybe the value of current HP should be in white
• Stat modifiers (middle three columns of stat group) are probably less important and could be darkened
• Maybe the various turncount headers (and their values?) could be darkened; unless I'm mistaken, they are generally not important.
• Melee + ranged column values maybe should alternate colors as well.. not sure whether there is a good color to use here currently.
• Design changes (Cur and Max Exp seem like they could be combined, similarly to the HP display. Maybe Cur could be entirely removed and just a row indicating amount of exp sapped could convey the same info.
• Background colors could be used to 'solidify' the columns and/or logically group related values further.
• Don't really think having the gold a different color from everything else works out.. it's not really that important to warrant a special color.

[Nick]

Here's a basic, color-only edit of the status screen, illustrating a few possible changes

Here's some quick reactions

• The desaturation is a big win.
• I like the alternating colours in rows, but I'd make it defined by complete row - so top row all base text is lighter, second row all base text is darker, etc
• Maybe have the same light and dark pattern in the stat table (and yes, use base text on the middle columns); I think light/dark green are fine for this, and maybe use colour Z instead of dark blue
• HP and SP - maybe colour as in the sidebar?
• Cur and Max Exp get very large, so that needs to be taken into account in any design change; I'm inclined to think you do still want them both
• Maybe swap places of HP/SP and Age/Height/Weight, make the top-middle column start one line lower than the outside ones, and use brown for all the fields in the first column
• Agree about the gold - just make it alternate like the rest of the column, maybe?
• Changing background may well work - note there's a dark colour (COLOUR_SHADE) used for the background in the hybrid wall setting that may be good here.

Hm, more comments than I thought, actually

It's great that you've opened this up. My general feeling is that We want to keep the game looking like Angband, but that understanding of screen colours generally has progressed faster than the Angband take on it...

[tilkau]

Cur and Max Exp get very large, so that needs to be taken into account in any design change; I'm inclined to think you do still want them both

Oh? Can you be more specific?
IIRC you want to know a) if you're down a level (or more) and b) how much exp you need to restore exp to normal (unsapped)
That seems to me to be expressible as two numbers:

* one next to Level, like 'Level 15(-1)' to express that you should be on level 16 but you got drained down to 15

* one expressing the amount of exp you're 'missing' ('-10240')

But maybe I've forgotten exactly how these numbers work, I'll read up in the Manual.

I agree on the other points you make and will look into them.

I like the alternating colours in rows, but I'd make it defined by complete row - so top row all base text is lighter, second row all base text is darker, etc

I was actually going off a 'checkerboard' scheme (alternating both across rows and across columns, so that things don't spuriously 'visually group'), after starting with the idea you express here ('just alternate vertically').
But obviously the implementation of that is incomplete. I'll make both versions so they can be easily compared.

My general feeling is that We want to keep the game looking like Angband, but that understanding of screen colours generally has progressed faster than the Angband take on it...

Well, that's a question of defining what -is- the Angband aesthetic. There's certainly no problem with vivid colors, and X-on-black typically works fine, it's just when the saturation or contrast is cranked --too-- high, that I would say that's a definite problem.

My artistic experience suggests to me that the balance of -hues-, shapes, broad value (brightness) balancing, and the background color used in the majority of the game, are what defines the aesthetic of Angband.

One additional idea to consider, along those lines, is the possibility of explicitly flagging areas that are not playing field via changing the background color (in general; extending beyond just the Status screen). I've done that in this quick rework:



And I think it helps the stats display to not steal visual priority from events in the playing field.

(the original screenshot was taken before enabling hybrid_walls option, but the sidebar BG here is the SHADE color you mention)

BTW, here, dropping the saturation on the color used on '5'/ 't' might be the way to go too -- this color seems to show up both glary and with poor contrast. Dropping saturation will make it brighter, higher contrast, and less glary.

[Nick]

Oh? Can you be more specific?
IIRC you want to know a) if you're down a level (or more) and b) how much exp you need to restore exp to normal (unsapped)
That seems to me to be expressible as two numbers:

* one next to Level, like 'Level 15(-1)' to express that you should be on level 16 but you got drained down to 15

* one expressing the amount of exp you're 'missing' ('-10240')

I think the player should be able to see somewhere how much total experience they've gained, and currently the status screen is the only place they can.

Perhaps having a single line like

XP     [COLOR="Yellow"]40000[/COLOR]/[COLOR="SeaGreen"]44000[/COLOR]

(ignoring the fact these are forum colours not Angband colours) would do it.

Well, that's a question of defining what -is- the Angband aesthetic.

Indeed - and I think there's no real formula to it, it's more a kind of collective gut feeling among the community. It's been very useful to me to see the options you've put forward, so I can look at them and say "yes, yes, no, maybe".

On which topic, my first reaction to this:

was "that's much better".

BTW, here, dropping the saturation on the color used on '5'/ 't' might be the way to go too -- this color seems to show up both glary and with poor contrast. Dropping saturation will make it brighter, higher contrast, and less glary.

Absolutely. I'd like to see your improved version.

[tilkau]

Good that we are on the same page re: how to maintain aesthetics. This is a pretty typical design process: make loads of mockups, zero in on the feel you want by iterative discarding.

This just shows the change to 'b' color:


Here's a comparison after tweaking, of blue colors (btZBT, left to right, top to bottom),



While making that, I noticed this existing potential problem:



These colors (zWV) seem very similar. z versus W and V versus z being the worst match ups. Upping z's saturation, to #94c3dc, seems to help, without stepping on Z or B's toes too much:



Another triple that's in the danger zone is oIU -- o vs I is quite a small visual difference. U is not a problem but must be considered when adjusting o and or I, in order to not create an o vs U or I vs U problem.

p vs v is not too bad but could probably be improved.

Here's the original colorset, with no tweaks (top)...



...and the colorset with all tweaks so far applied (bottom).

(P has also been changed here, which hasn't come up in mockups so far. Just dropped the saturation a bit to make it less burny. I also decided R probably shouldn't change -- at least, without making sure it doesn't step on I's toes.)

[Nick]

This looks great.

My feeling is that the o vs I difference is OK - typically it's the ability to read colours from the background rather than compare them to each other that matters.

[getter77]

Another option could be to muck about with the recently bolstered REXPaint and explore the horizons of what might be:

http://www.gridsagegames.com/rexpaint/

[takkaria]

Changing background may well work - note there's a dark colour (COLOUR_SHADE) used for the background in the hybrid wall setting that may be good here.

Maybe if it increases the range of available display options, it's worth adding arbitrary background colours too. I think the only port that might have a problem with it is curses.

[tilkau]

Oh cool, people who aren't Nick are replying

Another option could be to muck about with the recently bolstered REXPaint and explore the horizons of what might be:

http://www.gridsagegames.com/rexpaint/

That will be good later for sure, when we finish working out ideas and start pushing around individual characters. The current stuff is a lot more coarse, so I don't think anything of value is lost by doing it with typical image editing tools (GIMP).

Maybe if it increases the range of available display options, it's worth adding arbitrary background colours too. I think the only port that might have a problem with it is curses.

Speaking as a designer, I'd rather decrease the number of display options (so that each of the ones that are present can have more attention dedicated to them). But I realize that's not going to happen.

Arbitrary (as opposed to just one of the standard 27) background colors? It could be good for effects. For the majority of the UI, I'd personally prefer to stick to a fixed palette, so that the result is reasonably unified.

@Nick:
Thanks for verifying that; I wasn't completely sure that there weren't varying BGcolors for terrain, for example.
I admit I'm just doing my general palette-optimizing thing there -- 'maximizing difference between palette colors improves "read" and visual variety', which may not be appropriate in all cases. I don't really recall if there are monsters colored o that you don't want to mistake for those colored I or vice versa.

[Kyzrati]

That will be good later for sure, when we finish working out ideas and start pushing around individual characters. The current stuff is a lot more coarse, so I don't think anything of value is lost by doing it with typical image editing tools (GIMP).

Actually, you can set up your palette and do image-wide color swaps with REXPaint, so it's pretty useful for figuring out colors as well. I know because I use it for this and about 7-8 other aspects of roguelike design :P

I use Photoshop a lot myself, but when it comes to doing roguelike mockups REXPaint is way faster.

Love this thread, by the way (was following the conversation over on /r/roguelikes first).

[tilkau]

Actually, you can set up your palette and do image-wide color swaps with REXPaint, so it's pretty useful for figuring out colors as well.

Eh, if that gets to be the main thing I'm doing (swap 2 colors in the image), I'd probably use GrafX2 for that.
EDIT: actually, that's a good idea... thanks, it might seem unrelated but you prompted me to realize that I can interactively tweak the font directly (ie both the isolated font characters, and it as it's used in-game) with GrafX2's tile autocompletion. That will definitely eliminate a lot of back and forth testing, once I have a script that will transfer characters .BDF <-> image format.

I use Photoshop a lot myself, but when it comes to doing roguelike mockups REXPaint is way faster.

Maybe I should rephrase.. once I start poking individual small bits of text, I'll be looking at REXPaint. Till then I don't want to mess with WINE or QWERTY keyboard layout, I'd rather run native apps.

Love this thread, by the way (was following the conversation over on /r/roguelikes first).

Yeah, it's going well so far IMO.

[Kyzrati]

Hehe, I'm all over the place . While I don't have enough time to really get into playing all roguelikes, I do spend plenty of time researching them.

And I get what you're saying, just didn't know if you knew some of the applicable features. Too bad the only native build is windows only, oh well. Back to your regularly scheduled thread, keep the pretty pictures coming

[takkaria]

Speaking as a designer, I'd rather decrease the number of display options (so that each of the ones that are present can have more attention dedicated to them). But I realize that's not going to happen.

Arbitrary (as opposed to just one of the standard 27) background colors? It could be good for effects. For the majority of the UI, I'd personally prefer to stick to a fixed palette, so that the result is reasonably unified.

Ah, I fear I've been misunderstood. I just meant that in the display code, individual grids should be able to have any colour as a background that can be used as a foreground (instead of the current possibilities of 'same', 'black' and 'shade'). It was a technical point about the code, not anything about user-facing display options, which I agree, should be as close to zero in number as possible.

[Nick]

options, which I agree, should be as close to zero in number as possible.

Leopard doesn't change its spots