Community Led Training - Creating a Dynamic UMG System - July 11 - Celeste from Panda Studios

WHAT
We’re kicking off our new community led training steams! Celeste will be demonstrating how to use UMG to create a dynamic UI system. She’ll walk through making buttons and content from an array of actors, updating said array, and ultimately how to display information about those actors.

Please feel free to post questions here prior to the stream and folks from Epic will still join the live chat to help field your questions during the stream.

WHEN
Tuesday, July 11th @ 2:00PM ET Countdown]

WHERE
Twitch
Youtube

WHO
Celeste - Panda Studios - @CatherineCel](https://twitter.com/CatherineCel) / @PandaDevStudios](https://twitter.com/PandaDevStudios)

ARCHIVE

Hype! Looking forward to it =D

Hi! Will be there!

Question:

  • What is for you (based on your experience) the most comfortable way to stablish communication between the object and the UI itself?
  • Do you recommend to use the base HUD class hold by unreal? (I heard a lot that is not really the correct way but im not really sure if i should believe it (speaking about deprecation and oldness of that class))

Great to see some focus on UMG! I can’t wait for it to begin!

Question
I really feel like UMG is outdated and as I’ve seen in many threads and AnswerHub questions: with UMG, simple things are difficult to make, and takes a long time.
I personally feel like UMG could use a “fresh-up”, oterhwise UMG will always be behind the standards of the rest of the engine. UI is important, but feels slow and heavy to work with inside UE4.
What are the future plans for UMG? Any improvements in the horizon?

Can you give some examples of what’s difficult and what would makes it easier? What sort of things would be involved in a “fresh-up”.

There’s a new clipping system in 4.17, a ton of fixes for mobile. Beyond that - no big ticket items in 4.18, continued improvements on workflow and bug fixes trying to improve creation time at runtime, by eliminating animation cloning, some focus stuff. UMG has been adopted by lots of people at this point, and it’s a very well established part of the engine, drastic changes are hard if not impossible, so all major changes or improvements have to be added carefully.

I’m not the one who asked but I don’t really understand how you’re supposed to use User Created widgets. For example I want to create a RPG style character creator UI so I make a custom widget with a text box and a slider. I then add this custom widget a bunch of times in my main UI so I can create the UI I want. But when I click the custom widget in the Designer tab I can only see the canvas panel slot and there’s no way to access the text box/slider/buttons or whatever to set up the text, add events on sliders and so on. I thought using custom widgets would make things easier but it made things harder instead. I guess there’s the Pre Construct event but are you supposed to set up all widgets there instead?

The short answer is encapsulation. When you make a custom widget you’re choosing to create simplified representation of a more complex UI hierarchy. If you’re going to treat a collection of widget no different than it’s individual parts, don’t bother with the User Widget. By creating the User Widget, you are now able to simplify all access to the underlying data, taking in user structs or objects, and exposing events that make sense with dispatchers, rather exposing the more complex underpinnings and implementation details of the inner widgets. Freeing you up to change the implementation, without needing to correct all versions you’ve allowed direct access in your game.

Perhaps I just need to fiddle around with UMG more in order to really understand it, I’m not saying that I’m an expert on UMG :slight_smile:
There are some basic things I don’t understand, mainly because I always tend to compare UI with HTML and CSS (now, wouldn’t that be nice :cool:):
I apologize if some of the following is already possible, and I just haven’t done my research beforehand.

#1
Instead of using an Overlay panel with an image, and perhaps a uniform grid panel inside of it, why can I not just put a background image on everything, just like buttons?

#2
When moving a widget around the canvas panel, you have the option to enable grid snapping, why can I not do the same with scaling, when I have this option scaling 3D models?

#3
Clicking a button (for example in an RTS/build simulator like SimCity, Rollercoaster Tycoon, etc.) changes the active image. Working on an RTS myself, I know that it’s possible to change the image in the blueprint, but building the Slate brush and color seems a bit heavy for this simple functionality. I’d love to see the ability to change the image (and the tints) on a button, just by clicking on it. Exactly like the Appearance tab in the details panel, just for “post-click”.

This is just a few of the changes I’d like to see, that I can remember at the top my head. More may come later.

EDIT
Of course this is very specific scenarios and functionality wishes for my situation, but I feel like some of these could be used for many things, and to simplify UI creation. I always tend to get stuck at UI and HUD creation, but again, perhaps it just me missing some basic understanding of UMG.

So this happens a fair amount, people compare it to HTML/CSS, but Slate(UMG) isn’t HTML/CSS and can’t really ever become that. It’s fine to prefer one over the other, but both frameworks have different approaches that it takes time learning.

Widgets are all specialized, Slate’s design principal is that a widget has a particular purpose rather than uber widgets that allow everything all the time. That being said, people can make new widgets. You’re not limited by the slate widgets we ship in UMG, you can author new or better slate widgets that have more capability shared across them all.

Low priority bug/feature, happy to accept pull requests.

Buttons have a pressed state brush. There won’t be an image for ‘post-click’ that’s not a button state, that’s a game state and game concept you’re trying to inject into a basic widget. This is the kind of thing you should make a new custom widget for that houses the functionality of a toggle button with toggle images.

I know that the two technologies are completely different, I’m just used to HTML/CSS and can’t seem to stop comparing frontend technologies. My bad :slight_smile:

I’ve never seen this before, and again, that’s probably because I’m not that familiar with UMG yet.

I do appreciate your answers however, and still looking forward to tonight :slight_smile: