UMG layered 3D Widget

Development Programming & Scripting UI
, , ,
1

Hi

I am currently experimenting with 3D Widgets at the moment, as I wish to try and make a computer terminal that the player can walk up to, with several layers of menu’s in it that the player can navigate through and click different buttons to do different actions.
However so far, I am not having much luck.
You can see my current progress in this video:

Basically, there are 3 buttons; Power ON, Power OFF, and Change Power Level.
I want the player to be able to click on “Change Power Level” and the computer terminal would show a different screen, one with text saying “Voltage”, a slider to control the voltage, text showing the voltage according to the slider value, and a back button which would switch back to the first screen.

I’m not entirely sure how I can achieve this. I have one idea in mind, but it just doesn’t seem very user friendly.
It would basically look for an object with the “computer” tag within a certain distance (which probably won’t even work anyway), and then cast that object to a computer terminal, before triggering an event to change the widget component, which I think would probably present other issues in itself :frowning:

Is what I am trying to do a possibility just using UMG and blueprints? Or am I out of my depth.
I am only prototyping ideas at this stage, so I don’t necessarily want to do much in the way of C++, but will if necessary.

The last thing I would like to ask about, is if it is possible to display a cursor on the 3D widget itself, much like in Doom 3 when a player would interact with a computer and it showed the little arrow on the terminal’s display as shown here:

Thank you in advance, any help would be greatly appreciated :slight_smile:

2

So I worked it out.
I created a new Widget blueprint (“RootMenu”), inside of it, I deleted canvas, and placed a Widget Switcher Panel(This needs more documentation). I had already made 2 other Widget blueprints (“PowerControls” and “PowerLevelControls”) with functional buttons.
So inside of my RootMenu Blueprint, I dragged my existing widget blueprints under the Widget Switcher Panel as children.

By default, the widget switcher was set to variable, but if not, make sure it is.
Also, it’s Active Widget Index is set to 0 by default, which will show “PowerControls” since it is the first child of the Widget Switcher panel. If I set it to 1, it will show the “PowerLevelControls” widget instead.

Then inside of both PowerControls and PowerLevelControls widgets, I created a “event Construct” node.
I clicked off the node in empty space and created a “Get Parent” node (you may need to uncheck the context sensitive button). From there, I try to cast as Widget Switcher, I then assign the cast to a new variable called “ParentWidget”.

Inside of PowerControls widget, I have a “Change Power Level” button. I created a click event.
I then drag off the click event, unticking context sensitive and adding the “Set Active Widget Index” to 1 (PowerLevelControls). In it’s target, I hook up my newly created “ParentWidget” variable.

I do the exact same thing for PowerLevelControls, only I set the active widget index to 0.

I imagine that this could get rather messy for large menu systems, like what I am trying to achieve. So I recommend that if you do a menu system, create a flow chart on paper, and number each menu for reference for when you set the active widget.

In my case, I am trying to create a sort of in game operating system for players to interact with and do crazy things with. And it may very well be very extensive.

3

Everything you say here is possible. I know because I have done it using only UMG and blueprints. Unfortunately, I am not at liberty to describe how to you, so I’m sorry. But, you should know that you can achieve this. Here’s a little push in the right direction though: put all these buttons in a canvas panel in the UMG editor. Put the sliders in another canvas panel and set its visibility to hidden. It may mess up the locations and put everything in the top left corner but you can fix it manually. Then change the visibility of these canvas panels according to relevant buttons being pressed. Many people can’t figure out how to get 3D UMGs to affect other blueprints so you are ahead on the right track.

4

Thanks for the response. I posted an answer to the problem, which seems to be a much more feasible and tidy option if you wish to take a look. No scaling issues either.

5

@Otreum Thanks for the great example; I tried to follow the official tutorial to make 3D UMG Widget, but failed to interact with the menu; I suspect the problem is that I don’t have the cursor shown in the screen, how did you switch the cursor on/off like you did in your video? Thanks!

6

If you get the player controller, you can drag out a “Set show mouse cursor”. You also need to “Set Input mode Game and UI”.

You’ll need to have some kind of trigger event to trigger these things. There’s plenty of ways to do this.

I hope this helps :slight_smile: