3Ducttapes(); Yvo von Berg | CG Toolsmith blog | C++, Python

Tycoon C++ Pillars + animation test

  • Just ported Tycoon to Unreal 4.21.2 and I’m using Visual Studio 2017 now. Had to manually change the include path to pick up the project files for Unreal, added the following lines: ..\Build\Win64\UE4Editor\Inc\UE4Editor ..\Build\Win64\UE4Editor\Inc<ModuleName>

  • Added another test for the pillar system. I’m using the first two points of the bounding box to place the pillars. I duplicate these components until it hits the ground level.

  • Generated reference transforms / locators on the track, I can use these to control the animation later.

  • First super quick animation test on the track. :)

Tycoon C++ Support system first steps

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).

Coupling system:

Wood latticeworks works style:

Tycoon C++ UI update

Nothing major, just added slightly better looking UI.

These rows are toggable, basically just turning visiblity on/off on the SHorizontalBox widget.

Tycoon C++ Twisting

I’ve added twisting! Just rotating each point in a similar way as the bend method does, but in a different axis.

Tycoon C++ UI Slate update

Did some work on the UI today.

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.

Back to slate: slate docs

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 widget
SNew(SVerticalBox) 
// New 'slot' / row
+ SVerticalBox::Slot()
// Add some properties
.VAlign(VAlign_Top)
.HAlign(HAlign_Left)
[
    // Inside this row, make a new widget
    SNew(SBox)
    .WidthOverride(214.0f)
    .HeightOverride(40.0f)
    [
        // Another one, image this time
        SNew(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(FString label)
{
    return SNew(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.

Next steps:

  • Still have to learn how sliders work.