Creating a Custom Grid Editor tool in Unreal Engine

Hello there, Dev community!

I'm a beginner, relatively, in the Game Development / Programming sphere. I'm a second year student as of writing this blog post, so please know that while I'm proud of what I've made, there are bound to be many a great mistakes and naïve assumptions I made along the way that someone of much greater understanding wouldn't do.

Now, with your expectations thoroughly lowered, it makes it significantly easier to go into this.

Introducing: Upgrade Tree Editor for Unreal Engine 5.5.4

A few classmates and I decided we wanted to work on a game over summer, while we have plenty of free time. They asked me to create a custom upgrade tree editor for their use, and of course I said yes!

The most I had done in Unreal Engine C++ before this was creating a very simple inventory system, so this was a fantastic challenge. But I had no way to approach it. Not until I found a fantastic tutorial series by one Kirby561. This absolute beauty of a series was easy to follow and introduced me to everything I needed to know, up to a certain point. (I stopped by the end of the second episode, for I had a lot more custom requirements!)

What we needed it to do:

Support a button at the top of a toolbar that opens up a custom UAsset that holds the grid data.
Store node information separately to grid-node data. To access this information in Blueprints.
Support only one-way connections with arrows to showcase direction of connection.
Allow for Drag-And-Drop operations within the grid that only supported our specific data-asset class (and what inherits from it)
Support real-time data editing for data-assets and custom node data that is not separately saved.
Update based on the selected node icon and node borders.

And this list isn't exhaustive, there are more things that I had to do behind the scenes, and still some more things that I need to fix! But I'm sure you're tired of the preamble thus far and want me to actually get into some of the technicalities.

So what's actually going on behind the scenes here for our upgrade tree editor? This isn't meant to act as a tutorial. But, since the Kirby561 tutorial covers a lot of this process, I can cover what I did differently.

Firstly, to get my completely custom slate layout I had to go through so many iterations. Let it be known, I absolutely DESPISE Slate syntax. It's not even that bad, but it's so heavily nested that I could die. As a matter of fact, that's even hidden sneakily in my comments.

Nevertheless, the structure goes like so:

- We create a box, this is the node outer. The main body. This is what we interact with.
⤷ We create our "Border" where we can store our Border images. This has no margin so it has the same size as the node body.
 ⤷ We create our "Icon" with a margin ontop of the border so it is drawn on-top and sits neatly inside the node.
  ⤷ Then we add some other necessities that break the node if we don't include them. Or I'm just bad at removing it. Likely the latter.

The syntax is something like this:

    this->GetOrAddSlot(ENodeZone::Center) 
    .HAlign(HAlign_Fill)
    .VAlign(VAlign_Fill)
    [
        SNew(SBox)
        .WidthOverride(128.0f)
        .HeightOverride(128.0f)
        [
            // Style-less overlay.
            SNew(SOverlay)
            // Here we add our border
            + SOverlay::Slot()
            .HAlign(HAlign_Fill)
            .VAlign(VAlign_Fill)
            [
                SNew(SImage)
                .Image(CustomOutlineFrame)
                .ColorAndOpacity(this, &SUpgradeAssetGraphNode::GetRimHighlightColor)
            ]
            // Here we add our icon, with a margin to make it sit neatly inside.
            + SOverlay::Slot()
            .HAlign(HAlign_Fill)
            .VAlign(VAlign_Fill)
            .Padding(FMargin(16.0f))
            [
                SNew(SImage)
                .Image(CustomInteriorIcon)
                .ColorAndOpacity(FLinearColor::White) 
            ]
            // Then we add some other (un)necessary stuff that will, for some reason upon removal, completely break the node.
            + SOverlay::Slot()
            .HAlign(HAlign_Fill)
            .VAlign(VAlign_Fill)
            [
                SNew(SVerticalBox)
                + SVerticalBox::Slot()
                .HAlign(HAlign_Center)
                .VAlign(VAlign_Center)
                [
                    SNew(STextBlock)
                    .Text(FText::FromString(TEXT(" "))) // Why can I not remove this???
                    .TextStyle(FAppStyle::Get(), "Graph.Node.NodeTitle")
                    .ColorAndOpacity(FLinearColor::White)
                ]
                + SVerticalBox::Slot()
                .AutoHeight()
                .Padding(FMargin(2.0f, 2.0f))
                [
                    SNew(SHorizontalBox)
                    .Visibility(EVisibility::Collapsed) // Collapsed boxes that on removal will cause a breakpoint
                    + SHorizontalBox::Slot().AutoWidth()[ LeftNodeBox.ToSharedRef() ]
                    + SHorizontalBox::Slot().AutoWidth()[ RightNodeBox.ToSharedRef() ]
                ]
            ]
        ]
    ];

