Sunday, March 27, 2011

The "Equip" Menu, pt. 1

As promised on our Twitter feed, some of the first real in-game menus are going to be shown in this article. I was hoping to finish more in the past couple days so that I could create a video out of it, but there wasn't really enough content to justify such a thing.  So instead, below the cut you'll get to see a whole bunch of early menu concept art, in addition to screenshots of the real thing.



Most of the time implementing this system in the past few days have been a matter of making sure that all the important parts of the user interface are exposed to the user in such a way that it allows them to quickly see their status, and more importantly, quickly choose the thing they need to do within the menu system without having to navigate a bunch of menus (or navigate an inconsistent interface).  The Equip screen in particular was my primary focus, as it's probably the screen that the player will spend the most time in of all the menu screens, by far.

To that effect, I've deliberately chosen a system which should be familiar to players of games in this genre, both visually and with regards to the control of the system.  The normal drop-down system is a simple menu list, but the equipment screen took a lot of thought which I only felt comfortable settling on a design with today.

Two concepts of how to implement weapon selection in the Equip menu.
Click to enlarge.

The above is a screenshot which has been altered somewhat by overlaying some placeholder icons in order to demonstrate the latest concepts I've been considering for the equip screen.  The concept on the left is probably the one I'll likely stick with, since its visual metaphor is a slight bit more consistent with today's "tabbed content" designs than the concept on the right.  However, for a long time, the concept on the right was the working idea for how I was originally going to implement weapon selection.

To fully understand how I got to the point of the concept on the right, I'd like to show you our very first equip screen concepts and what inspired them.

The first Equip screen


The above artwork is a relatively primitive overlay which was originally intended as a placeholder for the final menu system.  It was our very first concept art for this system.  As you can see, most of the cells are aligned to a grid, with rows in different categories given a bit of a vertical offset to visually distinguish them from each other, and to accommodate the row's labels.

The "special feature" of this screen was that the top row was originally supposed to slide out to present the user additional choices when they selected their category of weapon -- whereas in many games in this genre, you could only access either one category of weapon, or one weapon of multiple categories, it was decided early on that we wanted players to feel a sense of freedom to choose their own style of play.  We would then craft the game's weapon selection around the assumption that a player will prefer one category of weapon to give a slightly different experience for each player without forcing players to master every type of weapon, but rewarding the ones who did.

A similar concept to weapon freedom was used in Secret of Mana, but its ring menu system was highly polarizing to players in terms of its ease of use due to its unorthodox presentation -- this may have had an effect on the developers' decision in that game to limit players to only being able to have one weapon of each category at any given moment.  Our implementation was intended to sidestep the issues of having too much choice by only exposing primary functionality in the first button press.  The main issues of our implementation started to manifest themselves, however, when taking into consideration the vast number of categories (and styles) of equips we could potentially present to players compared to our retro forbearers.

Crystalis (NES) equip and item screens
Top-left:  Ys3 (SFC),   Bottom-left:  Lagoon (SFC),   Right:  Ys (PC-8801).

 The above screenshots were the primary sources of inspiration for our basic UX. The oldest styles of these screens are exemplified by Ys and similar games in the genre, whereas Crystalis arguably presents a more modern interpretation of the system, with a unique (and somewhat inconsistent) presentation, but a much more reasonable push-button cursor compared to the others' simple row-and-column selection.  Please take notice that all of these screens have reserved some space to show some status for the player, although only Lagoon presents actual ATK/DEF buffs in an immediate fashion to the player (Crystalis requires you to access a rather unintuitive status screen to view this information, which I can tell you from experience is almost never done except to access the save menu).



Our second attempt at an Equip screen



