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

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.

Tycoon C++ UE4 direction update

Another tycoon update, this one was quite tricky to figure out for some reason, but I’m finally able to change the bend direction of the tycoon mesh.

Prototyping the concept in Maya

Random tests in Unreal

Breakdown

  1. Rotate each point around the forward axis of the track piece (This is the ‘direction’ input).

  2. Then rotate each point around the Y axis (the actual bend operation).

  3. Apply the inverse rotation at the point again, to align the piece correctly.

Next steps:

  • Make the anchor mechanism more stable (Code that calculates the new rotation for each piece).
  • Add ‘axis’ control. (Ability to change the bend axis).
  • Add sliders to UI.