Download

Keeping UMG widgets from overlapping each other within canvas

I’m working on a UI somewhat like the flowcharts in the Democracy games: http://www.positech.co.uk/democracy3/_assets/images/content/s2.jpg

I’m representing each “node” (the blue/red circles in the screenshot) as an instance of my custom nodeWidget UMG widget. I position a root, empty canvas panel in the center of the screen, and when I generate the UI I just use Add Child to spawn one widget for each data point I want to display.

Positioning each widget to make it look like a flowchart is relatively easy, I just offset it from center by a random [x,y] value bounded by the screen size, like this:

However, this can lead to multiple widgets overlapping each other, especially when quite a lot of them are onscreen at once- is there any simple way to ensure that each widget is visually unobstructed?

The only thing I can think of is when you create your random X/Y check a radius around it for any other Widgets that are inside that radius. Either with an array of the previously created widgets or a ray/circle cast to see if there is a ‘hit’ (not sure if you can do the ray cast thing with UMG.

Hmm… this is just an idle thought that occurred reading your response, but do you have any idea if the grid panel has any kind of “snap-to” feature? Because really what we’re talking about is a grid panel where the cells aren’t filled sequentially: if that’s possible, I could just position them as per normal, then add to child and snap them to the nearest cell to their current transform.

I think this will work:

Array of widgets A
if (ForEachLoop(A) > check bounds > check for overlaps) re-randomize pos;

Oh hey, that sounds like it would work… any chance you know which specific nodes I should be using for the bounding and overlap check? I’m looking at the contextual suggestions in blueprint, and there’s lots of stuff for actors and components, but I don’t see anything widget-specific.