GUI Style Ch-Ch-Changes

Hey Moon people! We got some cool new GUI stuff to show off. As we’ve said in previous blog posts, we’re currently going through a bit of a rebuilding phase. This includes not just technical aspects of the game like hit detection, but also artistic changes. In this blog post we’ll be going over the redesign process for our menus, lists, and dialog boxes. GUI is one of those subtle aspects of game design that can have a huge impact on the quality of a game without you immediately noticing. We’ve realized that Moon Intern is much more menu-driven than we had initially thought, especially with the changes we’ve made to the the overworld. A lot of progress has been made with the design of the GUI, but there’s still some work to be done. So let’s get to it!

We wanted each aspect of the GUI to look and feel consistent across the board so we had to think which features the menus, lists, and dialog boxes should all have in common. Things like the window itself, titles, subtitles, scrollbars, various types of content, padding, borders, drop shadows and such. Larry then put together a mock up of a basic menu/list that had all of the elements that we felt it would need. From there Gewargis critiqued it from a design standpoint while Peter did the same from a technical point of view. After a few hours of that, we came up with the second mock up. The Organizer (the set of boxes at the top of a GUI window) fit better into a single row, and now has a maximum number of elements. The window title also wasn’t very noticeable, so the letters were spaced out a bit and given an underline. We realized a smaller pointer as a cursor would be much more reusable than a box. We also wanted a standout color for text content and elements that would signify anything deemed extra important. Red was too negative, so we went with green next. The scroll bar looked a little awkward partially hanging out of the window, so we brought it inside the outline of the window. After the next round of critiquing, we found a darker color for normal text and a lighter purple for the important worked better than green (which itself is better on controllable/interactable elements). The bolded title, with some deco works best of the 3 iterations. The window parts are also modular and can have any element like it’s title, subtitle, scrollbar, etc turned off to create many unique windows following the same scheme.

First Pass is on the left, final is on the right.

First Pass is on the left, final is on the right.

The GUI style is used repeatedly on different types of game actions. Not only will this style be applied to the map and inventory, but also the dialog boxes, main menu screen, puzzles, relationship actions, and any type of game mechanic requiring user input (other than controlling the character in the world). We found our old interfaces, while all unique, required the player to relearn how to use them quite often. A consistent theme gets around this burden on the player. We have many different puzzles appearing for players who will prefer to play on the tech squad story path. We suppose it makes much more sense to have the player already have an idea how to interact with them when encountering them for the first time.

The new GUI style works really great applied to our dialog boxes.

The new GUI style works really great applied to our dialog boxes.

The decision to redesign the look and feel of our GUI elements was not made lightly. We put quite a bit of work into the design of the the player menu, but we realized that there are so many other menus and lists that the player would be seeing just as often as the inventory screen. That fact is even more apparent now that there is a menu list associated with each stage on the map. Up till this point, we’ve been designing each GUI element separately, but now, we all agree that it’s better to have a consistent style for each type of GUI window. Technically speaking, this will speed up the development process since each type of GUI window will derive from the same basic template. If and when we need to fix or make a change to something, we won’t have to fix the issue multiple times (OOP 4 Lyfe!). From a design standpoint, having a more consistent look to each type of GUI element will be more aesthetically pleasing while at the same time allowing the player to immediately recognize and interact with things like buttons. We’re super excited at the prospect of these changes to the GUI, but we’re not done yet.

The GUI windows are modular, allowing multiple looks while following the same style.

The GUI windows are modular, allowing multiple looks while following the same style.

There are still a few things that we haven’t quite banged out like the font, which feels a little crowded in giant blocks. We’re pumped about the new GUI style and are hoping to have a testable version in the near future.

One font we tried resembled a comic book.

One font we tried resembled a comic book.