Currently planning the procedural attachment system. The challenge will be to keep the balance between keeping it generic (works with a lot of different meshes, different shapes etc.) and usability (actually creating something that works like a rollercoaster).

First test with spawning procedural meshes. (Would allow the user to modify them later).

Slate framework

The current UI framework from Unreal is called Slate. Slate is a wrapper around the Chromium Embedded Framework (CEF). (The engine of Google Chrome).
That means that Slate is using web technology to draw the UI, take a look here: wikipedia

Did you know that Unity, Evernote and many game launchers are using the CEF framework?

Slate vs UMG (Unreal Motion Graphics)

You might have used UMG widgets inside Unreal before, UMG is another wrapper above the slate framework.
UMG widgets are made with a visual editor and are saved as binary assets in your game project.
This might work fine for most simple game menus, but keep in mind that you may need to bind these events using BP to C++.
That operation might not scale or perform that well for bigger projects.

Example

Work in progress

For my plugin I wanted to populate a new tab in the ‘modes’ window.
In unreal this is called an ‘editor mode toolkit’. You can inherent your UI class from:
FModeToolkit Take a look at plugin examples for editor modes.

The slate syntax looks like this:

// Create a new widgetSNew(SVerticalBox)// New 'slot' / row+SVerticalBox::Slot()// Add some properties.VAlign(VAlign_Top).HAlign(HAlign_Left)[// Inside this row, make a new widgetSNew(SBox).WidthOverride(214.0f).HeightOverride(40.0f)[// Another one, image this timeSNew(SImage).Image(LoadImage("tycoonlabel.tycoonlabel",FVector2D(214.0f,40.0f)))]]

You can also make methods to generate new widgets, this is how I created the buttons:
Make sure to set the type to be a ‘smart’ shared reference. -> smart pointer lib

TSharedRef<SWidget>FTycoonToolEdModeToolkit::MakeExternalButton(FStringlabel){returnSNew(SButton).ButtonStyle(FCoreStyle::Get(),"NoBorder").ForegroundColor(FSlateColor::UseForeground())[SNew(SImage).Image(LoadImage(label+"."+label))]// Bind method to the click event of this button.OnClicked(this,&FTycoonToolEdModeToolkit::clickHandler,label);}

Debugging UI in Unreal

Sometimes things don’t work properly, or you are just curious about some cool UE4 button.
In that case you can use the Widget Reflector Tool, you can pick any widget and inspect it’s properties.