Variables Debug Component

If you want to iterate quickly you need to have good debug tools. In this Tutorial I will use knowledge from Set/Get Variables to draw widget with list of variables. Basically if you want to show an variable you need to print it out, or create custom widget for specific Actor. Thanks to Debug Component:

  • You will be able to debug any variable in any actor that you want,
  • You don’t need to create any custom print / widgets,

This can be achieved using C++ only but as always it will be super easy! (learn UE4 C++!)

This Tutorial has been created using Unreal Engine 4.11
Make sure you are working on the same version of the engine.

Theory

Debugging is big part of game development. If you think about “what is the quickest way to fix a bug in my system?” during development you will end up with tools helping you quickly target a bug and fix it.

Games are about bugs and having those tools is critical. There is plenty of examples how game developers are fighting with it:

  • Create recording system which allow you to record each gameplay (rewind, get the states of variables etc) so each time someone will find a bug he can mail you with his replay, (hope to write tutorial on this as well),
  • Create bot that will play your game over night when no one is working,
  • Create bot that will endlessly go over your UI and game loop,
  • Create automation tests for some features: eg. generate path to point X 100000000 times – check the results,
  • Be able to quickly go to “debug” mode which can give you information about Actor state, variables – basically anything you want,
  • …and lot’s of more.

All of these examples can be achieved in Unreal Engine 4. I’m not a programmer so I won’t show you how to do such things BUT I will show you small example that everyone can do.

I will create a component that can be attached to any actor and will display variables values that you want. This way you don’t need to put Print nodes in Blueprints to check the variable state. You will be able to see content of all kind of variables. I will use some knowledge from get/set variables tutorial.

Overview

overview

First of all we will create custom structure to store the variable name and value which can be used in ShowDebugWidget.

ShowDebugWidget will be custom UMG Widget class that will have one event to pass the data to Blueprint.

Actual hearth of this system will be ShowDebugComponent – simple Actor Component that can be stored in any Actor. It will create and add Widget Component to the Owner and pass ShowDebugWidget class into it.

Base Structure

Normally this could be stored in TMap but Blueprints can’t extend TMaps yet. I will use structure with the name of variable and its content as String.

Open your project in Visual Studio and head to YOURPROJECTNAME.h file. For me it’s ShooterTutorial.h file. I will create new structure in this main class:

After compiling you will be able to MAKE this structure in Blueprints:

debugvariablestructure

This is how we will store the data. Value is String as it will be displayed in UMG.

Custom C++ UMG Widget

To be able to create custom UMG Widgets you need to open YourProjectName.Build.cs and add UMG to PublicDependency and Slate, SlateCore to PrivateDependency:

It’s needed as we need to create custom event that will drive variables data to the widget.

Now open the editor and add new C++ Class extending from UserWidget named ShowDebugWidget.

We will create an custom event to pass the variables to the Bluprints.

You can read more about exposing events to Blueprints here.  We are declaring OnVariablesUpdated event which will pass DebugVariable array.

C++ file is really simple:

We won’t use C++ implementation of this function as UMG Designer is better for creating layout using these variables.

UMG Reparent to custom class

Now in content browser create new User Widget named UI_MainShowDebugVariables open it and let’s reparent this widget from UserWidget to our custom ShowDebugWidget:

reparent

Find ShowDebugWidget class.

UMG Layout

Create another User Widget named Widget_DebugVariableWithName. This should be normal UserWidget – reparent isn’t needed. Here you can find the hierarchy (remember to delete Canvas Panel!) :

This widget will be added procedurally to UI_MainShowDebugVariables. Open event graph and create one function named UpdateVariable with one input: DebugVariable structure:

UpdateVariableFunction

That’s all in this Widget. Now let’s move to UI_MainShowDebugVariables. It shouldn’t have Canvas Panel as well so please delete it. Next add VerticalBox (it should be the root) and mark it as variable so you can see it in Graph.

In Event Graph search for On Variable Updated:

custom event

Yes, it’s our custom event! As this widget was reparented to ShowDebugWidget we can now add this event to the graph!

EventOnVariablesUpdated

It should be self explanatory. We are just adding Widget_DebugVariableWithName to the vertical box for each item that comes from OnVariablesUpdate event. That’s all here!

ShowDebugComponent

Now the hearth. Create new C++ class extending from ActorComponent named ShowDebugComponent.

Here’s the .h file:

Let’s stop on some of the file.

In this FName array we will be able to add names of variables that we would like to debug.

showdebugcomponentdefaults

This array will be used to UpdateVariables(). Let’s move to actual implementation. Here you can find whole cpp file:

Let’s go step by step.

Constructor:

Constructor is used to set the default values.

BeginPlay:

In BeginPlay I’m creating WidgetComponent which is added to the Owner. I’m configuring the widget as well:

  • Setting the class that should be drawn by the component,
  • Setting size, widget space, collision,

After that I’m storing the reference so I will be able to call our custom event in Tick.

Tick:

Just calling our OnVariablesUpdated custom event using UpdateVariables() function which is returning array of FDebugVariable structure.

UpdateVariables:

This is the most important part of this tutorial. This function is searching for UProperty (variable) by name and export its value as String!

Now if you compile you can create simple test.

Test

It’s so easy! Hope it will be helpful for you guys!

Creating ShooterTutorial takes a lot of my free time.
donateIf you want you can help me out! I will use your donation to buy better assets packs and you will be added to Credits /Backers page as well. Implementing game is taking time but writing about it is taking much more effort!

One thought on “Variables Debug Component

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.