There are some other things that go into play here! Firstly, our node icon and borders can change at run-time, which is why we've given them properties instead of hard-paths. These properties are retrieved just above like so:

    const FSlateBrush* CustomOutlineFrame = GetNodeOutlineBorderBrush();
    const FSlateBrush* CustomInteriorIcon = GetNodeBodyBrush();

Now, slate brushes are weird. And so we had to define ours as mutable, rather than static or const, because without either one of these key-words, the compiler would throw a fit at me. (For reference, I'm using Visual Studio Code) But we need a way to get the possibly constantly updating icons and borders. (Changing this to a singular utility function, for some reason, also caused the same compiler errors as before. So, whatever.)

const FSlateBrush* SUpgradeAssetGraphNode::GetNodeBodyBrush() const
{
    UUpgradeAssetGraphNode* castNode = Cast<UUpgradeAssetGraphNode>(GraphNode);
    if (!castNode || !castNode->GetAttachedData() || !castNode->GetAttachedData()->nodeIcon) { return FAppStyle::GetBrush("Graph.Node.Body"); }

    UTexture2D* CurrentIcon = castNode->GetAttachedData()->nodeIcon;

    if (!DynamicNodeIconBrush.IsValid())
    {
        DynamicNodeIconBrush = MakeShareable(new FSlateBrush());
    }

    DynamicNodeIconBrush->DrawAs = ESlateBrushDrawType::Image;
    DynamicNodeIconBrush->SetResourceObject(CurrentIcon);
    DynamicNodeIconBrush->ImageSize.X = CurrentIcon->GetSurfaceWidth();
    DynamicNodeIconBrush->ImageSize.Y = CurrentIcon->GetSurfaceHeight();

    return DynamicNodeIconBrush.Get();
}

const FSlateBrush* SUpgradeAssetGraphNode::GetNodeOutlineBorderBrush() const
{
    UUpgradeAssetGraphNode* castNode = Cast<UUpgradeAssetGraphNode>(GraphNode);
    if (!castNode || !castNode->GetAttachedData()->nodeBorder)
    {
        return FCoreStyle::Get().GetBrush("NoBrush");
    }

    if (!DynamicNodeBorderBrush.IsValid())
    {
        DynamicNodeBorderBrush = MakeShareable(new FSlateBrush());
    }

    DynamicNodeBorderBrush->SetResourceObject(castNode->GetAttachedData()->nodeBorder);
    DynamicNodeBorderBrush->DrawAs = ESlateBrushDrawType::Image;
    DynamicNodeBorderBrush->Margin = FMargin(16.0f, 16.0f, 16.0f, 16.0f);

    return DynamicNodeBorderBrush.Get();
}

Despite the fact that it should be getting this information each time the node is redrawn, it doesn't. Because it doesn't completely redraw the node every frame, that would be an absolute waste of resources. So, we're also not going to do that every frame. Instead, we'll attach delegates to our nodes!

We can do this whenever we create a node through our schema:

    if (NewGraphNode->GetAttachedData()) {
        NewGraphNode->GetAttachedData()->OnIconChanged.RemoveDynamic(NewGraphNode, &UUpgradeAssetGraphNode::HandleIconChanged);
        NewGraphNode->GetAttachedData()->OnIconChanged.AddDynamic(NewGraphNode, &UUpgradeAssetGraphNode::HandleIconChanged);
        NewGraphNode->GetAttachedData()->OnBorderChanged.RemoveDynamic(NewGraphNode, &UUpgradeAssetGraphNode::HandleIconChanged);
        NewGraphNode->GetAttachedData()->OnBorderChanged.AddDynamic(NewGraphNode, &UUpgradeAssetGraphNode::HandleIconChanged);
    }

And when we're loading the grid from runtime, using the same method above.

This ensures new and old nodes are safely updated when they change, so they can call a grid-redraw which updates their looks! This took me a while to figure out, because I didn't realize that I needed to force a redraw myself once data had changed, but it was simple enough when I realized I could do this!

I'm sure I could just as easily implement this on the node itself, and as a matter of fact, it's actually kind of stupid that I don't, so... Expect a change coming in v1.02!

In any case, we needed to create some custom connection logic. Now, Unreal Engine already has pins and it would be so easy to just use the pin system that they have, right? Well! Do I have news for you.

I didn't use that at all! Instead, I stored node connections in a TArray<FGuid> called _unlocks and created some custom omni-directional connection logic! Not to say that was difficult to do, by any means. Just do some simple logic checks!

// Add a new (validated) connection to the node.
void UUpgradeAssetGraphNode::AddNewUnlockConnection(FGuid nodeId) {
    // Firstly, prevent adding duplicates.
    if (GetNodeUnlocks().Contains(nodeId)) { return; }
    // Modify the graph.
    if (GetGraph()) { GetGraph()->Modify(); }
    this->Modify();

    // Iterate over all of the nodes, find the node of the GUID that you're looking for.
    for (UEdGraphNode* node : this->GetGraph()->Nodes) {
        UUpgradeAssetGraphNode* castNode = Cast<UUpgradeAssetGraphNode>(node);
        if (!castNode || castNode->GetNodeId() != nodeId) { continue; }
        // If it is equal but the other node contains your GUID, return.
        if (castNode->GetNodeId() == nodeId && castNode->GetNodeUnlocks().Contains(GetNodeId())) { return; }
    }
    // Otherwise, add it to our unlocks (Drawn in SUpgradeAssetGraphNode)
    _unlocks.Add(nodeId);
    // Notify the graph that it has changed.
    this->GetGraph()->NotifyGraphChanged(); 
}

And you can call it a day!

Now, this did connect them, and it ensured that connections could only be one-way, but how did we draw the arrows?

This is where I created a utility class that allows us to draw things with some nice and simple maths! And we call it like so:

// This is called whenever the engine wants to render whatever we have for it to render.
// There are two bits of logic that we want to handle here.
// Firstly  : Are we currently dragging a wire?
// Secondly : Do wires already exist?
// This allows us to draw persistent wires while we're dragging a wire from a node.
//
// We override the typical OnPaint() call so that we're able to draw in a completely custom way.
int32 SUpgradeAssetGraphNode::OnPaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled) const
{
    // So first thing's first, we actually draw everything the engine wants to draw. This is necessary for Slate to render everything that we have, including the node body and text / image.
    int32 MaxLayerId = SGraphNode::OnPaint(Args, AllottedGeometry, MyCullingRect, OutDrawElements, LayerId, InWidgetStyle, bParentEnabled);

    FVector2D NodeSize = AllottedGeometry.GetLocalSize();
    FVector2D OriginPoint = NodeSize * 0.5f;
    float BoxHalfWidth = NodeSize.X * 0.5f;
    float BoxHalfHeight = NodeSize.Y * 0.5f;
    bool bDoAntiAliasing = true;

    UUpgradeAssetGraphNode* castNode = Cast<UUpgradeAssetGraphNode>(GraphNode);

    // Here we draw our active wire.
    if (bIsActivelyDraggingWire)
    {
        // We first get the direction (normal) of our mouse from the middle point of the node.
        FVector2D RayDirection = (LiveDragMousePos - OriginPoint).GetSafeNormal();
        // We then set the line to begin at the Origin Point, as a fallback.
        FVector2D LineStart = OriginPoint;
        // And we call our custom function to draw for us!
        CamiSlateUtils::DrawGridLineToMouse(LineStart, LiveDragMousePos, FVector2D(BoxHalfWidth, BoxHalfHeight), OutDrawElements, AllottedGeometry, MaxLayerId);
        MaxLayerId++;
    }

    // Now that we've drawn the lines that we've been dragging, we also need to draw persistent lines for connections that already exist.
    // Connection handling logic is done in UpgradeAssetGraphSchema. We're just drawing based on that through our classes _unlocks member 
    // TODO (Change this to become a getter that returns a reference) Only in UpgradeAssetGraphSchema do we need to alter it.
    if (GraphNode && castNode->GetNodeUnlocks().Num() > 0)
    {
        for (FGuid unlock : castNode->GetNodeUnlocks()) {
            UUpgradeAssetGraphNode* targetNode = castNode->GetNodeWithGUID(unlock);

            if (!targetNode) { continue; }

            FVector2D targetNodePos = FVector2D(targetNode->NodePosX, targetNode->NodePosY);
            FVector2D sourceNodePos = FVector2D(castNode->NodePosX, castNode->NodePosY);
            FVector2D localTargetCenter = OriginPoint + (targetNodePos - sourceNodePos);

            CamiSlateUtils::DrawGridLineBetweenNodes(OriginPoint, localTargetCenter, FVector2D(BoxHalfWidth, BoxHalfHeight), OutDrawElements, AllottedGeometry, MaxLayerId);
            MaxLayerId++;
        }
    }
    return MaxLayerId;
}

