This week has been a flurry of work dedicated to turning UI mock-ups into a fully implemented UI. The UI has been something which has been repeatedly commented upon during development. Which means it needs some serious improvement – and this has been my focus for this week.

Firstly, let’s look at the latest mock-up for the UI (ultimately how I want it to look) :

There are a lot of changes here. All functionality has been broken into three different sections, which can be opened by clicking on the book. The chat window is now separate from this panel and has multiple display options (more on this later). There is a hot bar which you can drag your most used icons onto. The inventory has also changed from just writing to an actual window, meaning it can be scrolled easily. The peons lose their own window and become floating heads along the top of the UI – auras around them will indicate status effects. The compass has been simplified and made more “standard”. Finally the TS (tilt shift) button has been removed from the interface, as it really isn’t that important alas.

The first step (for me at least) when working with a UI is create a set of generic classes/objects that can be re-used for all UI objects. This means everything will be derived from a set of generic objects. This takes some planning and thought to cover all cases – but is very worthwhile. Any code you can repeatedly re-use in a project is something every developer should strive for. Mostly because it means that it is code you won’t have to write later.

The initial bit of work was to create a generic UI panel, which would have all the functionality needed for every panel in the game. My fairly rough hand drawn prototype looked like this :

It was important to get all the functionality in the one window. Each of the windows can (potentially) have four different control buttons :

• Pin/Unpin – this “sticks” the window to the UI, meaning while it is pinned, it can’t be moved.
• Cloak – toggles between three levels of transparency. The first is the normal view, the second is partially transparent background. The third one means the window is completely transparent (but the contents isn’t). This third mode also hides the window controls when the mouse isn’t hovering over the window.
• Minimise – this reduces the window to an icon with the name of the window underneath. This icon can be placed anywhere on the UI and the system will remember the location of both the icon and the maximised window.
• Close – I’m sure you can guess what this one does.

So here is the generic window in action, showing all the different functionality :

Though I will agree, this isn’t the most thrilling bit of content in the world – it is an awesome foundation to work on. All the windows in the game will be derived from this panel, which means it is very and easy to fill the window with the correct content. Not every window will have every control, but some will have all four.

The next bit of functionality was the “mode picker” – the fancy term I’m using to describe the three books which change the main panel along the bottom of the screen. This is still very much a work in progress (I want to add a bunch of eye candy to the transitions) – and there is currently some debate on twitter if this should be a pyramid of books (as featured here) or a line of books. Let me know what you think!

You may also notice (it’s tricky as it flashes up very quickly and footage is only recorded at 15 fps) the Aspect sigils flashing on click. Still playing around with this and not sure it will stay – but it was a bit of fun. This only happens when the books are clicked on – not every click on the UI. Mostly because I’d imagine that would get very annoying quickly.

There are some other UI bits that I’ve been working on, but nothing I’m going to be talking about today (due to the very WIP nature of them) – I’m sure there will be a lot more to talk about next week.

There is a lot more to read about Fringe Planet… why not try:

• Back to the drawing board! UI re-design – Dev Blog 41
• An update from The Void – Dev Blog 42
• Welcome to The Void – Dev Blog 1