Index of Content | Comment Stream | This is an ads-free blog that is also free of donate-begging. Anonymous/Unknown users may post comments, so fire away!

Saturday, 27 February 2016

User Interface Evolution - Part I


Evolution of the D&D UI: Baldur's Gate to NWN2

Introduction

The user interface for D&D role-playing games has changed profoundly over time; becoming undeniably more powerful and flexible - but perhaps at the cost of efficiency and ease-of-use. Am I just too oldskool and "stuck in the past" in that I greatly prefer the Infinity Engine interface to the Electron one (for example), or is the former actually superior in its spartan simplicity? Why am I so conflicted between NWN's radial menu and the context-sensitive dropdowns of NWN2? Which is better, and why? These are a few of the reasons I have undertaken to analyze the virtues and flaws of their respective UIs.

Left: Baldur's Gate Right: Neverwinter Nights 2

The order I chose is loosely chronological as that allows for a smoother presentation. Coverage includes all expansions.

Contents

Part I (this post): The Infinity Engine UI - BioWare: Baldur's Gate & Baldur's Gate II.
Part II: The Infinity Engine UI - Black Isle: Planescape: Torment, Icewind Dale & Icewind Dale II.
Part III: The Odd Ones Out: Pool of Radiance: Ruins of Myth Drannor & The Temple of Elemental Evil.
Part IV (to be posted): The Aurora, Electron & Odyssey UIs: Neverwinter Nights & Neverwinter Nights 2, KotOR & KotOR II.

Note on the screenshots: Pics in the first two Parts of this series were taken at 640x480 resolution (800x600 for IWD2) and upscaled - maintaining 4:3 aspect ratio - to 1600x1200 to improve viewability on current gen displays. If your add-on/extension does not block the script, clicking a pic will enter Light Box mode, allowing you to mouse-wheel through the pics, at your leisure.

The Infinity Engine UI - BioWare
(1998-2002)

The title screens for the original and sequel (640x480)

The IE interface originated in the "Renaissance" RPG known as Baldur's Gate; undergoing a few changes in subsequent releases by both BioWare and Black Isle:

First, it received a striking reskin and had its main interface modified to accommodate the dialogue focus and originality of Planescape: Torment.
Second, it returned to the BG style but received a reskin for Icewind Dale.
Third, it received minor improvements, additions and another reskin for Baldur's Gate 2.
Fourth and finally, it underwent a major overhaul to accommodate the rules-heavy 3rd Edition, reaching its zenith of polish and functionality in Icewind Dale 2.

With the rare exception of PS:T's bungled portable pop-up, the IE UI is elegant, efficient, space-maximizing and a joy to use. In all incarnations it's a huge advancement over what predecessors offered, which - with a few notable exceptions - are just primitive kludge and clunk. The rest of this post is given over to treatment of the IE interface, as it appeared in Baldur's Gate and its sequel. Black Isle's three efforts will be covered in the next post.

Please note that for the purposes of these posts I am unconcerned with UI mods or Beamdog's  Enhanced Editions; my concern is just with the official interfaces as shipped with the original games. I also don't charge UIs for their lack of native scalability to other resolutions and aspect ratios: they are a sign of their times and it's totally forgivable. I really tire of the scrubs who complain how UIs don't scale and the fonts are unreadably small, when they're running a 1998 game with settings straight out of Silicon Valley. It seems everything is about "4k" to these people, or whatever the current gen "standard" is, nowadays. I simply run these classics using display driver scaling and can actually read the text without a magnifying glass. Funny, that..!

Ok, so. Let's move on to the first entry, shall we?

Baldur's Gate & Tales of the Sword Coast
(Dec 21, 1998-99)

Main Interface

The main Baldur's Gate interface consists of three "gray-stone" panels of buttons bordering the bottom and both sides of the field of play. The buttons on the left panel call up the seven modes, which quickly and neatly "snap in" to entirely cover the action (all modes pause the game, except Inventory mode). The clock at bottom-left doubles as a pause button, though it's only used by those who play one-handed or have not yet learned to use the space bar, the hot-key for pause (many modes and modal operations take advantage of hot-keys, too).