DrawGridLineToMouse() Does as you would expect! It draws a straight line towards the mouse and draws an arrowhead at the point of the mouse. If you let go over a node, it tries to create a connection and if it succeeds, it will then continue to persistently draw the connection every frame. Since this is an editor tool, and this only happens when the editor is open and the node is rendered, I don't wholly believe this to be too big an optimization issue. Until you maybe get to having thousands of lines on screen at once... Which, if you do manage, is impressive.

DrawGridLineBetweenNodes() Does mostly the same, except between the mid-point of both nodes that it is trying to draw-between. It also gets the closest point on the outside of the node, so that it draws around like a square. This maths, to be entirely honest, went way beyond me at first. I didn't even know what an AABB was until I tried to get the closest point on a square.

Here's the code for that!:

// Here we'll return the closest point from Point A (Origin) in the in direction (Direction) Usually referencing the SafeNormal of a different object or point.
// Returns an FVector2D of this closest point.
FVector2D CamiMath::GetClosestPointAABB(FVector2D Origin, FVector2D Direction, FVector2D BoxHalfExtent, float InternalOffset) {
    // We get the current hard direction that this desired area is going in (Using FMath::Sign() to determine whether it is +1 or -1). Multiply it by our width and divide the result of that calculation by the ray direction.
    // This ensures we calculate the closest point from the box not only in the signed direction (- or +) but also in the EXACT direction (/ RayDirection)
    float _X = (Direction.X != 0.0f) ? (FMath::Sign(Direction.X) * BoxHalfExtent.X) / Direction.X : FLT_MAX;
    float _Y = (Direction.Y != 0.0f) ? (FMath::Sign(Direction.Y) * BoxHalfExtent.Y) / Direction.Y : FLT_MAX;
    // We then get the smallest one and choose between width and height. This means this is the closest point.
    float _Min = FMath::Min(_X, _Y);

    // This is where we adjust it to be from the center of the origin point.
    // We get the origin point, add the direction of the ray multiplied by the MAXIMUM of 0.0f and T_Min.
    return (Origin + (Direction * FMath::Max(0.0f, _Min - InternalOffset)));
}

