A few samples of my work on Darkfall Online

The development of a game like Darkfall Online in a country like Greece was a rather unlikely thing to happen, so I consider myself very lucky that it happened and that I was part of it.  Here is the wikipedia page for the game: https://en.wikipedia.org/wiki/Darkfall

The funding came from a Greek-Libyan family which has made enough money out of oil-related construction to be able to afford the luxury of investing on something fun, rather than on something with a high ROI, or even a guaranteed ROI. Thus Razorwax, a promising team of Norwegians some of whom were already published in the gaming industry, was brought to Greece to build Darkfall.  I was the first Greek programmer hired, and I worked primarily on the GUI of the game. I stayed with the company for about a year after the game was released.

Me at Aventurine, in 2004. Click to enlarge.

What follows is a rough diagram of the design of the GUI that I built for Darkfall: The graphics engine (written by a colleague in C++) provided me with just two asynchronous primitives, one for drawing textures, and one for drawing text. The layer we called middleware (written by another colleague, also in C++) provided me with the functionality of the "GetTextExtents" Win32 GDI function, and with an interface to the browser window (encapsulated instances of Microsoft Internet Explorer.) 

A rough diagram of the design of the Darkfall GUI.

I abstracted these very few and very basic primitives inside a simple Engine Interface Layer, on top of which I built the GUI Framework Layer, which is basically a full-blown general-purpose graphical user interface written in Java, with fixed and resizable windows maintained in a z-order, adorned with borders and captions, supporting both modal and modeless dialogs having controls inside them, offering drag-and-drop functionality, etc.

I also had to build all the controls that I needed from scratch: push/check/radio buttons, a text edit control, a drop-down list control, a tabbed panel control, a viewport control (adds scrollbars to any other control,) a slider, a progress bar, and even a fully functional tree control, complete with expand/collapse buttons, all of them highly customizable so as to support all of the requirements of Darkfall without actually being Darkfall-specific. The framework layer also interfaced with the input system, which was primarily written by me, partly in Java and partly in C++, interfacing with DirectInput.

Then, on top of the framework layer I built the Darkfall layer, whose windows and controls extend those of the framework to offer the functionality, the look, and the feel required by Darkfall. This layer is quite extensive, since we are talking about an MMORPG, and it has a massive asynchronous interface with the gamelogic module, written  by colleagues in Java.

In the following screenshot you can see the most frequently used windows of the Darkfall GUI: starting from the top-right corner and going clockwise: the minimap window, 3 party windows, two chat windows, the backpack, and the hotbar.  The two small windows near the center of the screen are the target info window on the left, and the vital stats window on the right. The crosshair and the free-floating text above the vital stats window are both parts of the transparent HUD component which is child of the desktop.

Full-screen view of the game showing a fully cluttered GUI. Click to enlarge.

When I started working for Darkfall my experience with MMORPGs was very limited, but after a little bit of research I quickly learned one thing: the GUI quite often gets in your way as you are trying to play the game. This was not so much true with Everquest II, but it was quite evident in Horizons. In Darkfall we decided that we should have two modes of play, among which the user should be able to switch by pressing the right mouse button: 

• Game mode, for interacting with the world, where:
• moving the mouse causes the camera to rotate and the crosshairs to point at things in the world;
• the left mouse button shoots the weapon you are holding;
• GUI mode, for interacting with the GUI, where:
• moving the mouse causes an arrow pointer to move about the screen; 
• the left mouse button performs a standard GUI click.

Therefore, I reasoned, when in Game mode we should automatically get rid of windows that are unnecessary for interacting with the world, and keep on the screen only what's necessary. When the user switches to GUI mode, then the extra GUI windows should automatically appear. When the user switches back to game mode again, those extra windows should automatically disappear.

Thus, in Darkfall it is possible to play the game like this:

Full-screen view of the game showing an almost completely uncluttered GUI.  Click to enlarge.

I called this feature cluttering and uncluttering the GUI, (please excuse my non-native English,) and Claus Grovdal (our lead designer) liked it very much and said that it was a unique feature not quite seen done precisely in this way in any other game.

I abstracted the mechanism that provides cluttering and uncluttering, and I provided two implementations, one using fading, (the extra windows fade in when going into gui mode and fade out when going to game mode,) and another using animation (the extra windows slide from outside the screen radially into their positions and out again.) The animating clutterizer was eventually dropped because of frame-rate concerns: it was thought that it would betray a low frame rate much more dramatically than the fading clutterizer would. 

Most windows in the Darkfall GUI have a little button on their border called the sticky button, which selects whether the window will be visible while in game mode or not. There are some exceptions to this, for example the options window never makes sense to show while in game mode, so it does not have a sticky button and it always gets uncluttered.

What follows is a brief description of just a few of the windows that can be seen in Darkfall.

The chat window is one of the most frequently used windows of the game, especially if we take into account the fact that MMORPGs are considered by many to be nothing more than "chat applications with fancy graphics".  A player can have an arbitrary number of chat windows open, each one of which may have an arbitrary number of chat tabs in it. The buttons on the top-right corner of the window border are, from left to right: a drop-down slider for selecting the transparency of the window, a settings button which opens up a configuration dialog for that chat window, the sticky check-box, and a close button. I built the first version of the chat control, and later a colleague extended it to build the final version which features coloring, droppable item icons, and tooltips.

Two chat windows.  Click to enlarge.

