A few days ago, I finished prototyping some inventory drag & drop functionality, which I discussed in February’s State of the Union. The next logical step was to begin working on unit equipment slots, and making sure the drag & drop stuff worked there as well.
Of course, I actually had to do some upfront UI work in order to display a unit’s equipment slots.
This is something I’ve been wrestling with for a while now. How to show a unit/character sheet. I have mini versions of them that are displayed in the top right hand corner of the page when you cursor over one, as well as in the head 2 head UI when confirming a combat action.
But I always knew I would need the real version of one at some point, and I haven’t been able to lock down what I want it to look like. When I look at most PC/Western style RPG menus, they mostly look like so:
Then you have your standard JRPG style menus, like so:
One of things I’ve always been trying to do with the Rose of Eternity series as a whole is to fuse the 2 sub-genres together. I believe I achieved that with my first 3 games, and even though this is another style of RPG, I’d like to do the same.
So I’m constantly asking myself all sorts of questions. “Should the inventory be a list, or grid?” “How many equipment slots should I have?” “Should the slots be in list form, or should they be encircling the unit itself?”
Ultimately, these are questions I cannot answer right now, and honestly, I shouldn’t have to answer. I’m prototyping. That can come later. And even if I was out of the prototype phase, it might end up best being left to a UI/UX expert.
So for now, I’m just going to get core functionality in. Get the systems working in an abstract enough way that they can be changed easily. I mean, the way I’ve currently setup the grid inventory, that can easily become a list. So there’s that…
Once I mocked up the UI, I just created some core equipment slots that regardless of the direction I move in the future, will be needed. I was able to leverage the work I did on the existing drag and drop functionality, and make each equipment slot essentially use the same type of slot UI I already have created. Once I did that, moving items from the inventory to the equipment slots was pretty much the same as moving it within the inventory itself.
The huge issue I had (which has been really pissing me off) is UI render order. So, what do I mean by that?
Because the items are being moved around the screen, they sometimes render in front of (which is great) or in back of (which is terrible) other UI elements. For my particular implementation, it’s all due to a hierarchy system. Let’s say I have 24 slots in my inventory. The 1st slot will be at the beginning of the hierarchy, and will therefore render first. This isn’t an issue with static images, because they’re all within their own space on the screen. But once you start moving these images, if you move them across other images that are towards the end of the hierarchy, they end up rendering behind them, which looks terrible on the screen.
Now, I did a bunch of research on this, and I’m probably not even doing it right, but my solution was to have a canvas per inventory image. What does this do? Well, with canvases, you can set a global sorting order. Because of this, I can dynamically set the sorting order to something high enough to make sure it’s always the last rendered item on the screen.
As I said, there may be an easier/saner way to do this, but this is more or less working for me now, and that’s what matters.
P.S. Just found this after I wrote this post. It pretty much describes doing what I did in order to make sure things rendered properly. So maybe I’m not so insane as I thought 🙂