Our first attempt to reconcile the display of the vast amount of additional equipment in our game (shown here with an early one of Brian's alterations on the original concept)  was to let the organization of items do the talking.  This, however, would clearly lead to an inefficient use of space, and was only really viable in a full-screen menu.  This early on, it was uncertain whether or not the equip menu would take up the entire screen.  I'm assuming Brian envisioned it as doing so, and utilized the maximum amount of white space available in a 1920x1200 resolution.  At this point I still thought the concept would end up panning out pretty good, but once we started needing to take a status screen into account, the interface design got increasingly complicated, and arguably convoluted.

Player status presentation alongside Equip screen

(Please excuse the placeholder graphics, no infringement is intended...)  This was Brian's second attempt at reconciling the extra data we wanted to display on the screen, and my personal favorite in terms of how the layout was presented to the user.  Since we intend on  having custom character creation in the game, the player's name and avatar was considered to be a tasteful addition to the screen, as the changes in repertoire would immediately affect the visual aesthetic of the player character in a way that would coincide nicely with how it would also effect his stats.

You can also see in this picture that Brian's typographic influence was starting to take effect in the presentation of the additional stats, which would later spread to other parts of the Equipment layout.  Unfortunately, that was kinda going in a different art direction from where I was hoping this project would go, so after a few more mockups, the screen started to look like this:


 While not necessarily a bad design per-se, distinguishing between items usable to our field-bound item key and accessories which could be equipped but may not have a specifically consistent key bound to them (or any key at all) was going to prove to be a serious headache when it came to reconciling how it could be presented to a user in a consistent way.  In other words, the consistency of the user experience in this menu was starting to become a "fluster-cuck".

How did some of our forebears handle the presentation of all this extra data?  Specifically, item descriptions, and multiple categories of icons.  I went back to study a couple more case examples.  One which is an example of a rather bad UI, and one which is an example of a much more tolerable one.

Zeilard (PC), a rather confusing menu system Soul Blazer (SNES), a more tolerable menu system


Functionality in Soul Blazer's menu system is exposed by first selecting the category for which you'll be changing the selection.  While this requires an extra button press by default in their system, this need not necessarily be the case.  What's important here is the hierarchy of the selection process itself.  When you select one of the 3 main categories, you have the traditional 2d push-button cursor focused on that category.  When the cursor is "in" one of these submenus, the main menu (the one on the bottom) becomes a good-sized description box.  This is a very efficient use of screen real estate, and is relatively straightforward compared to Zeilard's rather awful presentation.  Furthermore, accessing the large amount of potential items in the game is given its own screen, which isn't too different in how the cursor works compared to all the other submenus.

Now, I didn't actually apply this knowledge of how to properly utilize the hierarchical display of information immediately in my earlier menu implementations.  It was unclear at the point we were doing the earlier Equip screen mockups what sort of information we needed to display, and how much room we would have to display it.  This became apparent with the framerate limitations of my menu implementation (long story, but mostly related to the tool that FaeSaga's current engine is designed in).

A somewhat-cropped screenshot of the equip menu taking approx 640x480px of space
in a 1024x768 window.

This is an actual running screenshot of an early implementation of an Equip screen.  It became quickly apparent as I was coding this screen that while the consistency in the user interface should be a primary concern for the sake of the end-user,  the actual visual design and how the cursor maps to locations on screen was going to need to be somewhat more consistent than my earlier mockups in order for it to not be a messy coding task.



This brings us back to the very first picture in the article.  Presenting the data in the very first UI implementation was done on a straight up 8x4 table of cells, limiting the number of primary weapons to 8 (unless an extra window dropdown was generated upon selection, ie:  only weapon category exposed on the main screen).  Secondary row would work as expected, and Tertiary rows would likely have some serious inconsistencies with cursor selection.  This was still going to be a mess code-wise, and worse, I hadn't even taken into account a place to add a description box or stats yet.

A problem with having slide-outs/pop-up submenus for individual weapons in a category manifested itself with the push-button cursor selection.  Originally, the idea was that single-pressing on a category would select the last used weapon in the category, saving users from a potential extra window if they were weapon-switching to make a dungeon easier (for example).  However, if we were to base the stat buffs on the current equipped set, selecting the category for a weapon would make it very difficult to compare between equal "generations" of weapons when the player first encountered them.  That is to say, users wouldn't be able to easily view the stat advantages of "equal" weapons in different categories side by side.

This necessitated yet another way of thinking about how to "view" weapons without having to actively select them.  My original idea for this was to reduce the number of columns to 5 and rows to 6, reducing the number of readily accessible cells by 2, but allowing 25 slots for all weapons.  This was still going to pose a problem for weapons which could have more than 5 weapons, but it seemed much more manageable.  (See the concept on the right in the image below.)

Click to enlarge.


The tab interface (the concept on the left) is the newest development in this concept.  5 subscreens of 5x5 grids bring us back into consistency with interfaces like Ys and Lagoon, whose selection process is very straightforward, visually speaking, while preserving a level of accessibility that Crystalis and Soul Blazer offer without the visual and UX inconsistencies.  I haven't yet decided whether to give the categories icons with names on them (will require asset translation, a bit of a pain for i18n), or just pictograms of each category.  If I can come up with an effective way to cordon off the category tabs visually from the 5x5 grid while also providing effective image metaphors for the categories, I'll definitely use pictograms instead.  (The category description can be moved to the description box at the bottom).

Coming soon:  More complete screenshots of this implementation in action, possibly including video of the menu subsystem.  Stay tuned, and thanks for viewing!


Please Share


1 comment:

  1. well i think that is awesome to share all this info as you go along with your fans. please do not forget steam out there, tons of fans are waiting for you there too. Ive been searching the net for your main site but cannot find where supsoap truly lands. only where you sell the fa solitaire 2 pre release. but that is it. Yet where is your home? Come on sub soap...a place where fans can leave you pats on the back and see new things all in one place. I hope some day you will have one instead of droppings ll over the net like this._good luck:) -longtime fan, Monica

    ReplyDelete