Broadcast Overlays

Broadcast overlays are integrated into the simulation, which means you can use them directly in-game or with a broadcasting tool like OBS or XSplit. The overlays comes with a separate control panel can be used to control cameras as well as enable specific broadcast elements. It is available as a web page, which means you can remotely control the connected client from another computer or tablet. The overlay itself is also available as a transparent web page for integration into broadcast tools, but it is also available directly in-game when you watch in full-screen. There is also a system to customize overlays for your own league, tweaking colors, adding your own logos and customizing the style through CSS (cascading style sheets). This customization also includes support for setting safe regions when broadcasting to linear TV, and a way for a single control panel to control multiple clients in case you need to stream the same cameras to different output formats in the highest quality, completely removing the need for expensive frame interpolation hardware.

Using the Control Panel

The control panel works as soon as you have started your rFactor 2 client and you are in a session. You can access it with any web browser by going to:

http://localhost:5397/overlays/controlpanel.html

The control panel is where you keep an eye on all the drivers and control the elements shown on the overlay. The left section of the overlay shows all the drivers with their lap times, status and gaps to cars around the. The right section shows you all the elements that can be enabled, disabled and altered on the overlay. Most elements are pretty self explanatory so playing around with them will show you what they do. Some elements that require some explanation:

The Starting Order Slide shows you an animation of the grid per class. In order to get an accurate animation, it is important to set the starting order right after going into the race session. That way the grid is saved in the correct order. After setting the order you can display the animation during the formation lap or while the gridding timer is counting down.

The Session Results Slide unlocks works when a session is at its end. In the race the winner crosses the line or when qualifying time is over, this slide will unlock and show you the results.

The Race Update Box shows you various updates during a race session, such as fastest laps, class leaders, penalties and social media hashtags at intervals.

As mentioned before, you can visit the control panel by visiting http://localhost:5397/overlays/controlpanel.html. Alternatively if you want to control another PC you can replace "localhost" with the IP address of the PC. If you access the control panel from PC in your local network, no further setup is needed. If you are accessing a PC from an external network, the 5397 port is required to be opened for TCP traffic.

Using the Live Timing page

The live timing page is a simplified version of the control panel with a few customizable features. You can access it with any web browser by going to:

http://localhost:5397/overlays/livetiming.html

NOTE: It is not recommended to open this page up publicly as is, because this would give anyone access to your IP address and broadcast control panel. If you want others to be able to view this page, you should consider streaming the page over something like YouTube or Twitch, or look into a proxy server in order to keep your IP address and control panel guarded.

Using the Overlay

The overlay page is a single page that houses all the overlay elements. You can access it with any web browser by going to:

http://localhost:5397/overlays/controlpanel.html

Showing the overlay inside rFactor 2

The overlays can be rendered on top in the full screen monitor. This option is disabled by default and can be toggled on through the control panel
known issue: having the overlay enabled inside of rFactor 2 might introduce some stutter for some users. Try experimenting with adding the overlay in your streaming software and keeping the overlay disabled inside of rFactor 2 if you experience this.

Showing the overlay in a browser (recommended)

Go to this URL:

http://localhost:5397/overlays/overlays.html

This will show a page with a transparent background that you can integrate into your broadcast tool. 

Showing the overlay in a browser on another device

Rendering the overlay on another device inside your local network you can replace "localhost" with the local IP address of the device.

If you want to render the overlay outside of your local network you will need to use the public IP address of the device. Additionally you will need to open up the 5397 port for TCP traffic. 

Customizing the overlay

You can customize the overlay an various ways. Custom overlays are found in the "overlays" folder inside your rFactor 2 installation. Before creating your first custom overlay, you need to create that folder yourself. The first step of customizing your overlay is unpacking the default_december_2022.zip inside the "overlays" folder and renaming it from "default" to something like your league name or series name. If no "overlays" folder exists in your rFactor 2 install folder, you can create one. The structure should be "your rFactor 2 install folder/overlays/YourOverlayName". Inside this folder you will find some files and additional folders where you can place various assets:

