Download

UE despirately needs Engine UI

After I was evangelized by an Epic evangelist Christian Allen at a local Game Dev Summit yesterday, I got fired up to check out UE4. The support that Epic gives to Indies is just unmatched to Unity or other engines and big companies. The Unreal Indies and new Online Learning Center, the Mega Grants, and 5 monthly resources that they give out to the community are… Unreal. While also paying the creators for downloads! Huge respect to Epic for using that Fortnite money for good, blessing Blender community with good funding money to improve the tools and the indie community. Just all around, nothing but respect making a dent in the industry and giving a lot of developers voices and funding they desperately need to finish the game while not going bankrupt. My heart is full of hope just cause of Epic doing god’s work.

That being said, it’s really, really hard to get into the Editor, and it’s very discouraging and heartbreaking to see such outdated UI. Not because it looks “outdated”. Sure it feels weird to see Skeuomorphic design in 2019, nothing unusual and not the problem, more of a distraction that you can get used to. The problem is that the nodes themselves make it really hard to read or understand them which flows back into the whole UI Design Philosophy of Skeuomorphism.

I tried to fire up Blueprints and in some nodes, it’s really hard to see which nodes connect where, which nodes do what (IntelliSense and pop-ups are very helpful, thank you), and which values connect where. Just so you guys understand what I’m talking about, I made a comparison of the same graph, recreated in Bolt (Unity VS plugin) which I use every day, to help illustrate the problems:

UE4 Graph:

Bolt 1 Graph:

New Bolt 2.0 alpha Graph:
Notice the “Proxie” node that was generated from GetAxis node for Less node and for AddForce node. Less spaghetti makes a big difference in bigger graphs.

I want to point out the big thing that stood out to me about UE4 graph node design:

  • The translucency of nodes. Makes text & content a little bit harder to read the cause of the noise that background adds.
  • The overlap of Node Definition & the Values. Greater than, Less than nodes specifically

At first glance, and then the second one, I couldn’t understand what the purpose of those two nodes. The signs overlapped with the value, making it very confusing, and only on Hover was I alerted that the graph is Greater Than or Less than. This is a small graph, but I can’t imagine how this could be more difficult and cumbersome to see other bigger graphs with more complex logic.

I want to point out, that it’s not impossible. But it is more difficult in comparison to Bolt and than even Bolt 2.0. It makes me wonder as to why Epic hasn’t updated or is not planning to update the UI in the next few releases, even though they are pushing to get more of Indies under their wing. Cleaner UI would help bring down the confusion, but I will admit that most of the content that was generated for the past 4 years since the UE4 inception on the public market will go almost to waste.

This is just a discussion and I’m not trying to promote anything, just comparing and seeing if I’m being wrong about this or not. But so far I feel discouraged to explore UE4 with mild dyslexia. The visual aspect is very important to me and as a Visual / UI / UX designer, I look forward to improvements in UE4 engine User Interface.

Interesting discussion…

But as always everything boils down to personal preference / taste. For instance, your Bolt examples are unpleasant (the color-combos are borderline hideous - sorry just imho). For example, take a look at UDK-Kismet, the predecessor to UE4-BP… Bolt kinda looks like that. If so, that actually means going backwards! Besides anyway, the reality is, Epic are quite slow about offering visual tweaks to Blueprints versus other roadmap goals. So change is unlikely any time soon…

But imagine if Epic did work on this… It would be great to have full color / style customization of all nodes and wires exactly setup to any user taste (including Bolt). That way, users could overlay their own visual preferences over code sourced from 3rd-Parties especially etc. When Blueprints are large and complex, it can also be very hard going to audit BP’s and sort out the all important final ‘action nodes’ from all the intermediate steps along the way that are really just prep-work etc…

You can improve the look by turning the grid off, it’s something that I’ve suggested a long time ago, they’ve implemented it, but it’s still not default :slight_smile: It makes everything clearer to read and prettier, both in BP and Material graphs:
Edit -> Editor Preferences -> Use Grids In The Material And Blueprint Edtor -> tick this off.

… As for the rest, yes, the UI is pretty outdated in terms of design, but it’s functional and quite clear on what is where. While it would be nice to have a new fancy UI, personally I don’t feel that current design limits me when it comes to working in BPs. So I understand you, but I also see why it might not be a #1 priority for them.

Yeah, but I do agree it would be easier to read if blueprint graph and nodes would use less transparency, contrast and round corners.
The background grid could be less visible too.

Maybe there’s hope for such changes in the near future. In 4.24 (compiled from GitHub source) they decreased contrasts for Details panel (empty space is darker), removed some extra borders in Modes window. A few small changes make looking at editor UI much more comfortable.

