Constrain UMG widget inside player screen

Hi all,
I’ve been messing around with UMG trying to create a menu that pops next to the mouse location. I got it to work almost like intended using ‘Get Mouse Position’ and ‘Set Position In Viewport’ nodes.
What I’m not being able to do is finding a way to keep the widget inside the player screen when you click for example in the lower, or right, portion of the screen. The picture shows what I mean, the current behavior (1) and the desired (2).
I don’t know if there are any built-in settings/nodes to do it, maybe playing with anchors?
Any help is much appreciated.
Thanks.

84236-untitled.png

Does anyone have an idea at least that could potentially set me on the right track?

Try to calculate a bit around.

PlayerController -> GetViewportSize
Widget -> GetDesiredSize

So if you press your mouse you get the location and add the x/y of your widget, if its bigger than your viewport x/Y you subtract what ever amount you want and set is as desired location.

Hi Urm92, thanks for the hint. I thought about doing something similar, but I’m having difficulties when resizing the window/viewport. I think it has to do with the change in resolution or ui’s dpi. The widget appears slightly in the wrong position.

I recommend the helpful functions, AbsoluteToViewport, LocalToViewport, GetViewportScale, GetMousePositionScaledByDPI, ProjectWorldLocationToWidgetPosition. Lots of helpful utility functions for figuring out the right location in widget space that takes DPI scale into account.

Hi Nick, thanks for the clarification.
I can’t find much on the first two functions you mentioned. Are there examples, or tutorials, or official documentation, really anything that can help me grasp the underlying working?
Even a few words explanation of how it works would be awesome.
I also can’t find anything that explains the differences between “Desired”, “Desired on Screen”, “Custom”, “Custom on Screen” anywhere, but maybe I’m serching in the wrong places.
Thanks in advance.

1 Like

I also can’t find anything that explains the differences between “Desired”, “Desired on Screen”, “Custom”, “Custom on Screen” anywhere, but maybe I’m serching in the wrong places.
Thanks in advance.

Did you find out ?
I’m looking to know as well

At some point in these five years I found out that those options can be used to choose the overall size of the layout relative to the screen size.

Fill Screen = the layout will always be the size of the screen it’s on.
Custom = you can specify a size for the layout regardless of the screen it’s on.
Custom on Screen = same but there is an additional outline for the screen size.
Desired = layout is large just enough to fit all of the widgets within it while still maintaining the spacing set by the Anchors.
Desired on Screen = same but you can also see the edges of the screen

Hope it helps!

EDIT: a couple of helpful links when starting out with umg resolutions and scaling:

4 Likes

Constrain UMG widget inside player screen

There are many ways:

There’s also automatic tooltips that do this automagically. There’s also menu anchor widget that can pop something - afair, it respects screens boundary, I migth be wrong about the last one, though.


These are just for to preview the widget in the Designer. It gives you a reasonable idea of it will behave, so it’s easier to work with. Think of those modes as simulation.

This widget does not have a parent atm, but if you’re planning on placing it in a container like a 64x64 Size Box or Canvas that will enforce the Desired Size, you could set Custom On Screen to 64x64 as well. Now the widget will behave as if it was sitting in a restrictive parent even though it’s yet to be added there.

If someone is still looking for an easy solution, you can use this:

This was my solution…


Sample Video

Everything else i tried from others suggestions did not work except this.
Hope it helps!