search

suve / LD25

Colorful - Ludum Dare 25 (December 2012) entry
Other
22 stars 10 forks source link

Improve readability of menu colours #23

Closed suve closed 3 months ago

suve commented 3 months ago

Currently, the game renders almost all of its menu text in white. This includes both informative text and selectable items. For example, consider the "load game - select gameworld" screen: Screenshot from 2024-05-03 17-48-40 Both the "load game - select gameworld" and the world names are rendered in pure white.

When playing on desktop, each item is accompanied by its activation symbol (T - and C - in the screenshot above), so this isn't that much of an issue. However, on mobile, the symbols are not displayed, as the expectation is that the device does not have a physical keyboard and the player will use their touch screen to select items. The fact that both the informative text and touchable items look the same can make it a bit disorienting as to what can be touched and what cannot.

Possible solutions:

  1. Change the colour of the informative text. This could involve, instead of a single colour, a slow transition over the colour spectrum. (It would make the menu more colorful, I guess.)
  2. Change the colour of selectable items. Tint active items slightly green and inactive items slightly red. This could be combined with some "gleam" / "shine" effect that lightens up the items every now and then.
  3. Add a second font to the game and use different fonts for informative text and menu items. Since most menu texts are rendered at 2x scale, this alternative font could make use of this fact and be composed entirely of double-size glyphs.
suve commented 3 months ago

Tried option 1) first. The issue with that one is that the main menu doesn't have any informational text, just the logo, so it doesn't help much. "Oh, you can make the logo change colours as well", one would say. So I did that and the end result is like a unicorn barfed over the screen. Also, it makes the non-interactive elements more visually enticing than the actual clickable/touchable stuff - the opposite of what I want here.

Implemented option 2) in commits 5e410d59506a76ff90818d306df636f5c11ad430 and 8d1e0765159a511508fcb565d93a4973e37c3159. It could probably use some further tweaking, but so far, I'm quite satisfied with the result.