The “UE4 Graph” looks far better than the “Bolt 1 Graph” and the “Bolt 2.0 alpha Graph”. I think you just need to learn to use reroute nodes, which you didn’t make any use of in your UE4 graph. I don’t want anything about the UE4 UI to change - it’s perfect the way it is.

The Bolt colors are sickly for a graph editor of its type. Allowing for customization of styles and colors, formatting, etc. would probably interfere at a basic level with tutorials and content production / reception. I don’t see much difference between the ‘spaghetti’ aspect of either engine / tool. One of the most important facets of Blueprints is it’s a non-coder’s interface for programming. Rounded corners, high contrast, and the grid behind it all is essential for me. The grid allows snap-to of nodes, and helps in delineating the wires’ paths easier. UE4 road map is not bad by not including stylistic changes and a conformist / unifying structure to the system compared with Bolt or other Blueprints-type editors. What is needed is a more comprehensive tutorial on how to access and use Blueprints from various points of the UE4 interface. That information is scattered around the docs. Similar tutorials would help new ones to UE4 become more quickly familiar with the interface, how-to’s, concepts, and definitions, especially Engine-specific and for beginning game designers / developers. That brings in more interest, and supports more usage and tweaking of the Engine’s features to scale it with various projects.

As you said in your top paragraph, the community here is amazing. As such, take a look at a couple of plugins/projects being worked on by community members to show how extensible the BP toolset is.

There are two separate issues at play. One is that UE4 theme is indeed a bit outdated. There was a thread with UI improvements efforts but unfortunately they stopped due to lack of interest from epic: https://forums.unrealengine.com/unre…erves-clean-ui

There’s also somewhat half way fix in a form of 3rd party theme: https://www.reddit.com/r/unrealengin…minimal_theme/

Other one is that UE4 has customizable line curving in the blueprint editor, but it’s set up to make blueprints appear as spaghetti as possible by default. I usually tweak it to look better, but the problem is that UE4 stores these settings per project, instead of as editor preference, despite being editor preference. This is ridiculous, as it discourages heavy customization, if it gets thrown away with every new project.

Anyway, combination of a more sober theme with a more sober graph editor line curving settings does make the graphs more readable I’d say:


Just use C++. Problem solved. Seriously, you’ve used the engine for 5 minutes and decided what it “desperately” needs.

Suggesting C++ as an alternative to someone who wants to use Blueprint is like suggesting steam locomotive to someone who wants to drive Tesla Model 3. Sure steam locomotive has hell of a more horsepower and longer range, it’s not as easy to operate. C++ is something extremely painful to learn for anyone who has not had any prior programming experience, and I would dare to say it takes about one year of fulltime 8 hours / day work to actually write any meaningful, productive code in it. Sure you can learn basic concepts of it in a couple of months, but in those same couple of months you can already be quite skilled blueprint programmer, actually being in the process of putting some gameplay together. On the C++ front, you will still be stuck wasting days just figuring out why doesn’t your C++ defined struct update in the UI panel properly.

I do agree with the OP here, not so much that Bolt looks heaps better but it is obvious its more legible. There could certainly be some effort taken so that BP is cleaner by default, the spaghetti is not really a big issue as code will always end up that way (even c++) because of the complex nature of interactions between objects/classes.

One thing I like here in the Bolt Alpha picture are the compact nodes, it could be nice if BP had an option to have large or compact nodes depending on preference, I personally feel like the expression nodes still take up too much space for what they are because when making complex expressions they get unwieldy pretty fast and you want people to focus on the expression not the layout. The branch node just seems huge for the simple functionality it provides, a seasoned programmer will know what the boolean is for, what each of the flows are for, to me it seems more pertinent to show what the node is doing rather than teaching people to code through lego blocks. Lets take the set node as a comparison to the branch, see how its flow enters up near where it says set on the header where branch, functions and events all do it lower, shifting the branch name to the center and down slightly would allow the same thing and it would line up with the set. Im just of the opinion BP tries to tell you too much information that you dont really need to know, information which could be expanded upon in non-compact nodes or mouse overs. Target-Self could be totally omitted as an example and added back similar to structure node which allows you to modify the elements or again on a non-compact node.

The colour contrast is clearly better in the Bolt pictures too, the red of BP is too deep and could definitely be made brighter so it doesnt sink into the background, the pink is better because its brighter. The grid also makes the white/grey flows sink on the BP where on the Bolt one you can see it popping more which is useful, I dont think the OP is suggesting make everything look like pastel vomit just make it easier on the eyes. Sure BP has some customisation under the hood but since the visibility is largely cosmetic it shouldnt have much impact on the BPs from a functional standpoint which makes this a modification with fewer legacy issues.