The config.json

The "config.json" is the hearth of the customization of the overlay. This is the place where you add series names, logo's, class colors and various settings for various overlay elements. Keep in mind that the markup of this file needs to stay as is, so keep an eye out for the comma's and brackets. Using a text editor with json support like Sublime Text will show you any markup mistakes you make.

Some of the data that can be edited in the config.json:

• By default the overlay starts in "mixed" mode. This means that all cars in the session are shown in their overall order. Leagues that run multi class races can also choose to have the overlay start in multi class mode by setting "startInMulticlassMode" to true.
• At the top is various information about your series. Series name, series round number, track name, track location and season name can all be filled out here. Event date is filled in automatically so can be left empty.
• In the colors section you can define a base color that is used for some of the general slides. Furthermore you can define a color per car class.
• In the banner, the scrolling interval defines how long each "page" of drivers should stay in the banner.
• In the broll section you can define a background video that will loop in the background. This is great to show something behind the intro slides or on its own when rFactor 2 is in a loading screen. You can toggle the b-roll manually and also have it toggle automatically when enabling specific elements. The video you define here goes in the "videos" folder.
• In the countdown section you can define the length and the shown logos of the countdown slide. Additionally the countdown will also display the series logo which is setup in the "images" section further below. Additionally you can add a unique countdown video in case you want it to be different from the general broll video or default series color. The images go in the "images" folder and video goes in the "videos" folders.
• The event slide will generate some data by default. You can also choose to override this with any data you like in the event slide section
• The extended battle box will always look forwards from the driver in focus first and when it can't find any drivers in front within the determined max gap, it will look backwards. You can limit the amount of drivers shown and the maximum gap they can have to each other here.
• The standings system is a work in progress. The full screen version of the standings will show the top 10 for now and requires you to manually enter data. For the in race season standings you can show customize the amount of shown driver. Also see "the standings.json file" further below.
• In the intro slide section you will be able to define the names of your broadcast crew.
• The race update box automatically shows you all sorts of data throughout race sessions. Use the values here to define the length and interval of this box. For the "hashtags" data see the "socialMedia" further below.
• In the schedule slide you can define the title shown in the schedule slide. You can also toggle the prepend round number option. Setting this to true will add "ROUND 1" text in front of your round names. To define the names and dates, see "the schedule.json file" further below.
• In the tower section you can define how many drivers are shown. The "multiClassRowCount" defines how many drivers are shown when using the multiclass variant of the tower. In the "scrollingListConfig" you can set the tower up to show a static amount of drivers with a further set of rows that scroll trough the field and define the interval of the scroll in milliseconds.
• The Attack Mode section is a subsection of the tower section. Here you can define the amount of seconds that should be displayed towards the end of the Attack Mode animation in the tower.
• The video slide can be used to show trailers and partner videos. It will always show all videos in the defined order. Video files go in the "videos" folder.
• The pitstop timers appear automatically during a race when a driver performs a pitstop. You can define which of the two timers should be enabled.
• In the ads section you can define the logos to be shown in the tower and various other pages. When you need more than 2 logo's, you can add additional logo's inside the "rightCyclingAds" section and define how long each logo should stay on screen.
• In the images section you define the main series logo. This is used in the event slide and the countdown slide. This image goes in the "images" folder
• In the social media section you can define the "hashtags" that appear in the race update box. These are simple text fields, so if you want to display something else than a hashtag, like a website, you can put that here too.
• In the live timing section you can define how the live timing page should present it's data. See the "custom_livetiming.css" file further below for customizing the look of the live timing page.
• In the tires section you can define the letter and color for each of the compounds per car class. The overlay can show a maximum of 2 letters, so a soft could be S and a super soft could be SS. In order for the overlay to pick up the correct compound, you will need to put the correct compound names in at the top of each compound section. Those compound names can be found in the car setup screen.

