More about the UI

And I’m back. I didn’t post for a bit more than a month, so, to make up for that, I’ll be posting small recaps of all the work done during this time, since, of course, I’ve been far from being inactive (except mid-may when I was under the malevolent effects of the obligatory cold).

I’ll begin this first recap with the user interface. If you’ve been following my work on Metaworld, you’re probably aware that it’s something that I started a while ago. It’s not something that I was originally planning to do this early in the development, but knowing how tedious it can be to do it at the end of the development, it felt like a good milestone to do it earlier and rely on it to display informations instead of debug logs.

Controls and windows

In the case of the game, the UI is built from scratch, what means that I need to create every single UI control (buttons, scrollbars, windows, etc), and once that is done, I can work on the functional windows that will be used by the players (character profile, city building, etc). Most of the windows I’ve begin to work on are work in progress, and include so far:
– city building,
– character profile,
– game settings,
– inventory,
– main menu,
– and small stuff like speel casting panel, mining panel, item detal panel (see next part).

You might have seen something similar on Twitter if you follow me, but when all the windows are open, it looks loke this:

UI Windows
As you can guess looking at this, I’m not an UX designer, so it will take some iterations before I get something satisfying.

As you can guess looking at this, I’m not an UX designer, so it will take some iterations before I get something satisfying. For the people who have noticed the “map editor”, it’s something for dev purpose only, I’ll talk about in one of the incomings posts.

Also, a note worth to be written : the font used for the interface is not definitive. XNA, that I’ve been using so far, is really bad when it comes to fonts, and I’ll have to replace the automatically generated bitmap font by a proper looking one.

Item details and item icons

Amongst the few panel type windows I created, there’s the item detail panel. The one that displays the item stats and icon. It has a part for itself since I’m still looking for opinions about the best icon style:

Item icon style comparison
So, which style is the best?

The pixel looking one is fast to create, but such a style is overused by indies, and tend to give off a less serious vibe. On the other hand, the drawn icon is longer to create, but avoid the pixel-indie pitfall. So far I’ve had most votes in favor of the second style. What about you?

Skinnable Interface

Amongst the side features of the game that I’ve already talk about: a skinnable interface. I use the fairly old school tileset method to render the interface, using an image like this one:

UI Skin
Old school, but very practical!

That is described by an XML file so that the game know how to display everything.

Using such a technique means that it’s fairly easy to modify the look of the interface as long as you know to use a drawing software. It’s something that I intend to fully support since it does not cost much in terms of development, and will allow the players to customize a bit the game.

Key Bindings

If you’re used to RPGs, you’re probably used to the key binding windows, too… Depending whether you play with the mouse or keyboard, it might be necessary to be able to customize the shortcuts used to open or close a window, even if defaults are often good (the [i] for inventory, for example… who would change that?). The system for this is already completed… But not plugged in the game settings window. To be done soon.

Still on the key bindings, the skillbars are now properly working, too. The keys displayed are no longer just for the show.

See you next post!