Display FPS with Widget Blueprint

What You Will Build

By the end of this tutorial, your project will show a live FPS counter on screen during gameplay. This is useful when testing levels, checking performance drops, comparing graphics settings, or quickly validating whether a change affects frame rate.

The final setup includes:

• A Widget Blueprint used as a simple HUD
• A Text Block used to display the FPS value
• A binding function that calculates frame rate
• The Get World Delta Seconds node
• A simple FPS formula using 1 / Delta Seconds
• Character Blueprint logic that adds the widget to the viewport

This is not a full profiling system. It is a lightweight in-game FPS display for quick testing and beginner performance awareness.

Why Display FPS in Your Game UI?

Unreal Engine already has editor tools for checking performance, but an in-game FPS widget is still useful. It lets you see performance while playing normally, testing menus, moving through the level, or recording quick gameplay footage.

You can use this FPS display for:

• Quick performance checks while testing
• Comparing before and after optimization changes
• Testing UI, lighting, VFX, and level density impact
• Recording development footage with visible FPS
• Creating debug HUDs for prototypes
• Teaching beginners how frame time relates to FPS

Brutally honest: this widget is not a replacement for Unreal Insights, Stat Unit, Stat GPU, or proper profiling tools. It only gives a simple FPS number. That is enough for a quick HUD test, but not enough for serious performance diagnosis.

Enable FPS in the Viewport First

Before building the custom widget, enable the built-in FPS display in the Unreal Editor viewport. This gives you a baseline number to compare against your widget later.

In the editor viewport, open the viewport options menu and enable the FPS display. You should now see the current editor frame rate on screen.

This step is not required for the widget to work, but it helps verify that your Blueprint calculation is close to what Unreal is reporting.

Create the FPS Widget Blueprint

Now create the UI widget that will display the FPS value.

1. Open the Content Drawer.
2. Right click in your UI folder.
3. Select User Interface.
4. Choose Widget Blueprint.
5. Select User Widget.
6. Name it WBP_FPS_HUD.
7. Open the widget.

The name WBP_FPS_HUD is better than a vague name like Widget or HUDTest. It clearly tells you this is a Widget Blueprint used for an FPS HUD display.

Add the Canvas Panel and Text Block

Inside the widget, you need a simple layout.

1. Make sure the widget has a Canvas Panel as the root.
2. Search for Text Block in the Palette.
3. Drag the Text Block into the Canvas Panel.
4. Move it to the corner of the screen where you want the FPS value to appear.
5. Enable Is Variable.
6. Rename the Text Block to TextBlock_FPS.

A top-left or top-right position usually works best for debug UI because it stays visible without blocking the center of the screen.

Recommended text settings:

• Use a readable font size, such as 24 or 28.
• Use a high contrast color like white, green, or yellow.
• Add a small shadow if the background is bright.
• Keep the text short and clean.

For example, you can display:

FPS: 60

Compile and save the widget before continuing.

Create the FPS Text Binding

The Text Block needs to show a dynamic value instead of static text. To do that, create a binding for the Text property.

1. Select TextBlock_FPS.
2. In the Details panel, find the Text property.
3. Click the binding dropdown.
4. Select Create Binding.

Unreal will create a function that returns the text shown by the Text Block. Inside this function, you will calculate the current FPS and return it as text.

For a small debug widget, binding is acceptable. For a larger HUD with many dynamic values, avoid binding everything blindly. Event-based updates or timers are usually cleaner.

Calculate FPS from Delta Seconds

Inside the binding function, add the Get World Delta Seconds node.

Delta Seconds means the amount of time that passed between the previous frame and the current frame. FPS is the inverse of frame time.

The formula is:

FPS = 1 / DeltaSeconds

For example:

• If Delta Seconds is 0.016, FPS is about 60.
• If Delta Seconds is 0.033, FPS is about 30.
• If Delta Seconds is 0.008, FPS is about 120.

In Blueprint, the logic is:

Get World Delta Seconds
1 / Delta Seconds
Truncate or Round
Convert to Text
Return Text

Use Truncate if you want a simple whole number without decimals. You can also use Round if you prefer a rounded value.

Format the FPS Text

Returning only a number works, but it is clearer to format the display with a label.

Use a Format Text node with this format:

FPS: {Value}

Connect the calculated FPS number into the Value pin. Then return the formatted text from the binding function.

This gives you a clean display like:

FPS: 72

This is much more readable than showing a bare number in the corner of the screen.

Add the FPS Widget to the Viewport

The widget is ready, but it will not appear in-game until you create it and add it to the viewport.

Open your player Character Blueprint, usually BP_ThirdPersonCharacter.

1. Go to the Event Graph.
2. Find or create Event Begin Play.
3. Add a Create Widget node.
4. Set the widget class to WBP_FPS_HUD.
5. Connect the return value to Add to Viewport.
6. Compile and save.

Now the FPS widget will appear automatically when the game starts.

Test the FPS Counter

Press Play. You should see your FPS counter displayed on screen.