This returns the closest point on the square (unfortunately still in a radial way, I'm sure some maths or programming genius could come up with a way to make it straight from the edge of a square and curved from the corners only. But I'm no genius!)

Now, this is great and all. Our nodes are drawing cleanly, we have connections going between them, but how do we actually save this data? And we don't even have drag-and-drop yet! Or a button on the top of the screen!

Slow down, for one. I'm not good at writing these blogs yet, this is my first time! Pacing is not my forte.

We save and load our grid with two simple functions, although we have to override some other base functions to actually get saving to work, loading is super simple!

void UpgradeAssetEditorApp::UpdateEditorGraphFromWorkingAsset() {
    if (_workingAsset->_graph == nullptr || _workingGraph == nullptr) { return; }

    // Here we'll check whether it is dirty, if it was already dirty we wont force a clean. If not, we will.
    const bool bWasInitiallyClean = !_workingAsset->GetPackage()->IsDirty();

    // Modify the graph for Transactional handling.
    _workingGraph->Modify();

    // For each node, lets update the node data to what it was saved as.
    for (UUpgradeRuntimeNode* runtimeNode : _workingAsset->_graph->Nodes) {
        if (!runtimeNode) continue;

        // Lets create a new node with no name and set it to be RF_Transactional so that we can track undo/redo
        UUpgradeAssetGraphNode* newNode = NewObject<UUpgradeAssetGraphNode>(_workingGraph, UUpgradeAssetGraphNode::StaticClass(), NAME_None, RF_Transactional);

        // And set the positions.
        newNode->NodePosX = runtimeNode->position.X;
        newNode->NodePosY = runtimeNode->position.Y;
        newNode->SetNodeId(runtimeNode->nodeId);
        if (runtimeNode->attachedData) { 
            newNode->_attachedData = runtimeNode->attachedData;
        }


        // Bind our delegates. This is important for old assets being reminded that they can be updated.
        if (newNode->GetAttachedData()) {
            newNode->GetAttachedData()->OnIconChanged.RemoveDynamic(newNode, &UUpgradeAssetGraphNode::HandleIconChanged);
            newNode->GetAttachedData()->OnIconChanged.AddDynamic(newNode, &UUpgradeAssetGraphNode::HandleIconChanged);
            newNode->GetAttachedData()->OnBorderChanged.RemoveDynamic(newNode, &UUpgradeAssetGraphNode::HandleBorderChanged);
            newNode->GetAttachedData()->OnBorderChanged.AddDynamic(newNode, &UUpgradeAssetGraphNode::HandleBorderChanged);
        }

        // Force connections through this method in order to notify changes (This allows the engine to keep up and store the previously mentioned undo/redo Transactions)
        for (FGuid unlock : runtimeNode->unlocks) {
            newNode->AddNewUnlockConnection(unlock);
        }

        // Add the node to the graph
        _workingGraph->AddNode(newNode, true, true);
    }
    // Mark the node as clean since we're just loading data, but some of these functions would actually mark us as dirty.
    if (bWasInitiallyClean)
    {
        MarkAsClean();
    }
}

