RKS Developer Diary #2 - Options, Options, Options

Hello again!  It's time for episode two of the RKS Developer Diary!

This time, we'll be having a look at the game's Options Menu (click on each thumbnail to show the full-sized graphic).  This is where we start to see the differences between an amateur effort and a professional endeavor.  As many of you may recall, Isemiya and WOMI gave us their blessing to translate Rosenkreuzstilette into English back in 2009.  But that was the extent of their involvement; we translated the text, cleaned up and edited the graphics, and hacked the text in the game executable on our own.  In some cases, cleaning the original graphics without the original source files proved to be impossible, so we had to rebuild many of the images from scratch.  The Options Menu is definitely the area that demanded the most reconstructive work, as you can see in the screenshots below and to the right.

Some of you might be wondering why we would even need to revise the Options Menu in the first place.  After all, the Options Menu in the original Japanese version of the game was in English, right?  This is where a background in Computer Science and experience in technical writing is critical.

I'm sure every single one of you know what a keyboard is in a computing context.  You know what a mouse is.  You know what a window is.  What a recycling bin is.  A control panel.  An address.  A shortcut.  A cookie.  These are all terms that, although they have given meanings in English, have very specific meanings in the domain of computers.  To English-speaking computer gamers, these terms are standardized; we expect consistency across all of the games we play and instantly know what each expression means when we see them.  If a game for some reason refers to a screen as a panel, we'd all be thrown for a moment since this isn't the standard name for a computer display.

In RKS, the Japanese version of the Options Menu was not made with English computing standards in mind, yielding settings with confusing and sometimes indecipherable labels.  The best example of this would be "Back Ground", which controls how the game behaves when you switch your focus to a window other than the RKS game window (for instance, when you open a web browser while the game is running).  Depending on your selection, the game can automatically pause the action, or it can keep running in the background uninterrupted.  The term "Back Ground" is inadequate in describing what the setting actually does, and the fact that the word is misspelled doesn't help matters, either.  Add to this the fact that, when hacking the executable, the English text (the options themselves and the scrolling descriptions) must be shorter than or equal to the size of the original Japanese, we see that the labels for each setting need to be self-explanatory.  So, after much thought, "Back Ground", "Run", and "Stop" became "Background Behavior", "Run", and "Pause" ("Play" and "Pause" in the official version since size limitations were no longer an issue).

On the subject of size limitations:  because we only had so much room in which to fit the English descriptions of each of the volume settings and their shortcut keys, we had to leave out the fact that you could press the Confirm button to play a sample sound effect or voice clip in our original fan translation.  We're glad to restore this detail in the official release.

Given the constraints we had to work with, I'm proud of how the Options Menu in our fan translation turned out.  Of course, I'm not the type to pass up on an opportunity to improve on our work, so when RKS was officially licensed, I knew I just had to rebuild the Options Menu a second time using the original source files as a base.  I applied this philosophy to every graphic in the game.  Was it worth it?  You can see the results for yourself.

One of the advantages of having layered image files and the original source code is that you can fine-tune practically anything.  That is an advantage we simply had to make use of.  Have a look at Grolla's version of the control configuration screen to the left (officially rendered as "Controls").  Admittedly, rebuilding this particular graphic was extremely easy: tint the background, add a translucent window, typeset the text, done.  I added a subtle "frame" effect to the outside of the window and carried over the shadows behind each individual item, but there's otherwise nothing remarkable about this graphic aside from maybe the coloring being just a little off from the original.  Taking a cue from Spiritia's version, I decided to work in as many design elements as I could into Grolla's rendition for the official release.  The silhouette, the decorative trim on the left and right sides of the window, repositioning the graphical elements to make better use of the space and give the image some much-needed graphical balance -- things that would have been impossible without access to the source files.  As you can imagine, I'm very pleased with the results.

I feel I should mention something that many translators and even programmers tend to overlook when designing the visual look of their work:  the concept of alignment.  For every graphical element on the screen, imagine a line running vertically through the middle of that object, another line along its left edge, and a third along its right edge.  Check if these lines run through the same points on the elements above or below the one you're focusing on.  Do they line up?  Is the element itself aligned to the left edge?  The right edge? The center?  None of the above?  Where the alignment is inconsistent, does it complement another visual element?  If not, should you change it to be consistent with the rest of the design?

Take a closer look at the Japanese version of the Options Menu.  Notice that there's no real design philosophy to to the "Draw Frequency" ("Refresh Rate") option selections on the right.  Barring this one aberration (and a superb design choice to align the right side of the Volume labels with the left side volume bars, effectively combining them into a single well-defined line), all of the text is left-aligned.  So, how do you correct the outlier?  Line it up with the options above it.  And, since there's a lot of empty space on the left, nudge everything just a little to the left to fill up that space and give the settings on the right a bit more room between them.

Now have a look at the Japanese version of the Controls Menu and notice how much more chaotic it is compared to the Options Menu.  Sure, everything is still left-aligned, but the button labels are aligned to four different left margins.  This is the kind of design you use when you subtly want something to feel off.  Since this is likely not what WOMI intended, the localized versions instead center the text along a single line (and the official version expands on this by auto-centering the button mappings using some brand-new code).  The results speak for themselves.

Wow, ten paragraphs on just the Options Menu!  Did this entry help you learn a thing or two about standardized terminology or design?  Or was all you got out of it that we're perfectionistic control freaks?  Well, whatever you learned, we have plenty more aspects of the game we can go over before it's ready for launch.  Feel free to suggest a topic for a future Developer Diary in the comments.  And, of course, please spread the word and look forward to the official English release of Rosenkreuzstilette!