The images folder

Images and logo's assigned in the "config.json" go in the images folder.

The videos folder

Videos and countdown background video assigned in the "config.json" go in videos folder.

The schedule.json file

The schedule.json is used to create the data used in the schedule slide in the overlay. On the controlpanel you can either show it in a pre-race state or post-race state. This means that it will either highlight the current or next round in your schedule

The standings.json file

The standings are currently only implemented in raw form. This means that you can manually enter all the details and data and show this in the standings slide. This element is pending further development.

The vehicle_info_override.json file

Here you can customize the driver and team related data. If for example a drivers has entered the server with an incorrect driver name you can correct it here. Or if you would like to enter all the driver names that are driving for a specific team into the description. First we need to match the VEH file name. When running a league we advice to use simple VEH naming, such as GT_PRO_01 etc. Within the brackets we then need to either match with a driver name or team name. From here there is a host of data that we can override.

Overriding livery images

You can override or add livery images to the overlay by naming these the same as the VEH file names. You can use the vehicle_info_override.json to add a prefix to this name in case you need to make an image's name more unique. These images go into the images/car folder.

Adding team logo's

You can add team logo's to the overlay by naming these files the same as team names that are defined in the VEH file or in the vehicle_info_override.json. These images go into the images/team folder.

The custom.css file

If you want to add completely customized visuals to the entire overlay then the custom.css file is for you! This file overrides all the CSS that is embedded in the default overlay. Want to change fonts, colors, sizes of the elements or go all out? This is where you can add new CSS code to achieve your new look. Adding custom CSS requires some CSS knowledge so this is somewhat of an advanced step in customizing the livestream overlay.

The custom_livetiming.css file

If you want to add completely customized visuals to the live timing page as well, you can have a look at the custom_livetiming.css file! This file overrides all the CSS that is embedded in the default live timing page. The same principles apply as above.

Selecting and using your custom overlay

After you have created your custom overlay you need to assign it. You can do this by opening the "overlays-config.json" file inside the UserData\player folder in your rFactor 2 installation and changing the name of the overlay. The "customConfig" field is what defines the overlay that is used. The name you type in here needs to match the name you gave the folder of your custom overlay. If you don't have that file yet, you can create it yourself with the following contents:

{
  "customConfig": "MyCoolOverlay",
  "clients": [ ]
}

Controlling multiple rFactor 2 clients

The overlay can control multiple rFactor 2 clients. for when doing PIP or when a production requires rFactor 2 to be broadcast in different signals (for example having one client render at 1080p 60 fps and another at 720p 50 fps). In the "overlays-config.json" file inside the userdata/player folder in your rFactor 2 installation you can enter IP addresses and ports of the target rFactor 2 clients. You will see these IP addresses in the control penal. By clicking and ctrl-clicking them you can toggle which clients should listen to the control panel.

{
  "customConfig": "MyCoolOverlay",
  "clients": [
    {
      "ip": "192.168.1.100",
      "port": 5397
    }
  ]
}

rFactor 2 tips to optimize broadcast quality

• Limit your rF2 framerate to your target signal framerate to ensure a smooth viewing experience.
• In the player.json (found in /UserData/player) set the "Active Sleep Time" parameter to -1. This will ensure your framerate does not drop down while clicking outside of rFactor 2 (on the control panel for example).
• In the player.json set the "Pause If Focus Lost" to false. This will keep rFactor 2 going while clicking outside of rFactor 2 in single player, which makes testing and building overlays a smoother process.
• Making broadcast clients unthrottled will result in more accurate vehicle movement. You can activate this on each client by adding the unthrottled prefix in front of each client. By default this is "_", so if each client is called "broadcast1",  "broadcast2" etc. you can name those "_broadcast1", "_broadcast2" etc.