There was a little bug in v1.0 where I wasn't correctly checking whether attachedData was valid before applying it to the new node and force-deleting a data-asset that you were using from the content browser would cause a breakpoint as it tried to access memory that no longer existed! Luckily, this is fixed in the latest version and reflected like so. But some of these data-assets are nested, which I've not yet tested as of writing this blog, and may fix in the coming v1.02 update!

Now our saving set-up is a little different to our loading set-up. In-fact, we save twice!

// This is how we save our graph to the asset.
void UpgradeAssetEditorApp::UpdateWorkingAssetFromGraph() {
    // Should there be no asset, nor graph, we cannot save anything.
    if (_workingAsset == nullptr || _workingGraph == nullptr) { return; }
    // Otherwise, we can modify our asset.
    _workingAsset->Modify();

    // If we have no runtime graph (to store the data for further editing) we need to make one.
    if (_workingAsset->_graph == nullptr) {
        _workingAsset->_graph = NewObject<UUpgradeRuntimeGraph>(_workingAsset, TEXT("RuntimeGraph"), RF_Transactional | RF_Public);
    }

    // We'll then "cast" and set the graph to this runtime graph. 
    UUpgradeRuntimeGraph* runtimeGraph = _workingAsset->_graph;
    runtimeGraph->Modify();
    // Empty the graph's existing data.
    runtimeGraph->Nodes.Empty();
    // And the asset's stored node data.
    _workingAsset->NodeData.Empty();

    // Then iterate over our current graph's nodes.
    for (UEdGraphNode* uiNode : _workingGraph->Nodes) {
        // We'll cast to UUpgradeAssetGraphNode to ensure that what we're saving is what we want.
        UUpgradeAssetGraphNode* castNode = Cast<UUpgradeAssetGraphNode>(uiNode);
        if (!castNode) continue;
        // We'll then get the outer that we'll store the node on.
        UObject* NodeOuter = runtimeGraph;
        // We'll make a unique name for the object so it is stored in memory correctly and not overwritten by anything else.
        FName UniqueNodeName = MakeUniqueObjectName(NodeOuter, UUpgradeRuntimeNode::StaticClass(), *castNode->GetNodeId().ToString());
        // Then finally create the node. Store it as RF_Transactional for undo-redo and RF_Public so it's visible.
        UUpgradeRuntimeNode* runtimeNode = NewObject<UUpgradeRuntimeNode>(NodeOuter, UniqueNodeName, RF_Transactional | RF_Public);
        // Then we can FINALLY set the data.
        runtimeNode->position = FVector2D(castNode->NodePosX, castNode->NodePosY);
        runtimeNode->unlocks = castNode->GetNodeUnlocks();
        runtimeNode->nodeId = castNode->GetNodeId();
        runtimeNode->attachedData = castNode->GetAttachedData();
        // And add the runtime node to the graph.
        runtimeGraph->Nodes.Add(runtimeNode);
        // Now we store the node info to access this through blueprints.
        FUpgradeNodeInfo BPNodeInfo;
        BPNodeInfo.Position = FVector2D(castNode->NodePosX, castNode->NodePosY);
        BPNodeInfo.Unlocks = castNode->GetNodeUnlocks();
        BPNodeInfo.NodeId = castNode->GetNodeId();
        BPNodeInfo.attachedData = castNode->GetAttachedData();
        // And add that to our node data array.
        _workingAsset->NodeData.Add(BPNodeInfo);
    }
    // We can now mark it as clean to remove the dirty flag.
    MarkAsClean();
}

Firstly, we save to our actual grid, so we can actually re-open it safely. But then we save to our NodeData array! This is an array of structs called FUpgradeNodeInfo which stores our blueprint-accessible information such as:

Position
attachedData
NodeId
Unlocks

