How do I use a vector to rotate UMG widgets?

I have a bunch of widgets that I’m adding to my canvas, and currently positioning at a random point on the screen:

This works, but looks kind of messy, and it occurred to me that this would be much easier to read if I spawned all of my widgets in a circle n units from screen center. I can get screen center by dividing viewport x and viewport y by 2, and I know that conceptually I need to be drawing a vector that originates at the center of the screen and extends n pixels across the screen, then rotates some arbitrary number of degrees. If you draw your widget at the terminus of the vector, then repeat for your next element, you’ll end up with all of your widgets evenly spaced in a circle.

That having been said, how the heck do I get the “tip” of a vector? I know it has three coordinate values [x,y,z], and I know that in the UMG designer X corresponds to up/down and Y to right/left, but I’m really unclear on how I should translate the tip of a vector to a [x,y] pair that corresponds to screen coords.

Isn’t Z=0 in UMG?

It is, but even then I must be doing something really obvious wrong- this is attempt #2, and I’m getting it closer, but the circle is still weird for some reason. This blueprint:

results in the following offset, when I was expecting even rotation around a center point:

If you’re using a random integer node, how do you expect the text blocks to be evenly spread?

That was an early version, I since took the random node out entirely-the second version I posted a screenshot of just makes a 2d vector of screen center, converts it to a 3d vector with a z-value of 0.0 (so I can use the RotateVector node), then for each index, it rotates it 20 degrees more than the last. That’s what produces the lopsided version, but it’s still not symmetrical.

That was fun! I think I got what you want.

And this is the blueprint to achieve this:

Cheers,
Sascha

1 Like

Holy cow, thank you!! I never would’ve worked that out on my own, the moment I see trigonometry my brain freezes.

This definitely works, but it also has a weird behavior (which I also saw in my prior attempts) where viewport x/2, y/2 doesn’t seems to place things at center screen, but always in the top-left corner.

The only thing I could think of is maybe viewscreen coords and canvas coords are different, but since the smiley face widget is just text on a default canvas, shouldn’t that canvas panel always be stretched to match the viewport dimensions?

Hey, you should check out anchor points. Your case with all the widgets placed at the top left corner of the screen is the default with an anchor point at the top left corner.

I’d recommend just to play around a little bit with anchor points. Currently I don’t have the time to check this out myself and post the solution here, sry.

Hmkay, thanks for the suggestion!

You can also use the RotateAroundAxis vector function to do the sins and cos’ for you. Old thread I know but it came up in my search.