In the last week of Restless Ground dev, I’ve spent most of my time fiddling with Unity’s UI elements, and modifying my own item, skill and spell school C# classes to feel right. To make a reusable, user-friendly interface easily, I created a “ListPanel” GameObject that could be populated by an array of “IListable” Objects. All classes that implement my IListable interface have methods to call up a label, an icon, etc. Additionally, whenever I populate a ListPanel, I can also pass in two parameters that will hook up actions to buttons. On my equip panel, these actions will be “Query” and “Equip”, on the Shop Panel they’ll be “Query” and “Buy” (or “Sell”).
This allows me to use a similar layout to deal with spending skill points/equipping spells…
…and dealing with inventory:
I can even add two of these panels to a single screen, as necessary for my vault or the shop functionality:
This is a much more user-friendly interface than I had before. My ugly old interface:
Learning to love Unity’s UI layout tools
It took me a little while to cotton to Unity’s layout components, but I think I’ve got a good hang of them now. The entire screen is a series of nested vertical and horizontal layout groups. For example, on my equipment select screen:
This means that I don’t have to futz around with alignments, which are a real pain and won’t play nice with other screen sizes. Once I’m a more familiar with the tools, I may put together a tutorial.
Good as the UI layout groups are, they seem to occasionally glitch out in Editor mode.
Other user-friendly interface improvements
I’ve also created alert numbers that show up if you have fillable empty equipment/spell slots or skill points to spend.
Most elements have a query window full of useful information.
There’s also a small animated status bar that shows your current level and gold count.
And, for my own quality of life and sanity, I introduced an editor script to automatically set sprite parameters on import.
I’m having a bit of trouble with removing items from the store/vault, so will have to hack on that a bit.
I’m working on a simple crafting/collecting system. I’ll introduce this in my next post, as well as some lively animations for the menu screens. I’m also intending on introducing on-label pricing for items, and maybe some sorting functionality. I might need a better indication of which tab is active on the top navigation bar. I may also want to animate some of the icons, create merchant characters, or otherwise add personality.