Notice the inconsistency in naming convention, curse you past me for making renaming this shit so annoying! (I'm too lazy to ctrl+f and replace; It is terminal.)

But thanks to storing it as so, whenever we have our UpgradeAsset as a property, we can now access the node data easily! But... Our node data doesn't have upgrade-tracking, and as a matter of fact it shouldn't. Because we're using data assets, we don't want to alter the information transiently, we need to do so through a wrapper struct that we can call FUpgradeRuntimeNodeProgress

And all this would store is:

USTRUCT(BlueprintType)
struct FUpgradeNodeRuntimeProgress {
    GENERATED_BODY()

    UPROPERTY(BlueprintReadWrite, Category = "Upgrade Runtime")
    int32 UpgradeCount = 0;

    UPROPERTY(BlueprintReadWrite, Category = "Upgrade Runtime")
    bool bIsUnlocked = false;
};

Whether it is unlocked, and how many times it has been upgraded (should it be a multi-upgrade node) But notice... This isn't stored with a node, nor is it stored in our Upgrade Asset class, so where does it actually go?

INTRODUCING, THE UPGRADE TREE COMPONENT:

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnComponentUpgradeHandler, FUpgradeNodeInfo, Upgrade);
DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnComponentUpgradedFullyHandler, FUpgradeNodeInfo, Upgrade);
DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnUnlockConnectedNodeRequirementsMet, FUpgradeNodeInfo, Upgrade);

UCLASS(BlueprintType, meta=(BlueprintSpawnableComponent))
class UPGRADEASSETRUNTIME_API UUpgradeTrackerComponent : public UActorComponent {
    GENERATED_BODY()

    UUpgradeTrackerComponent();
public:
    // Our upgrade tree data.
    UPROPERTY(EditDefaultsOnly, BlueprintReadOnly, Category = "Upgrade Tree")
    TObjectPtr<UUpgradeAsset> UpgradeTree;
    // When we alter our upgrade progress, we want to announce that.
    UPROPERTY(BlueprintAssignable, Category = "Upgrade Tree|Delegates")
    FOnComponentUpgradeHandler OnNodeProgressChanged;
    // Same with when the node is completely maxed, which allow nodes that require fully-upgrading them to unlock others.
    UPROPERTY(BlueprintAssignable, Category = "Upgrade Tree|Delegates")
    FOnComponentUpgradedFullyHandler OnNodeMaxedOut;
    // Once requirements are met, we can then emit this so other nodes can be unlocked!
    UPROPERTY(BlueprintAssignable, Category = "Upgrade Tree|Delegates")
    FOnUnlockConnectedNodeRequirementsMet OnUnlockNodeRequirementsMet;

private:

    // Savable struct map that stores FGuid (Not the data asset, but the ID pointing to it) and the progress.
    UPROPERTY(EditAnywhere, Category = "Upgrade Tree|Runtime")
    TMap<FGuid, FUpgradeNodeRuntimeProgress> UpgradeProgressMap;

public:

    UFUNCTION(BlueprintPure, Category = "Upgrade Tree|Getters")
    int32 GetUpgradeCount(FGuid NodeID) const;

    UFUNCTION(BlueprintPure, Category = "Upgrade Tree|Getters")
    bool IsNodeUnlocked(FGuid NodeID) const;

    UFUNCTION(BlueprintPure, Category = "Upgrade Tree|Getters")
    bool IsNodeMaxLevel(FGuid NodeID) const;

    UFUNCTION(BlueprintPure, Category = "Upgrade Tree|Getters")
    FUpgradeNodeRuntimeProgress GetUpgradeProgress(FGuid NodeID);

    UFUNCTION(BlueprintCallable, Category = "Upgrade Tree|Setters")
    void SetUpgradeProgress(FGuid NodeID, int32 NewUpgradeCount, bool bNewIsUnlocked);

    UFUNCTION(BlueprintCallable, Category = "Upgrade Tree|Mutators")
    bool TryIncrementUpgrade(FGuid NodeID);

};

The ONLY user-facing class aside from the Upgrade Asset that comes with built-in functions and can easily be attached to any actor! This stores our upgrade tree, our delegates that we can bind to in blueprints and our progress map, which is a private TMap of FGuid and FUpgradeNodeRuntimeProgress for nice and easy saving!

Why do we use FGuid?

What a fantastic question! It's because that's the Globally unique identifier for our nodes, which we save and load from runtime (see the save and load functions previously showcased) to ensure pure persistence! We can then get a node by its FGuid to get progress, data and other such information!

We also include a bunch of forward-facing functions to make the end-user's job that much easier!

Finally, I think it's time we get into drag-and-drop. This is already long enough as-is, and as a writing exercise it's certainly doing its job. But I'd like to go home to my family now.

