With the advent of UMG, creating a FPS counter becomes ridiculously easy. I figured I should do a short tutorial so people who want to add in a FPS counter to games for a platform other than the development platform they’re using. This is a Blueprint approach so no C++ is necessary, and it’s also super easy!
Alright so let’s begin. Basically you need to have UMG enabled from the Experimental setting in Editor Preferences before you begin. Here’s a screenshot below to help you.
Alright, now that you have UMG enabled, we can actually do stuff! After you have UMG enabled, you need to save the config and restart the editor. Nothing will work if you don’t do this. You need to add a widget blueprint. You can do this by right clicking anywhere in the content browser, but you should probably create a folder or something to keep things organized. I called my Blueprint FPSCounter. You can call it whatever you want.
If you didn’t watch the livestream from Epic Games then you may not be familiar with any of the elements in UMG. To pan around the designer, you can hit Ctrl+Right Click. I don’t know what to do to pan for other platforms currently. You may notice that a CanvasPanel is there by default. CanvasPanel allows you to drag and place widgets wherever you want on the viewable screen. It’s actually quite nifty. now that you’ve kind of familiarized yourself with the Designer Interface, we’re going to get into the meat of it. We basically need a place to render text, so what we’ll do is add a TextBlock as you can see in the screenshot below.
I called mine FPSConterText. You can call it whatever you wish. Now here’s the tricky part. How do you go about reading values from outside into your widget? You’ll have to call a function to make it happen. What you can do with UMG is bind widget values to functions. Here’s how you do it. Once you’re done placing your TextBlock widget, you will need to bind a function to the text portion of the widget. You do this by clicking on Bind under the Content Section and Create Binding. You can see it in the screenshot below.
This will create a new function for you to dictate what the text in the box will be. There are two parts to the function blueprint, the function itself and the event graph. We’ll be using both. For the function portion, we need to bind the text to a variable, so create a text variable and you can call it whatever you want. I called it FPSText. Make sure it’s a Text variable because you may have unexpected results. The final Blueprint you should have is what’s in the screenshot below.
Now we need to basically cast the FPS Data the engine keeps internally to the Text Variable so we can see it in the widget. Event OnTick basically means that whatever action is called on that event is called every frame so it’s a good candidate for our FPS counter. You can take the Delta(seconds) from that event and cast it to a new variable and take the inverse of it. Basically the function we’re looking at to get our FPS is 1/Delta so we can do that. I chose to cast this to another Float variable called FPS. You can call it whatever you want. Afterward we cast that float variable to the text variable we created before. All of these steps are outlined in the Blueprint below.
Ok we’re almost done. We have a TextBlock widget that will display the FPS where ever you want to place it on the screen. All we need to do is render the widget. Thankfully this task is not too difficult. Go open up the Level Blueprint. You want to cast it as soon as you start the level so create a Event BeginPlay node. Create the widget. Make sure you select the widget you created. It’ll be whatever you called the original widget blueprint with and _c after. In my case I called my widget blueprint FPSCounter, so the widget I’m creating is FPSCounter_C. On the return value pin link that with an Add to Viewport Node and you’re good to go. The resulting Blueprint should look pretty much like the blueprint below.
And that’s it, you’re done. If you liked this text tutorial, give a holler below, and I’ll be around sometime next week to write another tutorial on how to use the progress bar to create HP bars, MP bars, and the like.