Compare the widget value with Unreal’s built-in viewport FPS display. It may not match perfectly every frame because values can update at slightly different times, but it should be close.

If the FPS number changes while you play, the widget is working correctly.

Blueprint Logic Summary

The widget binding logic is:

Get World Delta Seconds
FPS = 1 / Delta Seconds
Truncate FPS
Format Text: FPS: {Value}
Return formatted text

The Character Blueprint logic is:

Event Begin Play
Create Widget: WBP_FPS_HUD
Add to Viewport

That is the full beginner version. Simple, readable, and useful for quick testing.

Why Delta Seconds Works for FPS

Every frame takes a small amount of time to render. Delta Seconds is that frame time in seconds. FPS means frames per second, so dividing one by Delta Seconds gives the current frame rate.

Example:

Delta Seconds = 0.016
1 / 0.016 = 62.5 FPS

This is why a small Delta Seconds value means high FPS, and a large Delta Seconds value means low FPS.

This is also why performance optimization is really about reducing frame time. FPS is just the easier number for most people to read.

FPS vs Frame Time

FPS is useful, but frame time is often better for serious analysis.

FPS

FPS tells you how many frames are rendered per second. It is easy to understand, but it can hide performance spikes.

Frame Time

Frame time tells you how long each frame takes. For example, sixty FPS means each frame has around sixteen point six milliseconds. Thirty FPS means each frame has around thirty three point three milliseconds.

If you are building a real optimization workflow, use this widget as a quick check only. For proper profiling, use Unreal’s built-in profiling tools.

How to Improve the FPS Widget

The basic version works, but you can improve it in several ways.

Add Color Feedback

Change the text color based on FPS. For example, green above sixty, yellow between thirty and sixty, and red below thirty.

Show Frame Time

Display frame time in milliseconds next to FPS. This gives more useful information for performance analysis.

Update with a Timer

Instead of binding the text every frame, update the FPS value every zero point two or zero point five seconds using a timer. This can make the number more readable and avoid constant flickering.

Smooth the FPS Value

FPS can jump around every frame. You can smooth the value by averaging multiple frames before displaying it.

Create a Debug HUD

Add more values like player location, memory status, build version, current map name, or active graphics quality. This turns the FPS counter into a real development HUD.

Binding Method vs Timer Method

This tutorial uses a binding because it is the fastest beginner method. However, there is a better way for a cleaner debug HUD.

Binding Method

• Fast to set up
• Easy for beginners
• No extra events required
• Can update very frequently

Timer Method

• Updates at a controlled interval
• Easier to smooth and format
• Better for larger debug widgets
• Requires a little more setup

For this tiny FPS counter, binding is fine. For a serious debug overlay, use a timer and update the Text Block manually.

Common Problems and Fixes

The FPS Widget Does Not Appear

Make sure Create Widget and Add to Viewport are connected to Event Begin Play. Also confirm that the correct widget class is selected.

The Text Shows Nothing

Check that the Text Block binding returns a valid Text value. Also make sure the Text Block color is visible against the background.

The FPS Value Looks Too Long

Use Truncate or Round to convert the FPS value to a whole number. Raw float values can show too many decimals.

The FPS Value Flickers Too Much

FPS naturally changes frame by frame. If the number is too jumpy, update it with a timer or average several frames before displaying it.

The Widget Value Does Not Match the Editor FPS Exactly

Small differences are normal because the editor display and your widget calculation may update at different moments. The values should still be close.

The FPS Counter Affects Performance

A single Text Block binding is not a big problem. But if you build a large debug UI with many bindings, switch to event or timer based updates.

Frequently Asked Questions

Do I need C++ for this FPS counter?

No. This setup uses Blueprints only.

Can I use this in a packaged game?

Yes, but you may want to hide debug UI in shipping builds or provide a toggle so players do not always see it.

Is this the same as Unreal’s Stat FPS command?

No. This is a custom UI widget that calculates FPS from Delta Seconds. stat fps is Unreal’s built-in console performance display.

Can I toggle the FPS display with a key?

Yes. Store the widget reference in a variable, then use a key input to add or remove it from the viewport.

Can I show FPS and frame time together?

Yes. Use Delta Seconds for frame time and multiply it by one thousand to display milliseconds.

Should I use this for serious optimization?

No. Use it for quick feedback. For serious profiling, use Unreal Insights, Stat Unit, Stat GPU, and other proper profiling tools.

Why use Truncate instead of showing decimals?

Whole numbers are easier to read during gameplay. Decimal FPS values usually add noise without much practical value for a simple HUD counter.

Conclusion

You now have a working FPS display in Unreal Engine 5.5 using Widget Blueprints. The system uses a Text Block, a binding function, Get World Delta Seconds, a simple FPS calculation, and viewport creation logic from the Character Blueprint.

This is a small feature, but it is useful for development. Once you understand this pattern, you can build larger debug HUDs that show performance values, gameplay variables, player location, or system state during testing.

Watch the full tutorial: Unreal Engine 5.5: Display FPS Using Widget Blueprint

More Unreal Engine tutorials: rambod.net