Our drag and drop is actually a little bit of a hack, more than anything else. We create our own little SLeafWidget that acts as an overlay that goes on-top of the grid. It is ONLY visible when a drag-and-drop operation is valid, and allows us to drop our custom UUpgradeNodeDataAsset onto the grid to construct a data asset!

class SUpgradeGraphCanvasDropOverlay : public SLeafWidget
{
public:
    // Here we can define our own arguments for our constructor. Since we're a slate widget, this is how we do that.
    SLATE_BEGIN_ARGS(SUpgradeGraphCanvasDropOverlay) {}
        SLATE_ARGUMENT(UEdGraph*, GraphToEdit)
        SLATE_ARGUMENT(TWeakPtr<class UpgradeAssetEditorApp>, AppContext)
    SLATE_END_ARGS()

    // We need to store some little doohickeys here for access in our Drag and Drop operations.
    UEdGraph* BoundGraph = nullptr;
    TWeakPtr<class UpgradeAssetEditorApp> WeakApp; 

    void Construct(const FArguments& InArgs){
        BoundGraph = InArgs._GraphToEdit;
        WeakApp = InArgs._AppContext;
    }

    virtual FVector2D ComputeDesiredSize(float) const override { return FVector2D::ZeroVector; }
    virtual int32 OnPaint(const FPaintArgs&, const FGeometry&, const FSlateRect&, FSlateWindowElementList&, int32 LayerId, const FWidgetStyle&, bool) const override { return LayerId; }

    virtual EVisibility GetVisibility() const;
    virtual void OnDragEnter(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) override;
    virtual FReply OnDragOver(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) override;
    virtual void OnDragLeave(const FDragDropEvent& DragDropEvent) override;
    virtual FReply OnDrop(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) override;
};

.cpp:

// This ensures that we can only interact with this slate overlay IF we're currently dragging an asset.
EVisibility SUpgradeGraphCanvasDropOverlay::GetVisibility() const {
    // So here we check the drag-drop operation.
    TSharedPtr<FDragDropOperation> DragDropOp = FSlateApplication::Get().GetDragDroppingContent();
    // Here we validate, does it exist and is it an asset we're carrying?
    if (DragDropOp.IsValid() && DragDropOp->IsOfType<FAssetDragDropOp>()){
        // We then create an operation
        TSharedPtr<FAssetDragDropOp> AssetOp = StaticCastSharedPtr<FAssetDragDropOp>(DragDropOp);
        // Get the assets
        for (const FAssetData& AssetData : AssetOp->GetAssets()){
            // If the asset is a TSubclassOf (or UUpgradeNodeDataAsset) then we're fine to proceed, and we allow interactions.
            if (AssetData.GetClass() && AssetData.GetClass()->IsChildOf(UUpgradeNodeDataAsset::StaticClass())){
                // Force interactions with visibility.
                return EVisibility::Visible; 
            }
        }
    } 
    // Completely invisible to click-intercepts otherwise. Standard grid selection passes straight through!
    return EVisibility::HitTestInvisible; 
}

// Here we'll override the on-enter functionality of the grid. This needs to be a void, as is the parent function.
void SUpgradeGraphCanvasDropOverlay::OnDragEnter(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) {
    // Make sure our drag-drop op is valid as always.
    TSharedPtr<FDragDropOperation> DragDropOp = DragDropEvent.GetOperation();
    if (DragDropOp.IsValid() && DragDropOp->IsOfType<FAssetDragDropOp>()) {
        // Create our asset drag drop.
        TSharedPtr<FAssetDragDropOp> AssetOp = StaticCastSharedPtr<FAssetDragDropOp>(DragDropOp);
        // And create a neat little tooltip.
        AssetOp->SetToolTip(
            FText::FromString("Release to Create Upgrade Node"),
            // We get a little tick box if we do this.
            FAppStyle::GetBrush(TEXT("Graph.ConnectorFeedback.OK"))
        );
        return;
    }
    return;
}

// We keep the function going, through this.
FReply SUpgradeGraphCanvasDropOverlay::OnDragOver(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) {
    return FReply::Handled();
}

// Default to whatever the drag and drop operation actually wants.
void SUpgradeGraphCanvasDropOverlay::OnDragLeave(const FDragDropEvent& DragDropEvent) {
    TSharedPtr<FDragDropOperation> DragDropOp = DragDropEvent.GetOperation();
    if (DragDropOp.IsValid() && DragDropOp->IsOfType<FAssetDragDropOp>()) {
        StaticCastSharedPtr<FAssetDragDropOp>(DragDropOp)->ResetToDefaultToolTip();
    }
}