The backpack window contains an instance of the Darkfall Inventory Control. It displays the items that the player is carrying with him. It may contain other containers, (i.e. a bag) which may in turn contain other containers ad infinitum. The percent-bar at the bottom shows how full the backpack is. 

The backpack window.

Other instances of the inventory control can be found in the bank window, the clan vault window, the vendor trade window, and each one of the two panels of the player trade window. Also, when you double-click on a container like a bag inside your backpack, what opens up is, of course, another inventory window.

Every item in the Darkfall GUI has an icon, and hovering the mouse over it shows a tooltip window with information about the item. Naturally you can drag-and-drop items between inventory windows, but you can also drop an item into the chat box. When you do that, other players can see the icon of the item, and its corresponding tooltip.

A chat window with an item icon (offered by Corporal Buddy Silvercloud) and its tooltip. Click to enlarge. 

One window which you will not see in Darkfall is the GUI Debug window, because it is only available in the debug build of the game. It contains a tree control which displays the entire window hierarchy of the GUI, from the desktop component (the root)  all the way down to the individual texture components (the leaf nodes) of which everything is comprised. A blinking frame is displayed around the original (unclipped) rectangle of the selected component, (in this case, one of the textures that make up the minimap,) and a tooltip shows extensive information about it. It is very useful for troubleshooting all kinds of issues that may pop up in the GUI during the course of development.

The GUI Debug window. Click to enlarge.

The spells and skills windows also make use of the same tree component, and the fact that they look vastly different is testament to how customizable this component is.

The following two pictures show the hotbar window. It is a matrix of 10 by 10 placeholders where you can put all your weapons and spells for quick access, and where your currently selected weapon and currently selected spell are displayed. There is a set of key bindings for selecting which one of the 10 columns will be visible, and another set of key bindings for activating one of the 10 items in the currently visible column. In the first picture we can also see a progress overlay which shows that a certain spell is recharging, giving us a visual indication of how long it will take before we can use it again. The second picture shows the fully unfolded view of the hotbar, which is primarily used for dragging and dropping items from other inventory windows and from the spells window.

           

If you have lots of screen real estate to spare, you can actually play the game with the hotbar unfolded like this, but most people prefer it folded.

The component shown below is the minimap.  It displays a small fraction of the world around the vicinity of the user, along with points of interest. You can zoom all the way in to 300% or out to 60%.

The minimap showing a coastline and some points of interest.

The visible seams between the tiles are caused by imprecision due to scaling, and they are a defect that the game was initially shipped with.

 The minimap with a tooltip showing all items found in the vicinity of the mouse cursor.   

Another frequently used window of Darkfall is the so-called Paperdoll Window. It has slots where the player can drop wearable items to wear them.

The Paperdoll window (1 of 2)

The Paperdoll window (2 of 2)

Another very important component of the Darkfall GUI is the HUD component. It contains the crosshair texture and it shows information about the item or player that is at any given moment pointed at.  Darkfall is unique among MMORPGs in that it takes a first-person-shooter approach, and therefore the crosshair is the player's center of attention most of the time. For this reason, while playing the game I used to keep my targeting component (showing even more information about the targeted item) and my vital stats component (showing my health, my stamina, etc.) very close to the crosshair so as to be able to check their contents without much eye movement.

In the following picture I have my crosshairs on a rock outcrop; the HUD informs me that the pickaxe can be used on that item, and the target info window gives me more information about it.

In the following picture I have my crosshairs on another player, and I can see their rank, the clan they belong to, their name, and their health.  The target info window tells me that the other player is an Alfar Male, in case I had not noticed.

This is an underwater view (in a swamp, hence the slimy green color,) where a breath bar is also visible, showing me how much time I have before I must resurface to breathe.  The "Description of r_Alfar" text in the targeting component shows how unpolished the game was at the time of its release.

The party windows show other members of your party, (if you happen to belong to one,) and their health.

What is shown above is the first version of the party window, which was kind of wasteful in terms of screen real estate. At some point we sent out a patch which, among other things, made party windows look like this:

Of course this was a description of only a few of the windows found in Darkfall. I also made a multitude of other windows for the game, each with its own unique features and challenges. Those that I can remember right off the top of my head were:

• The Worldmap window
• The Compass window
• The Skills window
• The Spells window
• The Effective Spells window (showing spells that are currently affecting the player) 
• Various other inventory windows such as:
• The Bank window
• The Clan Vault window
• The Player Loot window
• The Monster Loot window
• etc
• The Vendor Interaction window
• The Crafting window
• The Enchanting window
• The Player Trade window
• The City Building (and Upgrading) window
• The Main Menu window
• The Options window
• The Video Settings window
• The Audio Settings window
• The Key Bindings window
• The Browser window (containing an encapsulated instance of Microsoft Internet Explorer)

The following is a screenshot of the Character Creator, a module built by a colleague on top of my framework to allow players to customize their characters when first starting the game. This particular screenshot is taken from a development environment where some of the textures happened to be kind of messed up, so it is unique in a very special way.

The Character Creator with a few textures messed up. Click to enlarge.

Finally, a picture of (almost) the entire Darkfall crew, taken in Athens on October of 2008, about 5 months before the game was released. I am the guy holding his very surprised baby son in his arms. (By that time I had started trimming my hair very short.) I think only about 4 people are missing from this photo, unfortunately two of them being the only two women in the crew at that time.

The Darkfall crew, Oct 2008. Click to enlarge.