As a person who has been using BP for many years Id like to see it improve, the functionality has come a long way but I feel like visually it could still use some work. I feel like a fresh perspective is sometimes the most honest as they dont have the same bias, that mentality of “this is how we’ve always done things” :cool:

Yeah no. Removing most of the colour coding, lowering the contrast, and making every node nearly identical in shape is the literal opposite of more readable. That bolt ui is worse than blueprint in every single possible way.

I think BP could do with removing all the bevels and other unnecessary visual noise - but the colors and different styles of nodes are very important.

I think people are jumping the gun in what they are thinking the OP is asking for! As they said there are instances where the node type is covered by value which is objectively less readable, so maybe try debating on points rather than making sweeping generalisations.

We all agree colour is important, I dont think for example Boolean should be any other colour than red but that red in particular could be brighter same with the array blue, if its too close to the object blue then maybe making them all blue to begin with wasnt the best idea. Floats green is a good example of visibility, it pops out same with the String and Vector colours.

If you look both UIs actually use some of the same ideas, with functions being visibly different to setters and different again to branches which both share the same icon though on the Bolt one the icon is larger and more visible. Im not sure where people got the idea that nodes should all look the same style, Events will always have the visible delegate but that could be why booleans red is so dull but booleans are used far more than the delegate red, infact I feel like the way delegates work dont flow very well but thats not just a visibility issue.

To be critical of the Bolt pictures and be specific, the green flow arrow is just all kinds of wrong vs BPs nice white arrows but no one is asking for those to be changed so it really is a non-issue.

Anyway with attitudes the way they are I dont see any meaningful change happening sadly, Ive been using the same 3dsmax interface for 20 years so I dont expect UE4 to be any different. The engine has come a long way in functionality, thats the main part but for those of use who have used UE4 almost every day going back since before its official release the UI is starting to feel dated. The fact thats confirmed by people coming from other engines might just show its something thats worth looking into, I doubt it’ll have a huge impact on anyone as long as any changes are a noticeable improvement.

I’m a beginner in Unreal Engine, and so far in BP I have a difficult time with the zoom levels and node sizes. If the text was resizable, and font types changeable, then it would help in not having to right-click move around the grid as often while retaining visibility of an entire semi-complex network. When I go through tutorials, I have to maximize to see the text and certain other facets of the nodes, then exit the maximized window to return to the UE BP interface. It doesn’t seem like a big deal, but it is annoying sometimes. Ease-of-use and functional accessibility plus consistency is important in UI design.

I’ve attempted to make custom theme 2 years ago. Then i found some issues with hardcoded colors etc. So clearly UE4 required a custom theme support embedded in the engine. But I just had no enough knowledge back then. Probably still have no.

https://github.com/S-ed/UnrealEngine/tree/MinimalUI

screenshot.1503617393.png

To be clear. I think UE4 UI is not bad. It’s just everyone has own preferences.
But would be nice to have some kind of loader to automate this stuff.

Hi guys! Thanks for all the replies! Some are very helpful.

As MonsOlympus have said, I didn’t mean that Blueprints need to copy Bolt UI one to one. IMO, Bolt UI is a little more legible cause of the design choices they make regarding layout & position, not the colors or spacing etc. Blueprint was designed to work with UE internal functions so it makes sense to have certain colors VS other colors, perfectly normal and not what I want to debate here. Bolt UI might not be the most compact UI for your tastes, and indeed it has weird “self” nodes, but it is very logical in some cases (when graph is not inheritly added as a component to the gameobject for example), but I can give it a glance no matter whose graph I have open and within few seconds have a basic understanding of what the purpose of the graph is. I’m sure you seasoned developers can do this as well.

But things like Greater sign not being legible can be a cause of frustration for me and many others. The overall “bavel” and this skeomorphic design feels repelling to me personally, can’t stand that stuff without an eye strain. That by itself shouldn’t be a stopping point, cause the engine is amazing! But it is.

Thank you **S-ed **for the link to UE4Minimal, will be checking it out to see if I like it more! I hope you can maintain the project further, the colors might not be the biggest stopping point for me or others, it has more to do with legibility and looks like you hit the nail there.

Thete is USharp for UE4 that is a C# wrapper which is under development and super useful. Substantially lowers hot reload times and useful things like being able to call .net libraries. Can’t recommend enough.

The only thing UE needs is uniformly sized nodes.
Whats the point of a grid when not a single node fits into the grid?

A quick look into it’s “Issues” section and I already know I would never use this for any serious project, unfortunately.