Continuing on the goal stuff, I need UI to let the player see their progress.

First thing’s first — I need a “place” to show the goals. They can presumably have their own panel or page, but this page has to be somewhere. When I consider other player information panels I have, there is also Loadout and future Upgrades. I will also likely need an overview one. So, the best thing I believe is to make a tabbed panel/window, which has all the relevant one together:

This also helps with navigation. The player can access these in gameplay with Tab (or whatever UI button is bound). And it shows the all the player info tabs.

Firstly, I will wire the loadout panel, since I already have that one made:

I need to make the other panels too, at least stubs for now.

Now, the difficulty with goal panel is how I actually want to show them — how to lay them out in the panel? There are a whole lot of different ways and my current goal list is technically on way — just a long list:

But that is horrible UI. I can spend a day or two and make a proper UI layout for this instead. I think it’s well worth it, since all my goals will then be neatly organized.

First, I need the layout for the goal. I think I will go with a table-like structure that is split into columns, then rows, then items. So I might have weapon-related column, energy weapon-related row and #1/2/3 goal in that row. So I can define this structure and draw it nicely in the editor:

And make myself a hint when I forget something:

After some experimenting, I came up with this list (from my existing goals):

I can kind of see that I now want the fourth mob type. I also want a couple utility goals, likely repairs and crafting or some such. But I’ll get to that later. For now I need to convert this into UI.

So the UI hierarchy is quite an ordeal here.

Admittedly, I could have done this easier, but oh well. When have I ever done things easy.

So anyway, the end result looks something like this with the goals properly arranging themselves:

I also added a debug “complete” button for goals so I can test how they act in UI in such cases:

This is so that I can show the actual status of the goal int he UI, that is, complete, pending/unlocked or locked:

Finally, I need navigation for the grid/table. This is a bit complicated because I don’t just have an X and a Y, but rather columns and rows and each row can have one to three items. This means there are a bunch of cases I have to consider when moving around the table:

But in the end, I got it all working. I wish I did more modularly, so I can have a UI asset for such tables in the future.

Finally, I want to show the information about the selected goal. The first thing is that I need a proper caption and description for every goal:

Thinking about it, I don’t actually care to have different description for every goal step, such as Kills #1/2/3 necessarily being different. So I made it use the “parent” description from the earliest step when I don’t specify any override:

This just saves a bit of time. I also made a custom magic identifier when I want the label to use the actual number of the goal, such here:

I also need to display the number as progress. For that I need to tell my goals how they are represented, that is, with a numeric value that I can look up in a generic way:

And if not, then just specify the type of values and say that it’s not directly editable (although I’m kind of considering just moving the lists from goal rules to individual goals):

And with all those extra bits for UI, I can actually show the UI:

Just to illustrate how tedious and convoluted this can get quickly, here’s the hierarchy:

And I have to reference each parent/container element and any elements I change so I can toggle and modify them at runtime. UI is really slow, even though you only see a few labels at the end of the day. I never really appreciated UI before I had to do complex ones myself, especially adjust them.

Anyway, this about wraps up the UI framework part of the goals. I will need to lay everything out neatly and use all the right sprites and fonts. But as will all the panels, I will do so when I finalize my UI/HUD sprites.

MicroRogue DevDiary #80 – Goal UI
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *