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!

Metaworld’s latest works report

It has been some days since the latest post, thus now is the time for a small recap of what happened during this time. Overall, I’ve been mostly working on bits of things rather than huge systems, which is the primary reason of the lack of post over this period.

Here we go :

– I’ve improved the UI little by little when I needed some functionalities. I’ve notably added a progress/loading bar control which is now used to display in more visual way the life of an entity. The skillbar has been enchanced a little, and can now display a hotkey (placeholder art inside) :

Skill icon
A skill icon placeholder created in 5 minutes, that looks better than I expected!

– The only big task done was the rework of the animation system. The main reason for this rework was to add interpolation between animations, so that it stays fluid when starting/stopping to run, fighting, etc. Mission complete. I also took advantage of this rework to switch most of the internal rotation code to quaternions.

– Meshes displayed using instancing can now be animated with a wind effect, grass for example. No video at the moment, but it will come in due time.

– The base of the city system has been built. When the terrain in generated, it adapt itself so that the buildings above it fit properly :

Little house on the prairie
The terrain flattens itself under the 3×3 house.

– The player character model has been reworked. I added four new equipment slots. One for the helmet/hair, one that is used to show neck protections such as gorgets or scarfs, and the two others that are use the right and left pauldrons. The legs are bit bigger, too. I’m pretty satisfied with what it’s looking like now, with a heavy armor, but I have more tests to do with lighter armors. I’m keeping that for a future video, too.

Of course, that’s only the tip of the iceberg. There has been other minor subtasks, I’m continuously improving the game design of the game, sometimes reducing its scope, sometimes adding a small feature, etc. And at the time, I’m working on improving the battle system.

User Interface in progress

Amongst the various things that can take a lot of time when developping a video game, you can find the user interface, aka UI. In many games, it’s one of the major way used to interact with the game, when it’s not the only one. Thus, it’s *kind of* an important task to complete. It’s not usually a complicated one, but it requires a lot of time considering the amount of features it needs between the simple variety of controls needed, and the many game windows and popups to create.

Here is what it’s looking like at the moment :

UI
UI controls, UI controls everywhere!

On the left you can see an item detail panel. This one is a test, it’s not linked to real data, which is the reason why it’s still incomplete. It’s the control I’m working on at the time.

On the middle, there is a test inventory window. It can move freely within the bounds of the screen, contains a text button and a checkbox, both working the way one could expect. More interesting, the bottom part of the window is a “container”. If you’ve ever played to a RPG, especially online ones, you should know fairly well what it does : represent an inventory and the used/available storing space.
Items inside a container can be activated (e.g, : use a potion, a scroll, etc) or moved between different slots of the same container for reordering purpose.

If you look at the bottom and right of the screen, you can see two skillbars. Both contains a container. The difference between the inventory container and those of the skillbars is that the later only contains “shortcuts” to items (or skills). It’s possible to drag-and-drop an object from the inventory to a skillbar.
If you’re attentive, you might notice on the right skillbar an image button above it : it’s the rotation button, used to switch between horizontal and vertical display. The skillbars can be moved like any window.

I still have add tabs, radio buttons, tables, listboxes and comboboxes. The scalability is not complete at the time (only window and buttons works with it). More interesting – I guess – the UI is already fully skinnable. I use an external XML to describe the graphical elements.

In case you were wondering, the weapon icons and UI skins are tests. I won’t keep them as they are now.

And that’s all for now :)