User Interface In-Depth

World of Warcraft Custom UI

Modifications used: Discord Mods

Positioning: Discord, and WoW for that matter, places textures, bars, frames, and basically everything using a coordinate system. This system relies on three pieces of information:

To clarify with an example in case that's only clear to me, a texture in the UI would need its local anchor point defined, say the top left corner of the texture. That corner is then anchored to a point on the entire screen, such as the exact center. Then using X, Y coordinates, the texture is moved by its anchor point, in relation to the full screen's anchor point (descriptive image here).

Discord Action bars

In WoW, bars are up to 12 buttons, in 1 row. Discord can change this into multiple rows, and 1-12 buttons. It uses the same placement guidelines as above, and it can create "floaters," single detached buttons. The powerful part of DAB is its ability to use conditionals, which are something like if/then statements in programming.

For example, the healing potion in-game is an often-used item one keeps in their inventory, restoring hit points instantly on use. However, if one has a full hp bar, or most of their bar intact, the potion's button on a bar just clutters up the screen. For my purposes, I wanted the button with my healing potions to remain hidden until I had only 30% or less of my health remaining, then pop up in the middle of the screen for easy access. Discord let me do this by creating a floater (again, just a single button), moving it into place, and setting a conditional like so:

I created similar floater buttons for mana potions, a mana-regaining spell, and bandages. Another conditional was applied to my main bars, 2 bars with 12 buttons each, displayed in a 3x4 grid in the screenshot:

So any time I entered combat with a monster, my bars would automatically pop up, and when I was out of combat they would hide themselves so that I could enjoy a more clutter-free interface (and enjoy the textures I'd created!).

Those aren't incredibly difficult, but to show the workings of a more powerful conditional set, there are two spells in the game called "Ice Block" and "Cold Snap". Ice Block was a defensive spell, and when used went on a 5-minute "cooldown', where it wouldn't be usable again for another 5 minutes. However, a player could use Cold Snap, which instantly resets the cooldown timers on all Frost skills (of which Ice Block is one), and Ice Block would be usable again. I wanted to create a button that would swap between the two appropriately, based upon certain conditions. For this I actually had to use three buttons for two spells, and set the button to re-map its key through the conditionals:

With this setup, the button would normally be set to Ice Block. When pressed once, it would stay on Ice Block as long as the spell effect was active (maximum of 10 seconds), then switch to Cold Snap. Pressed again would use Cold Snap and reset Ice Block, making it usable again, so it would swap back. If pressed once more, it would use Ice Block a second time. For this list of conditionals, their order was important, as they worked in a heirarchy, where one conditional took precedence over another. A pleasant side-effect to this setup was that when both spells were on their cooldown, the button would map to Ice Block, showing me how much time I had before I could use it again.

Discord Art

Discord Art uses the same coordinates system for placement. It also has the same ability to use conditionals like those listed above, so it can show or hide textures when certain conditions are met, change their transparency, and/or resize them. An example of this in my UI would be that I originally had the grooved "plates" on the bottom area automatically appear when out of combat, so they would cover my bars. However, to cut down on using two extra textures, I simply saved the cover plates into the main background textures, and set my bars to hide themselves to achieve the same effect more efficiently.

DART, as it's called, uses TGAs with an alpha channel for transparency, with the typical "powers of two" measurements.

DAB and DART were the two main mods used to craft the UI. DUF (Unit Frames) was also used, but wasn't completed before Burning Crusade released, so I was unable to finish it. DFM (Frame Modifier) changed the placement of some frames, such as moving the minimap frame from the top right default placement, down to the bottom center.

 

Gates of Eternity: battle UI

Gates of Eternity is an in-development sci-fi RPG using the Torque engine. I was tasked with creating the UI for the game, the first of which was the Battle interface. Much of the rest of the UI elements were based off the Battle UI, and it is the most complex.

The task was to create a UI that was moderately slim, with a sci-fi futuristic feel that was distinct, yet not over-the-top. I opted for a UI that was no higher than 256 pixels at a 1024x768 resolution. In terms of functionality, it was to support 4 player characters, and the general design layout was supposed to be influenced by the Final Fantasy series. My responsibilities for this project were the creation of the layout and all image assets, after which a programmer would work the textures into the game, with my assistance with any further creation or tweaking.

I drew heavily on Final Fantasy VII's design, due to many hours spent playing the game. I wanted to incorporate some kind of tangible objects into the UI's design, rather than just have panes of glass or laser-like colored panels. To make it interesting, I rigged the main menu's mechanical arm to animate, as well as the appearance of the panels. When asked what I had in mind for that animation, I created a quick mockup using Flash to give a rough illustration of what I had pictured:

Again, the combat menu was the most extensive and complex of the UIs I did, but I was also responsible for creating the exploration UI for non-combat commands, a fullscreen mission/plotline log, and the title menu. The project leader and I decided that the light-bracketed panels would look best in these situations, since these parts of the UI weren't persistent on-screen elements. For the title menu, I was also asked to create the background art, here (the art without the UI elements is in my gallery).

Icons

Below you'll find a handful of icons I created to show my ability to work on a small scale and handle a variety of objects. The images are shown sized at 128x128 px for detail, and 32x32 px for a more appropriate button size.

  • Icon - Targeting Goggles
  • Icon - Sack of Gold Coins
  • Icon - Data Disk
  • Icon - Plant or Earth Spell
  • Icon - Potion

I think that wraps up the detailed explanations of my UIs, their construction, and designs! If there's anything else I can do to clarify or explain further, or if you have any questions, please ask, I would be glad to answer further!

header image

Star