The buttons on the right panel are portraits of the party members, that when left-clicked select the unit and when right-clicked call up the oft-used Inventory mode, thereby saving one click. Symbols indicating any negative & positive statuses will also appear over the portraits, perhaps covering them entirely. The symbols are defined in Character Record mode so that, in time, players will learn to recognize them at a glance. Resting snugly under the portraits are the AI & "select all" toggles.

The bottom menu buttons activate various modes of play such as the basics of Speak and Attack/Stop, down to spell-casting and the modals of stealth and bard song; those modes sensitive in context to the selected unit. In addition, a few party formations are shown when more than one unit is selected, and right-clicking a formation displays the full array.

Just above the bottom menu rests the dialogue and combat feedback window, expandable to four times its height to make it EZ to review what's just happened. My issues with the dialogue window are twofold: one, it does not expand to cover the entire playfield (why not?); two, the font is not exactly the most readable, being a lil' blurry and competing with the pane's backdrop (fixed in the sequel).

Dialogue window: minimized & "maximized"

Interface Modes

Area Map mode shows the explored parts of the current area from a bird's-eye view and indicates the exact position of the characters. Double-clicking on the area will conveniently exit map mode and center the playfield on that position; at which point the ground may be clicked on to have the units move there, even from off-screen. The Area Map would have availed of map markers to highlight points of interest; plus, the doors to buildings are difficult to find without the ability to highlight them (the sequel added both map-markers and Tab-key highlighting).

The World Map is accessed from the top-right golden globe and presented as a piece of unfurled parchment that can be "scrolled" north to Baldur's Gate city and south to the border with Amn. Each area has its own distinctive, recognizable icon that can be clicked on to move there, complete with tool-tip indicating the travel time in hours (added in TotSC).

Area Map & scrollable World Map (640x480)
For direct comparison, here are the sequel's Area and World Map modes; the latter of which scrolls in all directions, not just up and down. Note the map markers.

(640x480)

Journal mode chapters are separated into pages with quest and main quest updates mixed in and headed merely by dates, instead of having meaningful titles. While serviceable as is, the sequel made the journal more readable by separating it from Quest and Done Quest pages. While necessary due to the sheer amount of quests in Athkatla, the original could have availed of it, too.

Character Record mode contains an enlarged, painted portrait of the selected character in the center, with stat blocks on either side. The right-hand scroll is informative in that it shows almost every relevant piece of info related to the selected unit (some BioWare inclusions of the AD&D ruleset were not documented, let alone viewable in-game.)

Character Record & Journal modes

This mode also allows for basic customization (appearance, sounds, scripts), Dual-classing, party reformation and exportation of the PC; further opening to the Information and Biography panels, pictured below.


The painted portraits are shown in three different sizes: large in chargen, medium in Character Record and small on the main interface. Everyone loves them because they are gorgeous.

An unforgettable cast. Who doesn't know their names at a glance?

Inventory mode is the highlight of the UI, displaying a cute paper doll in the center surrounded by slots into which items may be inserted and removed (armor, weapon, belt, gloves etc). The backpack fills out the bottom, a grid of sixteen same-sized slots. As a nice touch, items are auto-assigned to their slot when dropped directly onto the paper doll, saving the player the hassle of hunting down the correct slot.

There are also two quick-slot grids for weapons and items that are shown on the bottom panel even when back at the main interface and playing field. Items may be picked up or dropped to the ground from this mode, though that can be a nightmare. The player may quickly examine any ID'd item by right-clicking it, ghosting out the main interface and adding a second layer with an artist's sketch and flavorsome Realmslore description, both nice touches.
.
Inventory mode & Item sub-mode

The various sounds deserve mention as they give definiteness and weight to interactions, with each item type having its own unique sound: equipping a weapon, armor and shield to the paper doll is very satisfying!

Calling up the inventory does not pause the action as in other IE entries - and that means two things: first, the player can manage their inventory while the party walks from one end of town to the other; second, the player needs to think twice about mid-battle inventory management.

