UI Widgets Differences? Or Wrong Input?

While trying to make an interactive 2D widget with clickable buttons in Unreal Engine 5.0, I noticed some differences between it and the UE 4.27 version. The newer version seems a bit more complicated, as you have to create separate button widgets for a main one just to create buttons. While, in UE 4.27, you only need to click and drag buttons into an already made border. Or am I doing something wrong just by making the wrong kind of user widget?

When I start to make a new widget in UE 5.02 and then I click and drag one button, it takes up the entire space. After doing some reading, I found that it’s because one entire button can be one widget and a piece of a whole menu widget. Also, though I found instructions telling me to add an “OnClicked” event for each custom button, I see no such option. I don’t even see anything that will let me add that event for each button!

So again, am I doing something wrong?

It’s because UE4 comes with a canvas panel by default while UE5 does not. Add a canvas panel first, then you’ll be able to distribute ui elements by dragging them around.

1 Like

How do I add a canvas?

The same way you’d add anything else. Drag it to the hierarchy from the palette. It’s just another native widget.

Make sure the widget is empty, otherwise you will add the canvas to the button. Which sounds wacky but probably has a fringe case use scenario…

1 Like

So I would click and drag border first? Because if I click and drag a button, it takes up the entire area. I read that a single button can be one widget and part of a larger one, but I’m still confused since I would likely have to add a button to a larger picture.

Not a border. A canvas panel.

A canvas is special container that can have many children - other widgets, like buttons, borders, text blocks, user widgets.

The unique thing about canvas is the anchoring system. If you want to have a piece of UI attached to the bottom of the viewport, regardless of the resolution used, you’d use a canvas panel. You can also set the position and size of hoated widgets explicitly via the slots the canvas panel creates for them.

Make a new widget in the Content Browser, open it and add a canvas. From now on you can have additional elements added to the canvas and manipulate them as you see fit.

1 Like

Okay, I got the canvas and pulled that out. Now, how do I add “OnClicked” events to each custom button?

You can put native buttons in the canvas and its events will be available immediately after selecting said button.

If you prefer to place user widgets in the canvas instead - native buttons wrapped as separate widgets, you’ll have 2 options:

• add new Event Dispatcher in the user widgets
• bind the event of the native button by pulling it out of the user widget

So, do I add OnClicked events in each widget for the buttons?

Up to you. The events of the native buttons are available in the widget that hosts them.

If you want things to work as they were in UE4, use a canvas or some other container and native buttons.

If you want custom user widget buttons, you will need to use Event Dispatchers or Bind native clicks when the parent initialises, as mentioned above.

I don’t have UE5 - are you saying it comes with no standard native button?!

It doesn’t appear that way. I can’t even seem to declare variables in a widget’s BP in UE5!

I just looked up a random tut and it seems the button is there, in the common tab, where it has always been. But things may look different on your side.

Can you show a screenshot of the palette where all the widgets sit?

Here is the screenshot of the main canvas for the buttons:

And here is an example of a widget BP for one button.

What I want to do is make a puzzle that involves clicking on buttons that show numbers from 1 to 6 and a certain total must be met as the player makes a path from the start to the finish. So I wanted to put in an integer variable for each button, as well as a command to add the total by said number when each button is turned on and subtract when a button is turned off.

You wrapped a button in a size box and then in a user widget. Why would you say the buttons are not available while you are clearly using a button…

Add a grid panel to your canvas. Add native buttons to the grid.

No need to place anything manually like this. This way you’ll have direct access to their events.

Don’t get me wrong, it’s highly recommended to wrap things in user widgets but perhaps for now, for simplicity sake, use just a regular button.

I won’t be around until Monday morning; if you’re still stuck, I could post an efficient setup for something like this.

There are many ways to go about it. Working with 20 or so separate buttons will be a logistic nightmare of tangled wires and events.

There are better ways - Event Dispatchers. You end up with a single event for all buttons, but the event fires only when a specific button is pressed.

For now, consider using the native buttons directly in the canvas. This way you can start scripting the rest of the logic.

1 Like

Now it makes sense. Basically, the only difference is that you have to add a canvas before putting anything else on it. After I clicked and dragged buttons onto the canvas, I saw each one has its own multiple “begin event” conditions.

Thanks for the help once again!

1 Like