User Interface (GUI / U)

Hi,

I am very new to UE4 and am wanting to build a game which has a large focus on GUI.

I have done some searching for info on the subject and watched a few videos along with my ue4 basics training but nothing comes close to explaining how I can achieve what I need. I watched UMG in UE4 but it looks like a button creator and static images?

I know how to do what I need in Flash as I am a Web Developer by trade, so this probably makes things even more of a mix up for me.

What I need to create are animated 2D elements which sit ontop of the game at all times. If you take a look at the following links you will see the level of complexity I need with the GUI.

  1. http://www.allforthecode.co.uk/ue4/ui_screens/01.jpg
  2. http://www.allforthecode.co.uk/ue4/ui_screens/02.jpg
  3. http://www.allforthecode.co.uk/ue4/ui_screens/03.jpg
  4. http://www.allforthecode.co.uk/ue4/ui_screens/04.jpg
  5. http://www.allforthecode.co.uk/ue4/ui_screens/05.jpg
  6. http://www.allforthecode.co.uk/ue4/ui_screens/06.jpg
  7. http://www.allforthecode.co.uk/ue4/ui_screens/07.jpg
  8. http://www.allforthecode.co.uk/ue4/ui_screens/08.jpg

The question is, how or even where do I start to even work out how to do this at commercial quality?

