Can You Please Add Substantial UI Examples

Using the UI tooling within the blueprint widgets and verse are both fairly unintuitive and poorly documented.

Could you please add some documentation that at least covers all of the built in Fortnite UI elements, what they’re comprised of, what their anchor points are, what containers they’re in, etc?

I just have no frame of reference for any UI elements besides anchor locations which are already visible in the widget tooling. When I scale the HUD through the settings all of the default UI follows behavior I can’t emulate and I’m not sure how we are supposed to design anything in-line with these standards with no reference material on how it’s made.

There are really a ton of ways to configure the UI elements, and you can wrap them inside of each other, all of them then have different anchor points that you can drag into areas, then there’s padding, some have alignment… It’s exhausting to try to work through.

Some information covering how the anchor points and containers work, and how they can be used would be very much appreciated.

Thanks,
Lion

@LionUnchained Thank you for your feedback. While I cannot guarantee a response, I can confirm that this has been forwarded to the appropriate team.

1 Like

Hi. If it would be helpful.

2 Likes

This is great, thank you very much. :pray:

May I ask if you have ever been able to get your UI to correctly scale to users changing the HUD Scale option in the game menu?
My UI is all scalable between different resolutions, but once the HUD Scale is set in the Fortnite settings it breaks.

Essentially you can recreate this by taking your UI widget and going into the top level parent and increasing the scaling to 1.25x1.25. The widgets seem to treat this as a resolution change but the available screen area indicated by the scaler arrow thing does not change so objects that are anchored to the far top/bottom corners on each side will be pushed out of the UI display area, and likewise on downsize scaling it pushes everything into a small box in the middle.

Example. The coffee cup image is using 1.0, 1.0 alignment, and is anchored to the bottom right corner anchor of this canvas.

When this scaling happens the available screen size doesn’t change but the anchors move, so now the corner anchors exist off of the edge of the viewable canvas space.