This is one of the best inventories in the RPG genre: it's efficient, space-maximizing and I love its tactility and spartan aesthetic.

The paperdolls are adored by fans.


Paperdoll comparison: If you think the one on the right looks better than the one on the left, then you have appalling aesthetic taste. For the sequel BioWare actually reduced the paperdoll's size and made it rough around the edges. The Helm of Balduran looks pathetic and the large shield is just awful...

(Same resolution, same char, same equipment): Left: BG1 Right: BG2

There is nothing wrong with the Mage Book & Priest Scroll modes except that I dislike the slight delay in assigning spells to empty slots. This was eventually fixed in Icewind Dale 2, the final IE title.

Mage Book & Spell Info

Vendor mode is simple and self-explanatory, though a double row of items in the Buy & Sell switch would have been nice, as scrolling down through a long list is a pain in the ass; but there simply wasn't enough room. The sequel added "double-click to bulk-buy": handy for snatching up arrow quivers.

Splurging out at Sorcerous Sundries & Donating to the temple

Playing Field

The UI allows for marquee selection, Guard Me mode and the rotation of party formations, the last of which can be awkward due to the isometric perspective. Marquee selection is pretty much perfect and superior to the NWN2 version because there is no delay or doubt in who is being grouped [1]. Items in the game-world (e.g, signs, statues) may also be clicked on to gain extra info.

[1] For those who don't know, marquee selection is when you drag a rubber band (see green box, below) on the field of play to group-select units, all of whom then carry out the order given (e.g, move, attack). It's common in tactical games of all kinds, not just RPGs.

Marquee select & Guard Me mode
 
As noted above and in Part I of my in-depth retrospective (ongoing), minor improvements and additions were made to the UI in the sequel, but the lack of complete redesign suggests that BioWare got it right, first time. This is quite a feat considering the campaign and engine were developed hand-in-hand...

Baldur's Gate II: Shadows of Amn & Throne of Bhaal 
(Sept. 24, 2000- 2001)

So what are these improvements and additions to the UI? Well, this won't take long..

First up, BioWare added official support for 800x600 resolution and enabled the unlocking of even higher (unsupported) resolutions in Config.exe (baldur.ini). The result was a larger playing field, though fog-of-war is still locked at 640x480. The spartan-stone UI of the original was changed to a "Suldanessellar" theme, the modes wreathed in vines at the higher resolutions to "fill in" that extra space.

Right: Rest button relocated to main interface

The ability to hide panels and even the entire UI was added (aka "drop-away" interface), presumably to expand the field of play, supply XTRA IMURSHUN, and to accommodate BioWare's newfound love for scripted cutscenes. The dialogue window used a clearer font over a more contrastive backdrop pane to make it more readable; adding also the ability to click the dialogue itself and quickly skip through it (BG2 has masses of dialogue fluff).

UI hidden & improved Journal mode

I have already cited the following: relocation of the Rest button, Inventory pausing the action, bulk buy, the improved Journal, map markers and Tab-key highlighting. Mouse-wheel scrolling was implemented. Sub-inventories were added for the new Gem Bags, Scroll Cases and Bags of Holding - and the packrats rejoiced.

The Throne of Bhaal expansion added the ability to erase spells from the Mage Book, from which mode the new Contingency & Sequencer screens are accessed.

Right: Loading up the Spell Sequencer.
ToB also tweaked the Area Map to not pause the game, letting you marvel at lil' circles running across the map: big deal! Still, I think the improvements and additions made by the sequel would have been welcome in the original.

There was one problem posed by SoA & ToB as it pertains to the UI: how does one gain EZ access to the huge amount of spells and special abilities (e.g, HLAs) available to them? Were there ever enough Quick Spell slots to assign your oft-used spells to the bottom panel? - and special abilities were never assignable (or mappable to hot-keys, for that matter) [2]. So, searching for the correct spell or ability became an exercise in tedium, and though it was alleviated somewhat by Icewind Dale 2 (tripled the assignable slots and allowed for abilities to be assigned), it was not until the introduction of NWN Quickbars and the Quickcast menu of NWN2, that the problem was finally laid to rest (as the reader will see in Part IV).

