Setting Up TV Safe Zone Debugging

During working on UI for Unreal Engine (UE) projects, it's important to avoid placing UI elements (text or widgets) too close to the edges of the screen. If you place UI elements near edge of the screen, it can cause them to be distorted depends on device. Use TV Safe Zone Debugging tool for ensure that UI items are located as you need. Get familiar with this document for understanding how to use TV Safe Zone Debugging tool in UE 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.

You can read more about TV Safe Zones and Safe Areas on the following Wikipedia page: TV Safe area.

Difference between Title Safe Zones & Action Safe Zones

UE 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.

The area outside of the Action Safe zone will probably be clipped on displays with overscan, while areas between the Action Safe zone and Title Safe zone may be partially clipped. It's OK to have some action (such as other characters or enemies) occur in that region. The Action Safe zone is the same size as the Title Safe zone on many platforms.

TV Safe Zone Commands

Following section provides commands you can use with the TV Safe Zone. Also section describes two different ways you can enable and use the TV Safe Zone Debugging tool in your UE project.

Use following TV Safe Zone commands via the UE console.

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

	[SystemSettings]
	r.DebugSafeZone.Mode 1
	r.DebugSafeZone.TitleRatio 0.9
	r.DebugSafeZone.ActionRatio 0.9

Copy full snippet

[SystemSettings] r.DebugSafeZone.Mode 1 r.DebugSafeZone.TitleRatio 0.9 r.DebugSafeZone.ActionRatio 0.9

Activating the Title Safe Zone Debug Preview

To correctly display the ratio of the safe areas, you must run the project in either Windowed Fullscreen or Fullscreen mode. If you don't, the safe zone will not display correctly, or will display a smaller size than expected.

Following section shows how to activate the Safe Zones in the Debug preview.

1. From the Main Toolbar, go to the Play buttons panel and click to open drop-down menu. In the Play Modes menu, select New Editor Window (PIE). This launches the game in a new window.

   

2. Enlarge window with launched project for fullscreen view.

   

3. Press the TILDE ( ~ ) key to open the Unreal Console. Do the following:

   • Type r.DebugSafeZone.TitleRatio 0.9, and press the ENTER key to apply it.
   • Type r.DebugSafeZone.OverlayAlpha 0.4, and press the ENTER key to apply it.
   • Type r.DebugSafeZone.Mode 1, and press the ENTER key to apply it.
   

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

   Click image for full view.

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.

It is not possible to have both the Safe and Action Zone active at the same time. To view another zone, you will have to disable the one you are currently viewing and then enable the one you want to view.

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.