UMG: How to move in Z-direction?

I’m starting to learn UMG and I’d like to render my Widget in the scene, and when interacted with, move some elements within that widget forward or backward. I’m not referring to Z-index sorting, I’m literally talking about transforming something over the Z-axis in the world space. (say a button that moves towards you when hovered over).
The WidgetTransform translation node only allows me to alter the X and Y axes.

In case this is a hard restriction by the UMG system, is there any other way to work around this (other than an elaborate solution involving putting every interactable element in its own Widget, and on its own Actor?)

1 Like

Hello,

You’ll want to look into using 3D widgets if you’d like to transform them along the Z-axis. You can find documentation on creating 3D widgets at this link: https://docs.unrealengine.com/latest/INT/Engine/UMG/HowTo/Create3DWidgets/index.html
The reason that you cannot transform a widget along the Z-axis is because they only exist on screen space, which is 2D.

Thank you for the quick answer Sean.
Let me rephrase the question a little bit. I am aware of 3D Widgets and the fact that they do have the transform options I require. However I would ideally still be able to utilize the user friendly way of designing my screens in the UMG designer, with direct acces to all kinds of properties like button styling, anchoring, positioning etc. Those are not directly available when dragging the seperate elements of the screen into an actor as 3D widgets and viewing them there.

So, hoping my questions still makes sense up until this point, let me summarize again a little bit: I’d like to work on my Widget via the UMG Designer, but have the possibility of some objects in there to move on the Z-axis for instance when selected. And I’d like to keep the whole screen as one 3D widget; not split up all of those objects of a screen into a lot of 3D widgets.

(What I’m trying to do here might be impossible, in that case any proper alternative or tips will be much appreciated)

You actually can access the individual aspects of widgets when they’re added as widget components in an actor blueprint. As for having to create an actor for every widget you would like to add, you could instead add a widget component to a single actor. This should allow you to get the effect that you are looking for. I have provided an example below:

Here I have added Widget Components to a single Actor blueprint. Each component can be moved separately, which will allow you to get the transform you’re looking for. Each type of widget (button or image, in this case) is a different widget blueprint, which will allow you to have access too all of the properties that you mentioned. Once you create the widget blueprint, you can set the Fill Screen option to custom, and ensure that it matches the size of your button/image/etc. Then, in your actor blueprint, you can set the Draw Size option of the component to be the same as the size of the widget, which will allow you to move the widget around like you are looking to do. Give that setup a shot, and let me know how it works, or if there is anything you’re not understanding.

Also, you can lessen the number of widgets you’ll need to create by putting all of the widgets that you would like to remain static into one widget component.

Thank you for the very clear explanation! This really helped me out.
Also I want to add that as a UI designer with very little programming knowledge I’m very impressed by UE4 in terms of the freedom it gives me.

It seems ** 3D Widget User Interface** not supported in UE5.1.1, any substitute Class?

What makes you say that? Widget components are still around. Fresh link:

I’ve stuck in the same issue…But the link seems unavailabled now at 12 Oct. Could U pls re-send another one, appreciate! :vulcan_salute:

Link in the previous post… Can’t find something? It’s usually a single google search away:

Thanks !! :pray: