How do I make the most of Screen Space with my Widget?

Hey All,

I wanted to ask how I can make the most out of my screen space, using automatic tools available in the widget editor?

I have an upgrades screen that lists upgrades players can purchase. It used to do it in one big Wrap box, which made great use of space, but player feedback requested I organise the upgrades by type, in separate boxes.

So I created a Widget Child that has a name and a wrap box. I added multiple of these to the existing menu, and I have a blueprint cycle through all of the Upgrades (Which are structs, stored in an array in my Game Instance) and adds them to the correct box automatically at run time. However, as you can see, it doesn’t make great use of the space. How can I utilise automatic tools inside of my widget to do this?

FYI: Placing and sorting them by hand is not an option, it must be performed through Blueprint.

Apart from it looking somewhat packed already, it does seem to make good enough use of the screen space estate. I’d rather not have more information packed into a single screen tbh. But then I’ve yet to play the game…

Would you consider a tabbed approach where only one of the categories (Primary | Aggressive | Defensive…) can be displayed at a time, and the user must click a tab first to view it? Or is the overview too important to give up?

Hi, I mainly want them to make better use of the space so that they are easier to click on and select. From an aesthetic standpoint, it feels fairly good, but it’s lost a bit of the user friendliness, as the Icons have had to have their physical size reduced by about 40%.
Which is why I was wondering if there is some sort of widget component that automatically moves the categories around and finds the most optimal position. As the category sizes changes a lot as I add and remove upgrades.
And yeah, tabs is a great idea, but I’m trying to commit to keeping it all on one page for the sake of consistency with the rest of the menus.

To clarify, I’m modifying this value:

It’s the percentage / ratio of the available space that is consumed by the child.

Yet another method would be to wrap each wrap box with a size box and explicitly override the latter’s width based on wrap box’s element count.

This is awesome! It looks much better now.

Upped their size by an extra 20% s a result. Works really nicely. Thank you!

Oh wow. It actually made it look much neater!

How about this, you could base the amount of space a wrap box hungrily consumes in its container on the number of children it has, this can be adjusted dynamically, or manually:

Image from Gyazo

Image from Gyazo

Just a mockup, the math for this can be improved, clamping the min / max size could be useful here.