The in-game UI mockup has been in development for nearly a month now and was modified dozens of times before reaching a satisfying functional state.
Underlair is not a simplistic dungeon crawler and doesn't feature side-stepping-dancing combat mechanics as the main tactics to defeat foes. Combat is built over a strategy formula, infused with several RPG elements. This results in a heavier and more informative UI, where critical information needs to stay permanently visible for easy access and management.
Below is an image containing some details of each UI element. This simple image consumed a whole week to work. Mostly because it forced me to rethink some mechanics and also because got a BSOD right when saving the file, resulting in the loss of 6 hours of work; punching the desk and screaming at the screen was also featured.
I will now begin the arduous task of making the UI functioning in Unity. The mockup image will be cut into several elements and I still need to study some implementation aspects of it. I'm not sure how long this will take. I'll try to post at least once per week from now onwards, that is, if time and development permit me to have something useful to add.
Looking really really good. Will dive into it later this weekend.
ReplyDeleteYour work pace is incredible, Ularis! I can hardly keep up just reading what you write!
Thanks bud! I'm really putting my all my effort into it. I hope I can keep this pace.
ReplyDeleteI echo Moorkh sentiments - can't keep up! I have my own UI to design XD
ReplyDeleteIt's impressive how much you manage to cram-in without making it too 'encumbered'. Out of curiosity, what was your process of arriving at this current design? I'm also referring to how you've come to formalize the various systems described and how they work with each other. I assume you went through several iterations, perhaps there there are working/placeholder UI designs that you could share?
As for the systems themselves - they seem well thought-out. Particularly, the tactics bar seems like an elegant way to encourage players to avoid long battles. Instead of 'losing time' - they 'use tactics', and I assume this is done quite frequently. Does changing formation from the 'presets' also costs tactics points?
In regards to the various psycrum pools - I'm a bit surprised at the scope and wonder what magic system does it represent. How does the UI shot which pool is currently selected? I assume hover over a psycrum bar in the character panel would note which pool does it represent.
"I assume you went through several iterations, perhaps there there are working/placeholder UI designs that you could share?"
ReplyDeleteI always use Inkscape to make mockups of UIs. I start with a basic idea and then shape it into place considering the need funtionality and available screen space. This means that I do change a lot. I keep modifying and restructuring the whole thing while making sure that the paddings, margins and alignments are consistent <- this is what really makes the UI design hard and time consuming. I usually leave a few buttons somewhere so I can add or take space from them whenever needed, even if it is just 1 pixel. You can witness this in the bottom-left buttons, there buttons serve that very purpose, including their own functionality. Let me know if you need help with your own UI. I can offer some tips but I've learned not to trust myself with color opinions due to my colorblind feature lol!
"Does changing formation from the 'presets' also costs tactics points?"
When you are in combat, any modification you do in the formation grid costs tactic points. The cost itself still needs to be tested so it doesn't become too easy or too hard to make changes in it. Regardless, the tactics total score is the combined strength of everyone's agility. So, that's another aspect to consider when building a party from scracth.
"I'm a bit surprised at the scope and wonder what magic system does it represent. How does the UI shot which pool is currently selected?"
When you select an ability (action) that uses psycrum, the corresponding mana sphere will be highlighted; I'm thinking of making it glowing with a slowly spinning aura around it. Unfortunately, it's not featured in any of the images above. Has for mouse hovering, everything in the UI will have tooltips, and yes you perceive it correctly, it will tell which psycrum pool is currently selected.
I already have some modifications for the way pscrym will work. In future, another update will be done just for it.
Thanks so much for the insight! I gave Inkspace quick try and it seems much more powerful then Photoshop when it comes to vector shapes manipulation. I'll give it deeper look soon when I get to designing grid-based layouts myself, and I'll be happy to hear your opinion about it. I'm currently making icons, which does relate to UI, but most of the work is painting them. Is there anything in particular related to colors that I can offer you my opinion on?
ReplyDeleteI totally agree with you about the necessity of keeping margins and such in order, despite being time consuming. It's essential for maintaining aesthetics, which is integral - if subconscious part of evaluating a given design.
"...the tactics total score is the combined strength of everyone's agility"
Linking tactics to agility makes sense and it gives this stat fresh significance.
"When you select an ability (action) that uses psycrum, the corresponding mana sphere will be highlighted; I'm thinking of making it glowing with a slowly spinning aura around it."
That might work being clear enough while also subtle. Animations tend to draw attention, and together with animated deficient inventory items and possibly other UI elements, some moderation might be necessary.
As an alternative, consider something like this - https://cutt.ly/nbmZH0c
The selected orb could still animate and mouseover orbs can still have a detailed view.
"Is there anything in particular related to colors that I can offer you my opinion on?"
ReplyDeleteFor the moment, there isn't anything particular. I'm already tunning down the saturation, following some feedback I got.
"Animations tend to draw attention, and together with animated deficient inventory items and possibly other UI elements, some moderation might be necessary."
Indeed, UI animations need to be smooth unless you have something that requires immediate attention.
"As an alternative, consider something like this - https://cutt.ly/nbmZH0c"
You know, that reorganization actually has just solved the problem I'm been tinckering on this last week. I think now I can have 9 spheres, one of them being a big one combining all psycrum available, this way I also can get rid of the gfx bar that was bugging me and serving that very purpose. It won't turn out to be what you exactly show but will be based on its premisse. Thanks for the suggestion!
You're welcome! glad that proved useful :)
ReplyDeleteActually, I was hoping for an uneven number of orbs as that would allow for symmetrical layouts. There's even more space for those by replacing the overall mana bar with a 9th orb. 2 birds in 1 shot!