Key requirements are:

  1. Curved / Dial shaped bars which fill and empty
  2. Curved / Radial shaped bars with fill indicators which light up rather than a filled shape (sprite sheet?)
  3. Bars which have unique shapes and thus require unique fills
  4. Animation effects such as glow pulses
  5. Animation effects such as line movements
  6. Projection of 3D models onto a 2D element (is it 2D, is it 3D, is it a sprite?
  7. UI Elements will have transparency
  8. Glow, Colourize/Tint and Alpha transitions
  9. Execute sound when ui element is clicked
  10. Events for mouse over, mouse out, mouse down, mouse up, click
  11. Low CPU/GPU consumption (I’ve noticed a lot of AAA games these days the menu screens can take more CPU/GPU than many parts of the actual games!)

Question
Another question is I’ve heard of Flash being used in some games for the UI (SONY), is it possible to push an SWF into the UE4 engine and hook into it somehow?

Question
Is there a 2D layer in Unreal Engine 4?

If anyone has any help on this it would be much appreciated.

Any information on how to achieve the above, where to get started?

If any of the Unreal game devs are reading this I don’t suppose you have a demo on the way for achieving this? Or maybe consider making one for the market?

Anyone know of any documentation links, information, pointers, tips, code, examples, youtube videos, demo projects that may help me?

Thanks

D

UMG and Slate are the ways to do that, UMG is definitely more than just buttons and static images, things can be animated.
However, if you are more comfortable with Flash, there’s Scaleform, which is a third-party software that allows you to use Flash to create your UI. It was something that was integrated into UDK by default. It’s not in UE4, but if you wanted to use it you could license it from Autodesk, they have support for UE4 with a license.

Thanks for the information…

You set me on google journey for UMG and Scaleform, which led me to RadiantUI which is a HTML, JS & CSS method of building UIs which looks like it’s mapped onto any object as a texture ($99). I’m not sure on Scaleforms cost as it mostly going on about unity integration and everything unreal engine is locked behind a registration and licence (to be looked into more on my part).

I’m quite surprised that the UE4 engine or even UE3 didn’t have all this integrated long ago and not require 3rd party software to be purchased. But as you mention UMG is capable of a lot more than static images and simple button states (animation), it looks like I may have overlooked this. I will dig in and see what UMG is, can do and find as many tutorials on it as I can found a youtube tutorial series 1 to 10 at Unreal engine 4 UMG - 1 - User Interface beginning. - YouTube which may light my way (going to watch them now).

Thanks for the info :slight_smile:

D

ok. That video series went way way over my head… No idea what was going on lol. Video 10 was the most useful.

Seems UMG is ALPHA Skip to 9 minutes in on - YouTube
ETA for v1 basic release is October ish, could need a year to mature into something that can compete with Scaleform?

Might be best for me to try RadiantUI. The googling & youtube searching continues.
RadiantUI tutorial series can be found here… Going to watch these now.

The journey continues…

Here are the UMG answers for your list:

  1. Curved / Dial shaped bars which fill and empty (Yes - Material)
  2. Curved / Radial shaped bars with fill indicators which light up rather than a filled shape (sprite sheet?) (Yes - Material / Blueprint brush swapping)
  3. Bars which have unique shapes and thus require unique fills (Yes - Progress Bar)
  4. Animation effects such as glow pulses (We don’t have arbitrary effects out of the box you can apply, no glow checkbox or slider, you’d need to bake it into a flipbook texture and use a material)
  5. Animation effects such as line movements (Yes Animation - but we animate widgets and widget properties and but don’t have primitives like lines you can animate)
  6. Projection of 3D models onto a 2D element (is it 2D, is it 3D, is it a sprite? (Yes - Render Targets)
  7. UI Elements will have transparency (Yes)
  8. Glow, Colourize/Tint and Alpha transitions (Yes - But not glow)
  9. Execute sound when ui element is clicked (Yes)
  10. Events for mouse over, mouse out, mouse down, mouse up, click (Yes - For user widgets yes, not every widget allows inspection/handling of those events, likely will in a future version)
  11. Low CPU/GPU consumption (I’ve noticed a lot of AAA games these days the menu screens can take more CPU/GPU than many parts of the actual games!) (Depends - Slate/UMG has efficient rendering but you can make it slow just like any other system)

Thanks for the info Nick, I got to 6am and called it quits with RadianUI, heading back to UMG tonight.

Question: Large image sequences
I think I can get away with nearly everything on point no 2, however if I have a dial with 100 states to fill a 360 curved area, does that mean I will have a 100 materials / blueprints I need to stitch together? Can I for loop this in a blueprint via dynamic name / id + image_no?

Question: Gif for non interactive animated areas of the UI
Is it possible? Is this Material / Blueprint swapping again?

Question: Vector graphics, svg and maybe swf options?
Is there support for import of vector graphics SVGs? or even SWF. This would allow UI scaling to not distort when going from 720p to 4k screens (would be a nightmare to have a 100 image sequence dial, to only have another 200 or 300 image sequences to cater for 1 or 2 more screen resolutions. Your recommendation?

Question: Vector image sequence
If vector graphic is supported (svg,ai,eps etc) would we animate via material / blueprint swapping or is there options for svg id manipulation like svg manipulation javascript?

Question: Depth / Tilt
Is it possible to have all ui elements tilt slightly in 3D space? Is it a 2D layer or is the whole UMG projected onto 3D objects in the UE4 world just Z locked to ensure always in-front?

The UI I’m trying to create is a cross between EVE, X Universe and something out of a stock brokers flash graphical and data listing tool.

All info and help is much appreciated.

Thanks

D

Depends on what it looks like, for most things you can get away with 3 textures used in 1 material, the unfilled texture, the filled texture, and a mask texture where each unique state bubble is given a different grayscale value, then you use the mask to render filled/unfilled on a per pixel basis based on a lerp using the mask’s value at that uv.

Like here’s how you do it with a simple radial ring (https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Styling/index.html)

https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Styling/UsedWithUI.png

You’d replace the Vector to radial value, with sampling a custom mask material. Percent is an external parameter representing the amount to fill the ring, so it could have been ammo or health or whatever.

We don’t have gif import support, you need to use a material to flip through sub-uvs of a larger texture atlas.

Nope - SVG is expensive to render. Maybe some subset in the future, but nothing in the immediate future.

UMG works on a 2D Layer, so no 3D rotations on any widget. We have plans for in world rendering in 4.6 which would allow for making a whole piece of UI be rendered in the world with some 3D rotation, but not on an arbitrary GUI item in the hierarchy, but that should solve the most common case.

Nice one Nick, I will build some test projects based on the information you have given me to get myself up to speed.

Thanks

D

It would be nice to see support for SVG. This is actually currently a wishlist item for Paper2D (Trello), but it certainly be useful for UMG as well. Perhaps you guys can work together.

Is 3D rotations of any widget on the road map as another post you made seems to indicate so ([Twitch] 4.5 Check In, Animation Retargeting and More! - Sept. 25, 2014 - Announcements - Epic Developer Community Forums). Maybe 4.7?

It would be cool to create something like the Dead Space UI (https://www.youtube.com/watch?v=0zED-iD3v5I#t=81) with UMG.

The 3D thing is currently slated for 4.6 - it will work like this, any user widget can be spawned in the world by a widget actor component that you place on a normal blueprint. That component can be positioned in the world, attached to an actor…etc.

Nick, a quick question (slightly off topic),

Data persistence between level streaming, if I have an environment which relies on user created content which then evolves over time, what would be the best way to go about this (kind of like EVE / X-Universe trading but all done via an AI, potential for a crazy amount of objects with many variables to process). This would need to work when the player is no longer in that level. I’m concepting the levels as being a way to make an extremely large game environment.

Any suggestions?

Thanks

Darcey

Slightly off topic?

You’d need to run a dedicated server that performs the simulation for the player when they’re not around. Or do what most games do, you fake it. You create a set of formulas that the user sets in motion and you estimate the effect over time. If the AI would normally take 2 hours to get somewhere, you’d add a goal to the list with the time it takes, and the result after the goal is completed, you just have a series of universal goals that are tracked across the entire game using something like the GameInstance which runs always. You wouldn’t actually simulate the area they’re not in, you’d just record what the AI plans to do, and should the progress ever need to be visually represented you look at the goals list and procedurally determine how far along they should be. If you need the AI to deal with physics and other game objects that have to be in memory, then you have no choice but to keep that stuff in memory, and if it’s too large for a normal computer than you’ll need to do what MMOs do and setup a series of dedicated servers that manage individual zones. You probably want to fake it :slight_smile:

That’s my arm chair designer answer.

The data would tick only when the user is playing the game so “hopefully” servers are not required for data processing.

I will look into the “game instance” and dynamic object creation which have data processors all managed on the game instance. Scene generation based on what data is stored in the game instance logic. It wont be so much position tracking or collision, but more like economy values and whether been attacked and destroyed by an ai (will need to work out a system for unit overall strength and individual weak point exceptions for AI logice simulated warfare, but virtually lol)

Again, thanks for the info :slight_smile:

All of my questions on UMG have been answered for now !!! Thanks Nick for answering (and Darcey for asking them) .