Unreal Engine 5 Documentation has been moved to the Epic Developer Community

When working on an Unreal Engine 4 (UE4) project, it's important that the UI elements and text are not too close to the edges of the screen. This is so that these elements don't become distorted. To ensure that this doesn't happen, the TV Safe Zone Debugging tool was created. In this document, we will go over how to use this tool in your UE4 projects.

What are TV Safe Zones

A TV Safe Zone or Safe Area is the term used in television production to describe the area of the television picture that ensures the content can be cleanly viewed by a majority of TV viewers. Generally speaking, the most important content for a TV show will be placed in this area to ensure that it will not be distorted when viewed on a wide range of TV sets.

Difference between Title Safe Zones & Action Safe Zones

UE4 has two different types of TV Safe Zones: the Title Safe Zone and the Action Safe Zone.

• Title Safe Zone - The Title Safe Zone is for UI or Text elements, to make sure they are not cut off or distorted when viewed.

• Action Safe Zone - The Action Safe Zone is used to allow characters or enemies to wander partially offscreen.

TV Safe Zone Commands

In the following section we will go over what commands you can use with the TV Safe Zone as well as the two different ways you can enable and use the TV Safe Zone Debugging in your Unreal Engine 4 (UE4) project.

You can enter the following TV Safe Zone commands right to into the UE4 console.

You can also place the TV Safe Zone commands in your projects DefaultEngine.ini file under the [SystemSettings] section.

Activating the Title Safe Zone Debug Preview

In this section, we will look at activating the Safe Zones in a Debug preview.

1. From the Main Toolbar , go to the Play section and click on the small white arrow to change the Play Mode options.

2. In the Play Modes menu, select New Editor Window (PIE) . This launches the game in a new window.

3. Press Play to launch the game in its own window, then maximize the window to full screen.

4. Next, press the TILDE ( ~ ) key to open the Unreal Console. Type r.DebugSafeZone.Mode 1 , and press the ENTER key to apply it.

5. You should now see a slightly transparent red border placed around the entire play window, as seen in the image below.

   Click for full image.

Adjusting the Size of the Safe & Action Zones

You can adjust the size of either the Safe or Action Zones by entering the following commands into the Unreal Console.

In the images below, the command r.DebugActionZone.ActionRatio was used to decrease to size of the Action Zone from 0.99 all the way down to 0.1.

Adjusting the Alpha of the Safe & Action Zone Overlay

You can increase or decrease the opacity of the Safe & Action Zones by entering the following command into the Unreal console.

In the images below you can see what happens to the opacity of the Safe & Action Zone overlays when the value of r.DebugSafeZone.OverlayAlpha was set from a value of 1.0 to a value of 0.1.

TV Safe Zone Troubleshooting

In the following section we will go over some pieces of information you need to be aware of to ensure that you are using the TV Safe Zone tool correctly.

• Right now the safe areas are defined in terms of the full screen size (the API wasn't really designed for non-consoles) rather than returning the ratios directly to let them be used in windowed mode. This could be changed in the future, but for now you need to be running in windowed fullscreen or fullscreen for the ratio to be correct.

• The UI isn't currently expected to be able to handle this changing at runtime, so if you change the TitleRatio / ActionRatio via the console while running you'll probably need to switch game modes to see the changes (e.g., go from front-end to in-game or vis-versa, or 'open FrontEndScene' again).

• When using this tool on the PS4, you only need the first command, r.DebugSafeZone.Mode 1 as the Safe Zone values are driven by the system setting you can pick in the PS4 OS menus.