Broadcast Overlays

Broadcast overlays are now integrated into the simulation since build 1118. That 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 Overlay

The overlay is rendered inside the full screen monitor of rFactor 2 if you the new UI. If you require the overlay to be displayed outside of rFactor 2, you can visit the overlay by visiting http://localhost:5397/overlays/overlays.html. If you want to render the overlay externally and from another PC you can replace "localhost" with the IP address of the PC. If you render the overlay from a 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.

In-game

Go to any camera view and select full screen mode. Now you will see the overlays as you enable them via the control panel.

Broadcast Tool

Go to this URL:

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

It will show a page with a transparent background that you can integrate into your broadcast tool (or view in a browser, but that's less useful in general).

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.zip inside the overlays folder and renaming it from default to something like your league name or series name. Inside this folder you will find some files and folders:

config.json

The "config.json" file is the heart 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:

  • At the top is various information about your series. Series name, circuit name, location name, info about what round the current event is in etc.
  • In the colors section you can define a base color that is used for some of the slides. Then in car classes you can define a color per car class.
  • the scrolling interval for the banner defines how long each "page" of drivers should stay on screen.
  • In the countdown section you can define the length, background and logos of the countdown slide. The images and videos you define here (like "logo.png" or "video.png") go in the "images" and "videos" folders.
  • The event slide will generate some data by default. You can override this with any data you like in the event slide section
  • The in race season standings element is a work in progress. In the future you will be able to define here how many drivers should be shown in this element here.
  • 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 the race. Us the values here to define the length and interval of the data shown.
  • In the tower section you can define how many drivers should be 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.
  • The video slide can be used to show trailers and partner videos. The files defined here go in the "videos" folder.
  • The pitstop timers appear automatically during a race. Here you can define which timers should be enabled during a pitstop.
  • in the ads section you can define the logos to be shown in the tower. 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 slides like the event slide.
  • 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.

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

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.