First off, I’d like to present a slightly updated logo for the engine:

Today I’d like to share some insights into the development of a pretty vital part of the whole game: the user interface.

In a game of the scope of Orion’s Gate, being an MMO and all, one will have to manage all kinds of information concerning everything that’s currently happening in the game world, in some way. For this reason I have begun working on something I’d like to call YUI – The Yui User Interface. As you can see, it’s a reverse acronym. The name is an homage to Yui Hirasawa – a very popular character of the anime “K-ON!”.

YUI is a 2D-based approach to manage windows, and thus information concerning everything in the game world. Windows can be moved freely, as you would expect.

TileCling

When a window is minimized, a window is represented in a small tile, with an icon representing the action of the window. Tiles can freely be moved, or can be attached to a screen edge. Apart from this, a window can be also be closed directly from a Tile.

Reveal

This feature provides a birds-eye view of all open windows, the player can pick the desired window, which will promote the window to the front. I always liked the original – Exposè – on the Mac, and now it’s officially making its way into the game. While it won’t be as good-looking as it is on the Mac or Compiz Fusion, it most certainly gets the job done and behaves in much the same way as the original.

SpaceTime

I’m bringing virtual desktops to the game world, allowing for high flexibility to organize in-game content and information. Windows can be moved freely to other spaces, players can switch between spaces at will. A window can also be moved to the next or previous space from its Tile when minimized.

Organization of in-game content and information should become relatively easy with this, and opens up whole new possibilities of things that can be done with the UI itself.

LiveScale

That’s another gimmick worth mentioning. This one goes hand-in-hand with SpaceTime and Reveal, and allows for dynamic live scaling of windows and their content. It’s tied directly into YUI, into any windows, button, view, and so on. When ever a window has to scale, this will make the magic happen.

Theme-ability

If you’re interested in changing things under the hood, you can. YUI was designed to be flexible and theme-able, meaning it can change its appearances. Live and on the go. New calls have been introduced into the engine that allow for live-loading of themes at run-time. Themes themselves follow a certain folder format, to which I will introduce you at another time.

Fonts

As you have seen in the screenshots above, the engine is now able to render text of any kind, any color, any transparency, anywhere on the screen (meaning outside windows). Text can have a shadow attached, and the shadow too, can be customized in terms of color and transparency. This makes it possible to create “metal-ish” appearances as you may have seen on OS X and themes like it.

Video

Here’s the all-new Dev-Blog with me demonstrating the new abilities and the user interface. Please leave constructive comments.