Thursday, May 4, 2017

GUI, GUI never changes...

...unless you resize the window

Anyone that knows me, knows how I love making any sort of user interface. I just loathe it. When I started the project I knew I would be using the build-in Panda3D DirectGui, it's not perfect, it's not that easy to use but it is integrated with the scene graph that p3d provides. Moving, scaling, rotating parenting one element to another just works. Unfortunately not  always. From the wide array of widgets provided by DirectGui I ended up using just few and all of them hacked one way or another. Recently I had to give up on the DirectScrolledFrame  and roll my own using two clip planes and a scroll bar. That took me a day, but now 90% of the GUI is done. The remaining 10% is just connecting buttons with functions but I can do that only when I actually write the functions.

I've also made some visual changes and arranged some widgets in other ways. All buttons got a extra decoration, a pixel of width added here and a pixel of width removed somewhere else. The font got a bit bigger. The health and cooldown bars have been moved from the top left corner to the bottom right corner, not that I think it's better this way, the top left would be the better place but I'm lacking vertical space. I may yet move it back and maybe switch the inventory and character screens, but I'm not sure what's best. On a big display it's not a problem, but it's a different story if there are only 600 pixels of height. I also had to drop official support for 800x600 resolution, there's no way I can fit both the character screen and inventory in 800 pixels, the minimum  is 896. Even if I remove the frame and just draw a 1 pixel border I'm 16 pixels short of 800. It's just not worth it, and I think that any machine that is limited to a 800x600 display won't be able to run the game anyway. If someone really needs to run on a tiny display, the window can still be resized, but at some point the widgets will overlap (if both inventory and character screen are opened at the same time).

Currently the GUI looks like this, some minor things may change, but it won't change much.
EDIT: Yeah, I did the change, here's the new look:

Design of the GUI

 Many games are guilty of very bad UI, sometimes it's obviously crippled design (like in Dragons' Dogma), sometimes looks are more important then ergonomics (most Asian MMOs ), sometimes it's the amount of buttons, icons and hotbars that's the problem (WoW) and sometimes it's not obvious at all that something is wrong with the GUI (like Diablo). 

For some unknown reason almost all cRPG developers make their inventory screen some variation on the Diablo design. There's a silhouette ('paper doll') with slots for equipped items and a grid of slots for other items all shown as icons. It's half bad if all items in the game have unique icons, but if the icons are reused - it turns into a nightmare. The only way to know the properties of an item is to hover the mouse over an icon and wait for a pop-up with more info. Sometimes there's info about more then one item so a player can compare items, but still it's done one by one. Doing anything with a inventory like this takes ages.

I decided to go a different rout, my inventory screen works like the detail folder view. The overall idea is similar to the Sky UI mod for Skyrim, only taking it a step further - all properties are visible at a glance and it's all text not icons. All items are show in a wide column with all the properties of the items show. Items can be sorted by all the possible properties both in descending and  ascending order. Equipped items are show with a different font colour. There are no cryptic icons, as long as you can read you will always know what you are looking at. There's no need for drag and drop, to equip an item click on it, to un-equip an item click on it. If you want to drop some items, you click on the 'drop items' button and a panel identical to what you see when looting containers appears - clicking an item now will move it from your inventory to this container, clicking items in the container will move them back to your inventory. Also using the inventory isn't a mode, the game is not paused, all keys still work, you can move, fight and cast spells with the inventory open. 

Maybe it's not the most beautiful GUI ever made, but it's functional and a lot more thought went into it then the look may suggest. I hope people like... if not it's easy to re-skin (just one image), the layout is a JSON file and the python code driving it will also be available as plain text - you can mod the hell out of it. 

No comments:

Post a Comment