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.
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.
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.
*known issue: having the overlay enabled ingame might introduce some stutter. Try experimenting with adding the overlay in your streaming software and disabling it ingame trough the control panel if you experience this.
Go to any camera view and select full screen mode. Now you will see the overlays as you enable them via the control panel.
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).
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:
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:
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.
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": [ ] } |
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 } ] } |