// Create all nodes that we've dragged safely.
FReply SUpgradeGraphCanvasDropOverlay::OnDrop(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent) {
    // Ensure validity.
    TSharedPtr<FDragDropOperation> DragDropOp = DragDropEvent.GetOperation();
    if (!DragDropOp.IsValid() || !BoundGraph) return FReply::Unhandled();

    // Get the operation and validate that as-well.
    TSharedPtr<FAssetDragDropOp> AssetOp = StaticCastSharedPtr<FAssetDragDropOp>(DragDropOp);
    if (!AssetOp.IsValid()) return FReply::Unhandled();

    // Turn our mouse coordinates into local coordinates on the grid. 
    FVector2D LocalDropPos = MyGeometry.AbsoluteToLocal(DragDropEvent.GetScreenSpacePosition());

    FVector2D GraphViewOffset = FVector2D::ZeroVector;
    float GraphZoom = 1.0f;

    if (TSharedPtr<UpgradeAssetEditorApp> PinApp = WeakApp.Pin()) {
        if (TSharedPtr<SGraphEditor> GraphPanel = PinApp->GraphEditorWidget) {
            GraphPanel->GetViewLocation(GraphViewOffset, GraphZoom);
        }
    }

    // Here we'll create an offset and drop it exactly where our mouse is, relative to the zoom on the grid.
    FVector2D GraphDropPos = (LocalDropPos / GraphZoom) + GraphViewOffset;

    // We create this just for checking.
    bool bDroppedAnyValidAssets = false;

    // We can now loop over all of the asset data in our drag-drop-operations asset list.
    for (const FAssetData& AssetData : AssetOp->GetAssets()) {
        // We'll cast the asset to our UUpgradeNodeDataAsset, and if it's invalid we'll just move onto the next object.
        UUpgradeNodeDataAsset* LoadedAsset = Cast<UUpgradeNodeDataAsset>(AssetData.GetAsset());
        if (!LoadedAsset) continue;

        // If we havent dropped any assets, we'll drop it and modify the graph. We'll also update bDroppedAnyValidAssets and begin our transaction here, since this is the starting point.
        if (!bDroppedAnyValidAssets) {
            GEditor->BeginTransaction(TEXT("UpgradeGraphEditor"), FText::FromString("Drop Upgrade Asset"), BoundGraph);
            BoundGraph->Modify();
            bDroppedAnyValidAssets = true;
        }
        // We'll now create a new ui node using our factory.
        UUpgradeAssetGraphNode* NewUiNode = NewObject<UUpgradeAssetGraphNode>(BoundGraph, UUpgradeAssetGraphNode::StaticClass(), NAME_None, RF_Transactional);
        // Force set the position to where our mouse was.
        NewUiNode->NodePosX = GraphDropPos.X;
        NewUiNode->NodePosY = GraphDropPos.Y;
        NewUiNode->SetNodeId(FGuid::NewGuid());
        NewUiNode->SetAttachedData(LoadedAsset);
        // We'll now add a new node to our graph that we got through our constructor.
        BoundGraph->AddNode(NewUiNode, true, true);
        // And we'll force-redraw the node.
        NewUiNode->ReconstructNode();
        // We'll also add a little offset to the drop, for any future assets.
        GraphDropPos.X += 40;
        GraphDropPos.Y += 40;
    }
    // If we've dropped any.
    if (bDroppedAnyValidAssets) {
        // We can now end our transaction and go out of scope.
        GEditor->EndTransaction();
        BoundGraph->NotifyGraphChanged();
        return FReply::Handled();
    }
    // If nothing happened, we didn't handle it.
    return FReply::Unhandled();
}

I'm not really going to go into too much detail about how this works, we're simply hijacking functions that already exist and doing our own stuff with it! And I've heavily commented every function so that you can see what it does and why we do it!

If you'd like to check out the tool's code, feel free to see it on my GitHub

Feel free to ask any questions, offer criticism and advice and follow me for my future work!

Thank you very much for spending the time to read this.

Creating a Custom Grid Editor tool in Unreal Engine

Tags

Author

Stats

Published

You Might Also Like

Thoughts on Codingame 2026 Spring challenge

Building Real-Time Apps in Node.js with Rivalis: WebSockets, Rooms, Actors, and a Binary Wire

What Google Play's I/O 2026 Updates Look Like From a Solo Indie Puzzle Developer

Unity vs Unreal: 5 Things I Had to Relearn the Hard Way

I coded an Air Hockey game where a local SLM hacks the DOM to cheat (and trash-talks you) 🤖🏓

The Game Industry Burned?! Here's What's Actually Being Built in the Ashes.