All in all, the IE interface of the Baldur's Gate Series is rock solid and was not improved upon until the advent of Icewind Dale 2, the most polished of the IE RPGs.

[2] Not outside of editing keymap.ini, that is (as detailed in Power Users.txt).
Infinity Engine (cont.): Planescape: Torment, Icewind Dale & Icewind Dale II

Icewind Dale & Icewind Dale 2 title screens

EoP

4 comments:

  1. Interesting topic. I have long thought that it was noteworthy how the UI/Controls for IE games were for the most part so intuitive and simple to use, while those for so many RPGs since have not been, at least not to the same degree. I also liked the way that in those games they would do things like have one's journal and such appear on scrolls, against background art depicting a table with candles, etc. That sort of thing helped add to the atmosphere appropriate to a fantasy setting, while in many more recent RPGs stuff like Journal entries, character stats, etc. are presented in an immersion-breakingly modern format.

    One thing to keep in mind, though I do not know if it explains all the differences, is that IE games were designed to be primarily single-player PC games (though it was of course possible to play them mulitplayer), while many later RPGs were designed primarily as multiplayer and/or console games. This certainly makes a difference to how the UI/Controls are set up. E.g. in a single-player RPG campaign one of the main weaknesses of the IE's UI, lack of Quick spell slots, was no big deal, as one could just pause the game while searching for a desired spell, but in a MP game with no ability to pause that would be a serious problem.

    ReplyDelete
    Replies
    1. Good points, and I agree with them. I have often struggled with post-IE interfaces and I think UI potential has gone down the gurgler because many of these "RPGs" are made with console limitations in mind (controller as input device instead of Kb/m). As an example, I dislike the replacement of grid-based inventories with list-based ones - mainly because they lack efficiency, tactility and charm. None of the RPGs in my range of treatment use list-based inventories, though.. it seems that's more your post-NWN2 RPGs (Dragon Age, Oblivion/Skyrim etc.)

      Delete
    2. The visual look of the UIs nowadays is much poorer when it comes to the immersive RPG "feeling". It's also a very overlooked aspect of development in modern RPGs, IMO. It's not entirely just a console limitation to me, since something like Morrowind is playable on a console and has a decent old-school looking UI (the journal resembles a book, there is a paper-doll inventory that is not a simple list like Skyrim, etc..) It seems to me that it's rather a desire to be incredibly efficient and simpler to use. Bethesda has mentioned how they want to be the Apple of RPGs, for example.

      The end result is the UI looks like a sterile Excel spreadsheet or something, rather than an immersive RPG-looking style, like a book, or withered journal. It's certainly in style right now to have UIs in this style, and that's unfortunate.

      I do think the Perk Chart in Skyrim is pretty cool, but the other menus are just too sterile to me. Nice blog once again, Lilura. :)

      Delete
    3. Hi, Fluent! And thanks for commenting.

      The Morrowind UI was indeed great. I liked the versatility in window pane management, and how you could continue to play the game even when those panes were called up. This is also a feature of NWN and NWN2, of course.

      I don't find Oblivion and Skyrim UIs as efficient, as aesthetically pleasing, as intuitive or as EZ to use, even when extensively modded.

      Delete

Return to Index of lilura1 content

Thank you for commenting!

Full comment stream is viewable here

1. Anonymous/Unknown users may posts comments, but you are encouraged to sign with some sort of identifier so that I can get to know you.
2. Blog is moderated due to influx of spammers, trolls and other unsavories. I have acute troll detection senses so don't even bother. Posts with personal, political and religious overtones are ignored; as are posts with "isms".
3. As with any comment submission field, Blogger comment submission field may eat your comment so I recommend using a text editor and then copy-pasting the contents into the field. Note that the field won't recognize breaks if you do that; you will have to add your breaks into the field itself (enter/return key). Basic stuff, but it needed to be said.

Have a lovely day!